self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-16 03:40:33 +02:00
Code Issues Releases Activity

feat(web, a11y): add labels! (#8354)

Browse Source 
* feat(web, a11y): add labels!

* fix: move required prop to the top of the list
This commit is contained in:
Ben Basten
2024-03-29 12:48:07 +00:00
committed by GitHub
parent 6f677b4fae
commit fcc3b81745
20 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -108,7 +108,12 @@
{#if canGoForward}
<div class="flex place-content-center place-items-center gap-2 overflow-hidden">
<CircleIconButton icon={paused ? mdiPlay : mdiPause} forceDark on:click={() => (paused = !paused)} />
<CircleIconButton
title={paused ? 'Play memories' : 'Pause memories'}
icon={paused ? mdiPlay : mdiPause}
forceDark
on:click={() => (paused = !paused)}
/>
{#each currentMemory.assets as _, index}
<button
@ -144,7 +149,7 @@
class:opacity-100={galleryInView}
>
<button on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })} disabled={!galleryInView}>
<CircleIconButton icon={mdiChevronUp} backgroundColor="white" forceDark />
<CircleIconButton title="Hide gallery" icon={mdiChevronUp} backgroundColor="white" forceDark />
</button>
</div>
{/if}
@ -204,13 +209,23 @@
<!-- CONTROL BUTTONS -->
{#if canGoBack}
<div class="absolute top-1/2 left-0 ml-4">
<CircleIconButton icon={mdiChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
<CircleIconButton
title="Previous memory"
icon={mdiChevronLeft}
backgroundColor="#202123"
on:click={toPrevious}
/>
</div>
{/if}
{#if canGoForward}
<div class="absolute top-1/2 right-0 mr-4">
<CircleIconButton icon={mdiChevronRight} backgroundColor="#202123" on:click={toNext} />
<CircleIconButton
title="Next memory"
icon={mdiChevronRight}
backgroundColor="#202123"
on:click={toNext}
/>
</div>
{/if}
@ -271,7 +286,7 @@
class:opacity-100={!galleryInView}
>
<button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
<CircleIconButton icon={mdiChevronDown} backgroundColor="white" forceDark />
<CircleIconButton title="Show gallery" icon={mdiChevronDown} backgroundColor="white" forceDark />
</button>
</div>