tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): correctly use button and link elements (#7907)

Browse Source
This commit is contained in:
Michel Heusschen 2024-03-12 20:30:19 +01:00 committed by GitHub
parent 67b209808f
commit b07ed3f615
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 64 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -258,18 +258,15 @@
<div class="mt-2 flex flex-wrap gap-2">
{#each people as person, index (person.id)}
{#if showingHiddenPeople || !person.isHidden}
<div
class="w-[90px]"
role="button"
tabindex={index}
on:focus={() => ($boundingBoxesArray = people[index].faces)}
on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
on:mouseleave={() => ($boundingBoxesArray = [])}
>
<a
class="w-[90px]"
href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
: AppRoute.PHOTOS}"
on:focus={() => ($boundingBoxesArray = people[index].faces)}
on:blur={() => ($boundingBoxesArray = [])}
on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
on:mouseleave={() => ($boundingBoxesArray = [])}
on:click={() => dispatch('closeViewer')}
>
<div class="relative">
@ -313,7 +310,6 @@
{/if}
{/if}
</a>
</div>
{/if}
{/each}
</div>
@ -341,12 +337,10 @@
{@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
zone: asset.exifInfo.timeZone ?? undefined,
})}
<div
class="flex justify-between place-items-start gap-4 py-4"
tabindex="0"
role="button"
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4"
on:click={() => (isOwner ? (isShowChangeDate = true) : null)}
on:keydown={(event) => (isOwner ? event.key === 'Enter' && (isShowChangeDate = true) : null)}
title={isOwner ? 'Edit date' : ''}
class:hover:dark:text-immich-dark-primary={isOwner}
class:hover:text-immich-primary={isOwner}
@ -384,11 +378,11 @@
</div>
{#if isOwner}
<button class="focus:outline-none p-1">
<div class="p-1">
<Icon path={mdiPencil} size="20" />
</button>
{/if}
</div>
{/if}
</button>
{:else if !asset.exifInfo?.dateTimeOriginal && !asset.isReadOnly && isOwner}
<div class="flex justify-between place-items-start gap-4 py-4">
<div class="flex gap-4">
@ -396,9 +390,9 @@
<Icon path={mdiCalendar} size="24" />
</div>
</div>
<button class="focus:outline-none p-1">
<div class="p-1">
<Icon path={mdiPencil} size="20" />
</button>
</div>
</div>
{:else if asset.exifInfo?.dateTimeOriginal && asset.isReadOnly}
{@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
@ -517,13 +511,11 @@
{/if}
{#if asset.exifInfo?.city && !asset.isReadOnly}
<div
class="flex justify-between place-items-start gap-4 py-4"
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4"
on:click={() => (isOwner ? (isShowChangeLocation = true) : null)}
on:keydown={(event) => (isOwner ? event.key === 'Enter' && (isShowChangeLocation = true) : null)}
tabindex="0"
title={isOwner ? 'Edit location' : ''}
role="button"
class:hover:dark:text-immich-dark-primary={isOwner}
class:hover:text-immich-primary={isOwner}
>
@ -550,14 +542,12 @@
<Icon path={mdiPencil} size="20" />
</div>
{/if}
</div>
</button>
{:else if !asset.exifInfo?.city && !asset.isReadOnly && isOwner}
<div
class="flex justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
<button
type="button"
class="flex w-full text-left justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
on:click={() => (isShowChangeLocation = true)}
on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
tabindex="0"
role="button"
title="Add location"
>
<div class="flex gap-4">
@ -570,7 +560,7 @@
<div class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
</div>
</div>
</button>
{:else if asset.exifInfo?.city && asset.isReadOnly}
<div class="flex justify-between place-items-start gap-4 py-4">
<div class="flex gap-4">

11
web/src/lib/components/sharedlinks-page/shared-link-card.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import { goto } from '$app/navigation';
import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute } from '$lib/constants';
import { getAssetThumbnailUrl } from '$lib/utils';
@ -122,15 +121,9 @@
{/if}
{#if !link.expiresAt || !isExpired(link.expiresAt)}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="hover:cursor-pointer"
title="Go to share page"
on:click={() => goto(`${AppRoute.SHARE}/${link.key}`)}
on:keydown={() => goto(`${AppRoute.SHARE}/${link.key}`)}
>
<a href="{AppRoute.SHARE}/{link.key}" title="Go to share page">
<Icon path={mdiOpenInNew} />
</div>
</a>
{/if}
</div>