helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): material icons (#4636)

Browse source
This commit is contained in:
Jason Rasmussen 2023-10-25 09:48:25 -04:00 • committed by GitHub
parent d5e19e45cd
commit 2ad389f64e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
89 changed files with 557 additions and 534 deletions
Download patch file Download diff file Expand all files Collapse all files

36
web/src/lib/components/admin-page/jobs/job-tile.svelte
View file

@ -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>