helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +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

5
web/src/lib/components/forms/api-key-form.svelte
View file

@ -1,9 +1,10 @@
<script lang="ts">
import type { APIKeyResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiKeyVariant } from '@mdi/js';
export let apiKey: Partial<APIKeyResponseDto>;
export let title = 'API Key';
@ -22,7 +23,7 @@
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<KeyVariant size="4em" />
<Icon path={mdiKeyVariant} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h1>

5
web/src/lib/components/forms/api-key-secret.svelte
View file

@ -1,9 +1,10 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
import { copyToClipboard } from '@api';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import { mdiKeyVariant } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
export let secret = '';
@ -24,7 +25,7 @@
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<KeyVariant size="4em" />
<Icon path={mdiKeyVariant} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">API Key</h1>
<p class="text-sm dark:text-immich-dark-fg">

7
web/src/lib/components/forms/edit-album-form.svelte
View file

@ -1,11 +1,10 @@
<script lang="ts">
import { AlbumResponseDto, api } from '@api';
import { createEventDispatcher } from 'svelte';
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import Button from '../elements/buttons/button.svelte';
import { handleError } from '../../utils/handle-error';
import { mdiImageAlbum } from '@mdi/js';
export let album: AlbumResponseDto;
@ -36,7 +35,7 @@
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<ImageAlbum size="4em" />
<Icon path={mdiImageAlbum} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit album</h1>
</div>

5
web/src/lib/components/forms/edit-user-form.svelte
View file

@ -1,11 +1,12 @@
<script lang="ts">
import { api, UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
import Button from '../elements/buttons/button.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import { handleError } from '../../utils/handle-error';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiAccountEditOutline } from '@mdi/js';
export let user: UserResponseDto;
export let canResetPassword = true;
@ -72,7 +73,7 @@
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<AccountEditOutline size="4em" />
<Icon path={mdiAccountEditOutline} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
</div>

5
web/src/lib/components/forms/library-exclusion-pattern-form.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import FolderRemove from 'svelte-material-icons/FolderRemove.svelte';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiFolderRemove } from '@mdi/js';
export let exclusionPattern: string;
export let canDelete = false;
@ -20,7 +21,7 @@
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<FolderRemove size="4em" />
<Icon path={mdiFolderRemove} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Add Exclusion pattern</h1>
</div>

5
web/src/lib/components/forms/library-import-path-form.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import FolderSync from 'svelte-material-icons/FolderSync.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import { mdiFolderSync } from '@mdi/js';
export let importPath: string;
export let title = 'Import path';
@ -22,7 +23,7 @@
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<FolderSync size="4em" />
<Icon path={mdiFolderSync} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h1>

5
web/src/lib/components/forms/library-import-paths-form.svelte
View file

@ -4,8 +4,9 @@
import { handleError } from '../../utils/handle-error';
import LibraryImportPathForm from './library-import-path-form.svelte';
import { onMount } from 'svelte';
import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import type { LibraryResponseDto } from '@api';
import { mdiPencilOutline } from '@mdi/js';
export let library: Partial<LibraryResponseDto>;
@ -141,7 +142,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"
>
<PencilOutline size="16" />
<Icon path={mdiPencilOutline} size="16" />
</button>
</td>
</tr>

5
web/src/lib/components/forms/library-scan-settings-form.svelte
View file

@ -4,8 +4,9 @@
import { LibraryType, type LibraryResponseDto } from '@api';
import { handleError } from '../../utils/handle-error';
import { onMount } from 'svelte';
import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
import { mdiPencilOutline } from '@mdi/js';
export let library: Partial<LibraryResponseDto>;
@ -139,7 +140,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"
>
<PencilOutline size="16" />
<Icon path={mdiPencilOutline} size="16" />
</button>
</td>
</tr>