self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): asset viewer navigation buttons (#7888)

Browse Source
This commit is contained in:
Michel Heusschen 2024-03-12 13:09:11 +01:00 committed by GitHub
parent 3cd232f571
commit 41504b9a2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -592,9 +592,9 @@
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
<NavigationArea on:click={(e) => navigateAsset('previous', e)}
><Icon path={mdiChevronLeft} size="36" /></NavigationArea
>
<NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
<Icon path={mdiChevronLeft} size="36" ariaHidden />
</NavigationArea>
</div>
{/if}
@ -708,9 +708,9 @@
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
<NavigationArea on:click={(e) => navigateAsset('next', e)}
><Icon path={mdiChevronRight} size="36" /></NavigationArea
>
<NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
<Icon path={mdiChevronRight} size="36" ariaHidden />
</NavigationArea>
</div>
{/if}

10
web/src/lib/components/asset-viewer/navigation-area.svelte
View File

@ -1,9 +1,15 @@
<script lang="ts">
export let onClick: (e: MouseEvent) => void;
export let label: string;
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="group flex h-full place-items-center" on:click on:keydown>
<button class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="group flex h-full place-items-center hover:cursor-pointer" on:click={onClick}>
<button
class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white"
aria-label={label}
>
<slot />
</button>
</div>