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

feat(web): ✨ Rounded corners on selected assets (#3524)

Browse source 
* feat(web): ✨ Rounded corners on selected assets

Add rounded corner on selected items and fix circle icon transparent background on selection

* refactor: Ran prettier to fix formatting issues
This commit is contained in:
Paul Thevenot 2023-08-03 16:11:21 +02:00 • committed by GitHub
parent e4e049d040
commit 01210dceac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -96,7 +96,9 @@
{#if disabled}
<CheckCircle size="24" class="text-zinc-800" />
{:else if selected}
<CheckCircle size="24" class="text-immich-primary" />
<div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
<CheckCircle size="24" class="text-immich-primary" />
</div>
{:else}
<CheckCircle size="24" class="text-white/80 hover:text-white" />
{/if}
@ -107,10 +109,12 @@
<div
class="absolute h-full w-full select-none bg-gray-100 transition-transform dark:bg-immich-dark-gray"
class:scale-[0.85]={selected}
class:rounded-xl={selected}
>
<!-- Gradient overlay on hover -->
<div
class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
class:rounded-xl={selected}
/>
<!-- Favorite asset star -->
@ -141,6 +145,7 @@
widthStyle="{width}px"
heightStyle="{height}px"
thumbhash={asset.thumbhash}
curve={selected}
/>
{:else}
<div class="flex h-full w-full items-center justify-center p-4">
@ -153,6 +158,7 @@
<VideoThumbnail
url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
enablePlayback={mouseOver}
curve={selected}
durationInSeconds={timeToSeconds(asset.duration)}
/>
</div>
@ -165,6 +171,7 @@
pauseIcon={MotionPauseOutline}
playIcon={MotionPlayOutline}
showTime={false}
curve={selected}
playbackOnIconHover
/>
</div>