mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor(web): material icons (#4636)
This commit is contained in:
Jason Rasmussen
GitHub
parent
d5e19e45cd
commit
2ad389f64e
89 changed files with 557 additions and 534 deletions
|
|
@ -1,25 +1,27 @@
|
|||
<script lang="ts">
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
|
||||
import Play from 'svelte-material-icons/Play.svelte';
|
||||
import Pause from 'svelte-material-icons/Pause.svelte';
|
||||
import FastForward from 'svelte-material-icons/FastForward.svelte';
|
||||
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import AlertCircle from 'svelte-material-icons/AlertCircle.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import JobTileButton from './job-tile-button.svelte';
|
||||
import JobTileStatus from './job-tile-status.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import {
|
||||
mdiAlertCircle,
|
||||
mdiAllInclusive,
|
||||
mdiClose,
|
||||
mdiFastForward,
|
||||
mdiPause,
|
||||
mdiPlay,
|
||||
mdiSelectionSearch,
|
||||
} from '@mdi/js';
|
||||
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let jobCounts: JobCountsDto;
|
||||
export let queueStatus: QueueStatusDto;
|
||||
export let allowForceCommand = true;
|
||||
export let icon: typeof Icon;
|
||||
export let icon: string;
|
||||
export let disabled = false;
|
||||
|
||||
export let allText: string;
|
||||
|
|
@ -47,7 +49,7 @@
|
|||
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
|
||||
<div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
|
||||
<span class="flex items-center gap-2">
|
||||
<svelte:component this={icon} size="1.25em" class="hidden shrink-0 sm:block" />
|
||||
<Icon path={icon} size="1.25em" class="hidden shrink-0 sm:block" />
|
||||
{title.toUpperCase()}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
|
|
@ -102,12 +104,12 @@
|
|||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<AlertCircle size="36" /> DISABLED
|
||||
<Icon path={mdiAlertCircle} size="36" /> DISABLED
|
||||
</JobTileButton>
|
||||
{:else if !isIdle}
|
||||
{#if waitingCount > 0}
|
||||
<JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}>
|
||||
<Close size="24" /> CLEAR
|
||||
<Icon path={mdiClose} size="24" /> CLEAR
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{#if queueStatus.isPaused}
|
||||
|
|
@ -117,26 +119,26 @@
|
|||
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
|
||||
>
|
||||
<!-- size property is not reactive, so have to use width and height -->
|
||||
<FastForward width={size} height={size} /> RESUME
|
||||
<Icon path={mdiFastForward} {size} /> RESUME
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
|
||||
>
|
||||
<Pause size="24" /> PAUSE
|
||||
<Icon path={mdiPause} size="24" /> PAUSE
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{:else if allowForceCommand}
|
||||
<JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}>
|
||||
<AllInclusive size="24" />
|
||||
<Icon path={mdiAllInclusive} size="24" />
|
||||
{allText}
|
||||
</JobTileButton>
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<SelectionSearch size="24" />
|
||||
<Icon path={mdiSelectionSearch} size="24" />
|
||||
{missingText}
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
|
|
@ -144,7 +146,7 @@
|
|||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<Play size="48" /> START
|
||||
<Icon path={mdiPlay} size="48" /> START
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,17 @@
|
|||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
|
||||
import type { ComponentType } from 'svelte';
|
||||
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
|
||||
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
|
||||
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
|
||||
import LibraryShelves from 'svelte-material-icons/LibraryShelves.svelte';
|
||||
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
|
||||
import Table from 'svelte-material-icons/Table.svelte';
|
||||
import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
|
||||
import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
|
||||
import Video from 'svelte-material-icons/Video.svelte';
|
||||
import {
|
||||
mdiFaceRecognition,
|
||||
mdiFileJpgBox,
|
||||
mdiFileXmlBox,
|
||||
mdiFolderMove,
|
||||
mdiLibraryShelves,
|
||||
mdiTable,
|
||||
mdiTagMultiple,
|
||||
mdiVectorCircle,
|
||||
mdiVideo,
|
||||
} from '@mdi/js';
|
||||
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
|
||||
import JobTile from './job-tile.svelte';
|
||||
import StorageMigrationDescription from './storage-migration-description.svelte';
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
allText?: string;
|
||||
missingText?: string;
|
||||
disabled?: boolean;
|
||||
icon: typeof Icon;
|
||||
icon: string;
|
||||
allowForceCommand?: boolean;
|
||||
component?: ComponentType;
|
||||
handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
|
||||
|
|
@ -53,17 +54,17 @@
|
|||
|
||||
$: jobDetails = <Partial<Record<JobName, JobDetails>>>{
|
||||
[JobName.ThumbnailGeneration]: {
|
||||
icon: FileJpgBox,
|
||||
icon: mdiFileJpgBox,
|
||||
title: api.getJobName(JobName.ThumbnailGeneration),
|
||||
subtitle: 'Regenerate JPEG and WebP thumbnails',
|
||||
},
|
||||
[JobName.MetadataExtraction]: {
|
||||
icon: Table,
|
||||
icon: mdiTable,
|
||||
title: api.getJobName(JobName.MetadataExtraction),
|
||||
subtitle: 'Extract metadata information i.e. GPS, resolution...etc',
|
||||
},
|
||||
[JobName.Library]: {
|
||||
icon: LibraryShelves,
|
||||
icon: mdiLibraryShelves,
|
||||
title: api.getJobName(JobName.Library),
|
||||
subtitle: 'Perform library tasks',
|
||||
allText: 'ALL',
|
||||
|
|
@ -71,44 +72,44 @@
|
|||
},
|
||||
[JobName.Sidecar]: {
|
||||
title: api.getJobName(JobName.Sidecar),
|
||||
icon: FileXmlBox,
|
||||
icon: mdiFileXmlBox,
|
||||
subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
|
||||
allText: 'SYNC',
|
||||
missingText: 'DISCOVER',
|
||||
disabled: !$featureFlags.sidecar,
|
||||
},
|
||||
[JobName.ObjectTagging]: {
|
||||
icon: TagMultiple,
|
||||
icon: mdiTagMultiple,
|
||||
title: api.getJobName(JobName.ObjectTagging),
|
||||
subtitle: 'Run machine learning to tag objects\nNote that some assets may not have any objects detected',
|
||||
disabled: !$featureFlags.tagImage,
|
||||
},
|
||||
[JobName.ClipEncoding]: {
|
||||
icon: VectorCircle,
|
||||
icon: mdiVectorCircle,
|
||||
title: api.getJobName(JobName.ClipEncoding),
|
||||
subtitle: 'Run machine learning to generate clip embeddings',
|
||||
disabled: !$featureFlags.clipEncode,
|
||||
},
|
||||
[JobName.RecognizeFaces]: {
|
||||
icon: FaceRecognition,
|
||||
icon: mdiFaceRecognition,
|
||||
title: api.getJobName(JobName.RecognizeFaces),
|
||||
subtitle: 'Run machine learning to recognize faces',
|
||||
handleCommand: handleFaceCommand,
|
||||
disabled: !$featureFlags.facialRecognition,
|
||||
},
|
||||
[JobName.VideoConversion]: {
|
||||
icon: Video,
|
||||
icon: mdiVideo,
|
||||
title: api.getJobName(JobName.VideoConversion),
|
||||
subtitle: 'Transcode videos not in the desired format',
|
||||
},
|
||||
[JobName.StorageTemplateMigration]: {
|
||||
icon: FolderMove,
|
||||
icon: mdiFolderMove,
|
||||
title: api.getJobName(JobName.StorageTemplateMigration),
|
||||
allowForceCommand: false,
|
||||
component: StorageMigrationDescription,
|
||||
},
|
||||
[JobName.Migration]: {
|
||||
icon: FolderMove,
|
||||
icon: mdiFolderMove,
|
||||
title: api.getJobName(JobName.Migration),
|
||||
subtitle: 'Migrate thumbnails for assets and faces to the latest folder structure',
|
||||
allowForceCommand: false,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import type { ServerStatsResponseDto } from '@api';
|
||||
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
|
||||
import Memory from 'svelte-material-icons/Memory.svelte';
|
||||
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
|
||||
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
|
||||
import { asByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
|
||||
import StatsCard from './stats-card.svelte';
|
||||
import { mdiCameraIris, mdiMemory, mdiPlayCircle } from '@mdi/js';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
|
||||
export let stats: ServerStatsResponseDto = {
|
||||
photos: 0,
|
||||
|
|
@ -30,15 +29,15 @@
|
|||
<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
|
||||
|
||||
<div class="mt-5 hidden justify-between lg:flex">
|
||||
<StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
|
||||
<StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
|
||||
<StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
|
||||
<StatsCard icon={mdiCameraIris} title="PHOTOS" value={stats.photos} />
|
||||
<StatsCard icon={mdiPlayCircle} title="VIDEOS" value={stats.videos} />
|
||||
<StatsCard icon={mdiMemory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
|
||||
</div>
|
||||
<div class="mt-5 flex lg:hidden">
|
||||
<div class="flex flex-col justify-between rounded-3xl bg-immich-gray p-5 dark:bg-immich-dark-gray">
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<CameraIris size="25" />
|
||||
<Icon path={mdiCameraIris} size="25" />
|
||||
<p>PHOTOS</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
</div>
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<PlayCircle size="25" />
|
||||
<Icon path={mdiPlayCircle} size="25" />
|
||||
<p>VIDEOS</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -62,7 +61,7 @@
|
|||
</div>
|
||||
<div class="flex flex-wrap gap-x-7">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<Memory size="25" />
|
||||
<Icon path={mdiMemory} size="25" />
|
||||
<p>STORAGE</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
|
||||
export let logo: typeof Icon;
|
||||
export let icon: string;
|
||||
export let title: string;
|
||||
export let value: number;
|
||||
export let unit: string | undefined = undefined;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="flex h-[140px] w-[250px] flex-col justify-between rounded-3xl bg-immich-gray p-5 dark:bg-immich-dark-gray">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<svelte:component this={logo} size="40" />
|
||||
<Icon path={icon} size="40" />
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@
|
|||
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
||||
import SettingSelect from '../setting-select.svelte';
|
||||
import SettingSwitch from '../setting-switch.svelte';
|
||||
import HelpCircleOutline from 'svelte-material-icons/HelpCircleOutline.svelte';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
import SettingAccordion from '../setting-accordion.svelte';
|
||||
import { mdiHelpCircleOutline } from '@mdi/js';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
|
||||
export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
|
||||
export let disabled = false;
|
||||
|
|
@ -93,7 +94,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<p class="text-sm dark:text-immich-dark-fg">
|
||||
<HelpCircleOutline class="inline" size="15" />
|
||||
<Icon path={mdiHelpCircleOutline} class="inline" size="15" />
|
||||
To learn more about the terminology used here, refer to FFmpeg documentation for
|
||||
<a href="https://trac.ffmpeg.org/wiki/Encode/H.264" class="underline" target="_blank" rel="noreferrer"
|
||||
>H.264 codec</a
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue