github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-11 04:37:39 +03:00
Code Issues 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

10
web/src/routes/(user)/people/+page.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import AccountOff from 'svelte-material-icons/AccountOff.svelte';
import type { PageData } from './$types';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -15,19 +14,20 @@
} from '$lib/components/shared-components/notification/notification';
import ShowHide from '$lib/components/faces-page/show-hide.svelte';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import EyeOutline from 'svelte-material-icons/EyeOutline.svelte';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
export let data: PageData;
let selectHidden = false;
let initialHiddenValues: Record<string, boolean> = {};
let eyeColorMap: Record<string, string> = {};
let eyeColorMap: Record<string, 'black' | 'white'> = {};
let people = data.people.people;
let countTotalPeople = data.people.total;
@@ -362,7 +362,7 @@
{#if countTotalPeople > 0}
<IconButton on:click={() => (selectHidden = !selectHidden)}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<EyeOutline size="18" />
<Icon path={mdiEyeOutline} size="18" />
<p class="ml-2">Show & hide faces</p>
</div>
</IconButton>
@@ -388,7 +388,7 @@
{:else}
<div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
<div class="flex flex-col content-center items-center text-center">
<AccountOff size="3.5em" />
<Icon path={mdiAccountOff} size="3.5em" />
<p class="mt-5 text-3xl font-medium">No people</p>
</div>
</div>

12
web/src/routes/(user)/people/[personId]/+page.svelte
View File

@@ -29,13 +29,11 @@
import { handleError } from '$lib/utils/handle-error';
import { AssetResponseDto, PersonResponseDto, TimeBucketSize, api } from '@api';
import { onMount } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import type { PageData } from './$types';
import { clickOutside } from '$lib/utils/click-outside';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { mdiPlus, mdiDotsVertical, mdiArrowLeft } from '@mdi/js';
export let data: PageData;
@@ -370,12 +368,12 @@
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<AssetSelectContextMenu icon={Plus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
<DeleteAssets onAssetDelete={(assetId) => $assetStore.removeAsset(assetId)} />
<AssetSelectContextMenu icon={DotsVertical} title="Add">
<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
@@ -383,9 +381,9 @@
</AssetSelectControlBar>
{:else}
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
<ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(previousRoute)}>
<ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close-button-click={() => goto(previousRoute)}>
<svelte:fragment slot="trailing">
<AssetSelectContextMenu icon={DotsVertical} title="Menu">
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_FACE)} />
<MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
<MenuOption text="Merge face" on:click={() => (viewMode = ViewMode.MERGE_FACES)} />