cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
89 changed files with 557 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/admin/jobs-status/+page.svelte
+3 -2
View File
@@ -5,8 +5,9 @@
import { AppRoute } from '$lib/constants';
import { AllJobStatusResponseDto, api } from '@api';
import { onDestroy, onMount } from 'svelte';
import CogIcon from 'svelte-material-icons/Cog.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import type { PageData } from './$types';
import { mdiCog } from '@mdi/js';
export let data: PageData;
@@ -34,7 +35,7 @@
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
<LinkButton>
<div class="flex place-items-center gap-2 text-sm">
<CogIcon size="18" />
<Icon path={mdiCog} size="18" />
Manage Concurrency
</div>
</LinkButton>
web/src/routes/admin/repair/+page.svelte
+8 -11
View File
@@ -12,12 +12,9 @@
import { downloadBlob } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { FileReportItemDto, api, copyToClipboard } from '@api';
import CheckAll from 'svelte-material-icons/CheckAll.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import Download from 'svelte-material-icons/Download.svelte';
import Refresh from 'svelte-material-icons/Refresh.svelte';
import Wrench from 'svelte-material-icons/Wrench.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import type { PageData } from './$types';
import { mdiWrench, mdiCheckAll, mdiDownload, mdiRefresh, mdiContentCopy } from '@mdi/js';
export let data: PageData;
@@ -178,25 +175,25 @@
<div class="flex justify-end gap-2" slot="buttons">
<LinkButton on:click={() => handleRepair()} disabled={matches.length === 0 || repairing}>
<div class="flex place-items-center gap-2 text-sm">
<Wrench size="18" />
<Icon path={mdiWrench} size="18" />
Repair All
</div>
</LinkButton>
<LinkButton on:click={() => handleCheckAll()} disabled={extras.length === 0 || checking}>
<div class="flex place-items-center gap-2 text-sm">
<CheckAll size="18" />
<Icon path={mdiCheckAll} size="18" />
Check All
</div>
</LinkButton>
<LinkButton on:click={() => handleDownload()} disabled={extras.length + orphans.length === 0}>
<div class="flex place-items-center gap-2 text-sm">
<Download size="18" />
<Icon path={mdiDownload} size="18" />
Export
</div>
</LinkButton>
<LinkButton on:click={() => handleRefresh()}>
<div class="flex place-items-center gap-2 text-sm">
<Refresh size="18" />
<Icon path={mdiRefresh} size="18" />
Refresh
</div>
</LinkButton>
@@ -273,7 +270,7 @@
title={orphan.pathValue}
>
<td on:click={() => copyToClipboard(orphan.pathValue)}>
<CircleIconButton logo={ContentCopy} size="18" />
<CircleIconButton icon={mdiContentCopy} size="18" />
</td>
<td class="truncate text-sm font-mono text-left" title={orphan.pathValue}>
{orphan.pathValue}
@@ -313,7 +310,7 @@
title={extra.filename}
>
<td on:click={() => copyToClipboard(extra.filename)}>
<CircleIconButton logo={ContentCopy} size="18" />
<CircleIconButton icon={mdiContentCopy} size="18" />
</td>
<td class="w-full text-md text-ellipsis flex justify-between pr-5">
<span class="text-ellipsis grow truncate font-mono text-sm pr-5" title={extra.filename}
web/src/routes/admin/system-settings/+page.svelte
+5 -6
View File
@@ -17,11 +17,10 @@
import { featureFlags } from '$lib/stores/server-config.store';
import { downloadBlob } from '$lib/utils/asset-utils';
import { copyToClipboard } from '@api';
import Alert from 'svelte-material-icons/Alert.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import Download from 'svelte-material-icons/Download.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import type { PageData } from './$types';
import NewVersionCheckSettings from '$lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte';
import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js';
export let data: PageData;
@@ -39,7 +38,7 @@
{#if $featureFlags.configFile}
<div class="mb-8 flex flex-row items-center gap-2 rounded-md bg-gray-100 p-3 dark:bg-gray-800">
<Alert class="text-yellow-400" size={18} />
<Icon path={mdiAlert} class="text-yellow-400" size={18} />
<h2 class="text-md text-immich-primary dark:text-immich-dark-primary">Config is currently set by a config file</h2>
</div>
{/if}
@@ -48,13 +47,13 @@
<div class="flex justify-end gap-2" slot="buttons">
<LinkButton on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
<div class="flex place-items-center gap-2 text-sm">
<ContentCopy size="18" />
<Icon path={mdiContentCopy} size="18" />
Copy to Clipboard
</div>
</LinkButton>
<LinkButton on:click={() => downloadConfig()}>
<div class="flex place-items-center gap-2 text-sm">
<Download size="18" />
<Icon path={mdiDownload} size="18" />
Export as JSON
</div>
</LinkButton>
web/src/routes/admin/user-management/+page.svelte
+10 -14
View File
@@ -1,12 +1,7 @@
<script lang="ts">
import { api, UserResponseDto } from '@api';
import { onMount } from 'svelte';
import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
import DeleteRestore from 'svelte-material-icons/DeleteRestore.svelte';
import Check from 'svelte-material-icons/Check.svelte';
import Close from 'svelte-material-icons/Close.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
@@ -17,6 +12,7 @@
import Button from '$lib/components/elements/buttons/button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import type { PageData } from './$types';
import { mdiCheck, mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
export let data: PageData;
@@ -196,9 +192,9 @@
<td class="w-2/12 text-ellipsis break-all px-2 text-sm">
<div class="container mx-auto flex flex-wrap justify-center">
{#if user.externalPath}
<Check size="16" />
<Icon path={mdiCheck} size="16" />
{:else}
<Close size="16" />
<Icon path={mdiClose} size="16" />
{/if}
</div>
</td>
@@ -208,14 +204,14 @@
on:click={() => editUserHandler(user)}
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
>
<PencilOutline size="16" />
<Icon path={mdiPencilOutline} size="16" />
</button>
{#if user.id !== data.user.id}
<button
on:click={() => deleteUserHandler(user)}
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
>
<TrashCanOutline size="16" />
<Icon path={mdiTrashCanOutline} size="16" />
</button>
{/if}
{/if}
@@ -225,7 +221,7 @@
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
title={`scheduled removal on ${getDeleteDate(user)}`}
>
<DeleteRestore size="16" />
<Icon path={mdiDeleteRestore} size="16" />
</button>
{/if}
</td>
@@ -265,13 +261,13 @@
on:click={() => editUserHandler(user)}
class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 max-sm:mb-1 sm:p-3"
>
<PencilOutline size="16" />
<Icon path={mdiPencilOutline} size="16" />
</button>
<button
on:click={() => deleteUserHandler(user)}
class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 sm:p-3"
>
<TrashCanOutline size="16" />
<Icon path={mdiTrashCanOutline} size="16" />
</button>
{/if}
{#if isDeleted(user)}
@@ -280,7 +276,7 @@
class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 sm:p-3"
title={`scheduled removal on ${getDeleteDate(user)}`}
>
<DeleteRestore size="16" />
<Icon path={mdiDeleteRestore} size="16" />
</button>
{/if}
</td>