self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

feat(web): mobile job cards (#2688)

Browse Source
This commit is contained in:
Jason Rasmussen 2023-06-07 12:10:31 -04:00 committed by GitHub
parent d08535e7f6
commit b7d42e7e8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/lib/components/admin-page/jobs/job-tile.svelte
View File

@ -23,14 +23,18 @@
export let allText: string;
export let missingText: string;
const slots = $$props.$$slots;
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
</script>
<div
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-[35px] overflow-hidden"
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
>
<div class="flex flex-col w-full">
{#if queueStatus.isPaused}
@ -38,7 +42,7 @@
{:else if queueStatus.isActive}
<JobTileStatus color="success">Active</JobTileStatus>
{/if}
<div class="flex flex-col gap-2 p-9">
<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"
>
@ -63,13 +67,16 @@
{#if subtitle}
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
{/if}
<div class="text-sm dark:text-white">
<slot />
</div>
<div class="flex w-full max-w-md mt-2">
{#if slots?.description}
<div class="text-sm dark:text-white">
<slot name="description" />
</div>
{/if}
<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
<div
class="flex place-items-center justify-between bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray w-full rounded-tl-lg rounded-bl-lg py-4 pl-4 pr-6"
class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
>
<p>Active</p>
<p class="text-2xl">
@ -78,7 +85,7 @@
</div>
<div
class="flex place-items-center justify-between bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray w-full rounded-tr-lg rounded-br-lg py-4 pr-4 pl-6"
class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
>
<p class="text-2xl">
{waitingCount.toLocaleString($locale)}

24
web/src/lib/components/admin-page/jobs/jobs-panel.svelte
View File

@ -12,7 +12,7 @@
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
import Information from 'svelte-material-icons/Information.svelte';
import CogIcon from 'svelte-material-icons/Cog.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';
@ -20,6 +20,7 @@
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
import JobTile from './job-tile.svelte';
import StorageMigrationDescription from './storage-migration-description.svelte';
import Button from '../../elements/buttons/button.svelte';
export let jobs: AllJobStatusResponseDto;
@ -130,17 +131,14 @@
{/if}
<div class="flex flex-col gap-7">
<div class="flex dark:text-white text-black gap-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-full">
<Information />
<p class="text-xs">
MANAGE JOB CURRENCENCY LEVEL IN
<a
href={`${AppRoute.ADMIN_SETTINGS}?open=job-settings`}
class="text-immich-primary dark:text-immich-dark-primary font-medium">JOB SETTINGS</a
>
</p>
<div class="flex justify-end">
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
<Button size="sm">
<CogIcon size="18" />
<span class="pl-2">Manage Concurrency</span>
</Button>
</a>
</div>
{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
{@const { jobCounts, queueStatus } = jobs[jobName]}
<JobTile
@ -154,7 +152,9 @@
{queueStatus}
on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
>
<svelte:component this={component} />
{#if component}
<svelte:component this={component} slot="description" />
{/if}
</JobTile>
{/each}
</div>