c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-04 02:46:47 +01:00
Code Releases Activity

feat(web): face tooltips (#3924)

Browse source
This commit is contained in:
Daniele Ricci 2023-09-01 01:25:13 +02:00 committed by GitHub
parent 58ae734fc2
commit 66cc744c22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -122,18 +122,28 @@
shadow shadow
url={api.getPeopleThumbnailUrl(person.id)} url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name} altText={person.name}
title={person.name}
widthStyle="90px" widthStyle="90px"
heightStyle="90px" heightStyle="90px"
thumbhash={null} thumbhash={null}
/> />
<p class="mt-1 truncate font-medium">{person.name}</p> <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
<p class="font-light"> {#if person.birthDate}
{#if person.birthDate} {@const personBirthDate = DateTime.fromISO(person.birthDate)}
Age {Math.floor( <p
DateTime.fromISO(asset.fileCreatedAt).diff(DateTime.fromISO(person.birthDate), 'years').years, class="font-light"
title={personBirthDate.toLocaleString(
{
month: 'long',
day: 'numeric',
year: 'numeric',
},
{ locale: $locale },
)} )}
{/if} >
</p> Age {Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
</p>
{/if}
</a> </a>
{/each} {/each}
</div> </div>

3
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View file

@ -7,6 +7,7 @@
export let url: string; export let url: string;
export let altText: string; export let altText: string;
export let title: string | null = null;
export let heightStyle: string | undefined = undefined; export let heightStyle: string | undefined = undefined;
export let widthStyle: string; export let widthStyle: string;
export let thumbhash: string | null = null; export let thumbhash: string | null = null;
@ -27,6 +28,7 @@
style:opacity={hidden ? '0.5' : '1'} style:opacity={hidden ? '0.5' : '1'}
src={url} src={url}
alt={altText} alt={altText}
{title}
class="object-cover transition duration-300 {border class="object-cover transition duration-300 {border
? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary' ? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary'
: ''}" : ''}"
@ -51,6 +53,7 @@
style:height={heightStyle} style:height={heightStyle}
src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))} src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
alt={altText} alt={altText}
{title}
class="absolute top-0 object-cover" class="absolute top-0 object-cover"
class:rounded-xl={curve} class:rounded-xl={curve}
class:shadow-lg={shadow} class:shadow-lg={shadow}

9
web/src/lib/components/faces-page/people-card.svelte
View file

@ -43,11 +43,18 @@
> >
<a href="/people/{person.id}" draggable="false"> <a href="/people/{person.id}" draggable="false">
<div class="h-48 w-48 rounded-xl brightness-95 filter"> <div class="h-48 w-48 rounded-xl brightness-95 filter">
<ImageThumbnail shadow url={api.getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" /> <ImageThumbnail
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
title={person.name}
widthStyle="100%"
/>
</div> </div>
{#if person.name} {#if person.name}
<span <span
class="text-white-shadow absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white" class="text-white-shadow absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white"
title={person.name}
> >
{person.name} {person.name}
</span> </span>