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

35
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View file

@ -4,16 +4,19 @@
import { timeToSeconds } from '$lib/utils/time-to-seconds';
import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
import { createEventDispatcher } from 'svelte';
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import Heart from 'svelte-material-icons/Heart.svelte';
import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import { fade } from 'svelte/transition';
import ImageThumbnail from './image-thumbnail.svelte';
import VideoThumbnail from './video-thumbnail.svelte';
import Rotate360Icon from 'svelte-material-icons/Rotate360.svelte';
import {
mdiArchiveArrowDownOutline,
mdiCheckCircle,
mdiHeart,
mdiImageBrokenVariant,
mdiMotionPauseOutline,
mdiMotionPlayOutline,
mdiRotate360,
} from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
const dispatch = createEventDispatcher();
@ -93,13 +96,13 @@
{disabled}
>
{#if disabled}
<CheckCircle size="24" class="text-zinc-800" />
<Icon path={mdiCheckCircle} size="24" class="text-zinc-800" />
{:else if selected}
<div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
<CheckCircle size="24" class="text-immich-primary" />
<Icon path={mdiCheckCircle} size="24" class="text-immich-primary" />
</div>
{:else}
<CheckCircle size="24" class="text-white/80 hover:text-white" />
<Icon path={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
{/if}
</button>
{/if}
@ -119,20 +122,20 @@
<!-- Favorite asset star -->
{#if !api.isSharedLink && asset.isFavorite}
<div class="absolute bottom-2 left-2 z-10">
<Heart size="24" class="text-white" />
<Icon path={mdiHeart} size="24" class="text-white" />
</div>
{/if}
{#if !api.isSharedLink && showArchiveIcon && asset.isArchived}
<div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
<ArchiveArrowDownOutline size="24" class="text-white" />
<Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
</div>
{/if}
{#if asset.type === AssetTypeEnum.Image && asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR}
<div class="absolute right-0 top-0 z-20 flex place-items-center gap-1 text-xs font-medium text-white">
<span class="pr-2 pt-2">
<Rotate360Icon size="24" />
<Icon path={mdiRotate360} size="24" />
</span>
</div>
{/if}
@ -148,7 +151,7 @@
/>
{:else}
<div class="flex h-full w-full items-center justify-center p-4">
<ImageBrokenVariant size="48" />
<Icon path={mdiImageBrokenVariant} size="48" />
</div>
{/if}
@ -167,8 +170,8 @@
<div class="absolute top-0 h-full w-full">
<VideoThumbnail
url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true)}
pauseIcon={MotionPauseOutline}
playIcon={MotionPlayOutline}
pauseIcon={mdiMotionPauseOutline}
playIcon={mdiMotionPlayOutline}
showTime={false}
curve={selected}
playbackOnIconHover