Backupppert/immich
1
1
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-03 21:40:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): material icons ()

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
web/src/lib/components/memory-page
memory-viewer.svelte

17
web/src/lib/components/memory-page/memory-viewer.svelte
View file

@ -6,12 +6,6 @@
import { goto } from '$app/navigation';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import { fromLocalDateTime } from '$lib/utils/timeline-util';
import Play from 'svelte-material-icons/Play.svelte';
import Pause from 'svelte-material-icons/Pause.svelte';
import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
import { AppRoute } from '$lib/constants';
import { page } from '$app/stores';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
@ -20,6 +14,7 @@
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
import { fade } from 'svelte/transition';
import { tweened } from 'svelte/motion';
import { mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiPause, mdiPlay } from '@mdi/js';
const parseIndex = (s: string | null, max: number | null) => Math.max(Math.min(parseInt(s ?? '') || 0, max ?? 0), 0);
@ -115,7 +110,7 @@
{#if !galleryInView}
<div class="flex place-content-center place-items-center gap-2 overflow-hidden">
<CircleIconButton logo={paused ? Play : Pause} forceDark on:click={() => (paused = !paused)} />
<CircleIconButton icon={paused ? mdiPlay : mdiPause} forceDark on:click={() => (paused = !paused)} />
{#each currentMemory.assets as _, i}
<button class="relative w-full py-2" on:click={() => goto(`?memory=${memoryIndex}&asset=${i}`)}>
@ -147,7 +142,7 @@
class:opacity-100={galleryInView}
>
<button on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })} disabled={!galleryInView}>
<CircleIconButton logo={ChevronUp} backgroundColor="white" forceDark />
<CircleIconButton icon={mdiChevronUp} backgroundColor="white" forceDark />
</button>
</div>
{/if}
@ -190,14 +185,14 @@
<div class="ml-4 flex h-full flex-col place-content-center place-items-center">
<div class="inline-block">
{#if canGoBack}
<CircleIconButton logo={ChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
<CircleIconButton icon={mdiChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
{/if}
</div>
</div>
<div class="mr-4 flex h-full flex-col place-content-center place-items-center">
<div class="inline-block">
{#if canGoForward}
<CircleIconButton logo={ChevronRight} backgroundColor="#202123" on:click={toNext} />
<CircleIconButton icon={mdiChevronRight} backgroundColor="#202123" on:click={toNext} />
{/if}
</div>
</div>
@ -260,7 +255,7 @@
class:opacity-100={!galleryInView}
>
<button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
<CircleIconButton logo={ChevronDown} backgroundColor="white" forceDark />
<CircleIconButton icon={mdiChevronDown} backgroundColor="white" forceDark />
</button>
</div>