feat(web): better person naming interface (#16631)

* feat(web): better person naming interface

* feat(web): better person naming interface

* feat(web): better person naming interface

* feat(web): better person naming interface

* feat(web): better person naming interface

* feat(web): better person naming interface

* feat(web): better person naming interface
This commit is contained in:
Alex 2025-03-11 10:08:52 -05:00 committed by GitHub
parent 6caa11d079
commit c80afea468
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 104 additions and 152 deletions

View file

@ -6,7 +6,6 @@
import { getPeopleThumbnailUrl } from '$lib/utils';
import { type PersonResponseDto } from '@immich/sdk';
import {
mdiAccountEditOutline,
mdiAccountMultipleCheckOutline,
mdiCalendarEditOutline,
mdiDotsVertical,
@ -22,22 +21,13 @@
interface Props {
person: PersonResponseDto;
preload?: boolean;
onChangeName: () => void;
onSetBirthDate: () => void;
onMergePeople: () => void;
onHidePerson: () => void;
onToggleFavorite: () => void;
}
let {
person,
preload = false,
onChangeName,
onSetBirthDate,
onMergePeople,
onHidePerson,
onToggleFavorite,
}: Props = $props();
let { person, preload = false, onSetBirthDate, onMergePeople, onHidePerson, onToggleFavorite }: Props = $props();
let showVerticalDots = $state(false);
</script>
@ -63,6 +53,7 @@
altText={person.name}
title={person.name}
widthStyle="100%"
circle
/>
{#if person.isFavorite}
<div class="absolute top-4 left-4">
@ -70,14 +61,6 @@
</div>
{/if}
</div>
{#if person.name}
<span
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}
</span>
{/if}
</a>
{#if showVerticalDots}
@ -91,7 +74,6 @@
title={$t('show_person_options')}
>
<MenuOption onClick={onHidePerson} icon={mdiEyeOffOutline} text={$t('hide_person')} />
<MenuOption onClick={onChangeName} icon={mdiAccountEditOutline} text={$t('change_name')} />
<MenuOption onClick={onSetBirthDate} icon={mdiCalendarEditOutline} text={$t('set_date_of_birth')} />
<MenuOption onClick={onMergePeople} icon={mdiAccountMultipleCheckOutline} text={$t('merge_people')} />
<MenuOption

View file

@ -27,7 +27,7 @@
});
</script>
<div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
<div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-10 gap-1">
{#each people as person, index (person.id)}
{#if hasNextPage && index === people.length - 1}
<div bind:this={lastPersonContainer}>