helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): improve show & hide people accessibility (#10954)

Browse source
This commit is contained in:
Michel Heusschen 2024-07-09 05:42:12 +02:00 • committed by GitHub
parent eb89208abb
commit a0f6d7444a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 41 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/src/lib/components/faces-page/manage-people-visibility.spec.ts
View file

@ -3,6 +3,7 @@ import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-vis
import type { PersonResponseDto } from '@immich/sdk';
import { personFactory } from '@test-data/factories/person-factory';
import { render } from '@testing-library/svelte';
import { tick } from 'svelte';
describe('ManagePeopleVisibility Component', () => {
let personVisible: PersonResponseDto;
@ -48,10 +49,8 @@ describe('ManagePeopleVisibility Component', () => {
},
});
const toggleButton = getByTitle('toggle_visibility');
toggleButton.click();
const saveButton = getByText('done');
saveButton.click();
getByTitle('hide_unnamed_people').click();
getByText('done').click();
expect(sdkMock.updatePeople).toHaveBeenCalledWith({
peopleUpdateDto: {
@ -60,7 +59,7 @@ describe('ManagePeopleVisibility Component', () => {
});
});
it('hides all people on second button press', () => {
it('hides all people on second button press', async () => {
const { getByText, getByTitle } = render(ManagePeopleVisibility, {
props: {
people: [personVisible, personHidden, personWithoutName],
@ -68,11 +67,10 @@ describe('ManagePeopleVisibility Component', () => {
},
});
const toggleButton = getByTitle('toggle_visibility');
toggleButton.click();
toggleButton.click();
const saveButton = getByText('done');
saveButton.click();
getByTitle('hide_unnamed_people').click();
await tick();
getByTitle('hide_all_people').click();
getByText('done').click();
expect(sdkMock.updatePeople).toHaveBeenCalledWith({
peopleUpdateDto: {
@ -84,7 +82,7 @@ describe('ManagePeopleVisibility Component', () => {
});
});
it('shows all people on third button press', () => {
it('shows all people on third button press', async () => {
const { getByText, getByTitle } = render(ManagePeopleVisibility, {
props: {
people: [personVisible, personHidden, personWithoutName],
@ -92,12 +90,12 @@ describe('ManagePeopleVisibility Component', () => {
},
});
const toggleButton = getByTitle('toggle_visibility');
toggleButton.click();
toggleButton.click();
toggleButton.click();
const saveButton = getByText('done');
saveButton.click();
getByTitle('hide_unnamed_people').click();
await tick();
getByTitle('hide_all_people').click();
await tick();
getByTitle('show_all_people').click();
getByText('done').click();
expect(sdkMock.updatePeople).toHaveBeenCalledWith({
peopleUpdateDto: {

26
web/src/lib/components/faces-page/manage-people-visibility.svelte
View file

@ -25,12 +25,13 @@
export let people: PersonResponseDto[];
export let onClose: () => void;
export let titleId: string | undefined = undefined;
let toggleVisibility = ToggleVisibility.SHOW_ALL;
let showLoadingSpinner = false;
$: personIsHidden = getPersonIsHidden(people);
$: toggleIcon = toggleIconOptions[toggleVisibility];
$: toggleButton = toggleButtonOptions[getNextVisibility(toggleVisibility)];
const getPersonIsHidden = (people: PersonResponseDto[]) => {
const personIsHidden: Record<string, boolean> = {};
@ -40,11 +41,13 @@
return personIsHidden;
};
const toggleIconOptions: Record<ToggleVisibility, string> = {
[ToggleVisibility.HIDE_ALL]: mdiEyeOff,
[ToggleVisibility.HIDE_UNNANEMD]: mdiEyeSettings,
[ToggleVisibility.SHOW_ALL]: mdiEye,
};
$: toggleButtonOptions = ((): Record<ToggleVisibility, { icon: string; label: string }> => {
return {
[ToggleVisibility.HIDE_ALL]: { icon: mdiEyeOff, label: $t('hide_all_people') },
[ToggleVisibility.HIDE_UNNANEMD]: { icon: mdiEyeSettings, label: $t('hide_unnamed_people') },
[ToggleVisibility.SHOW_ALL]: { icon: mdiEye, label: $t('show_all_people') },
};
})();
const getNextVisibility = (toggleVisibility: ToggleVisibility) => {
if (toggleVisibility === ToggleVisibility.SHOW_ALL) {
@ -117,14 +120,14 @@
<div class="flex items-center">
<CircleIconButton title={$t('close')} icon={mdiClose} on:click={onClose} />
<div class="flex gap-2 items-center">
<p class="ml-2">{$t('show_and_hide_people')}</p>
<p id={titleId} class="ml-2">{$t('show_and_hide_people')}</p>
<p class="text-sm text-gray-400 dark:text-gray-600">({people.length.toLocaleString($locale)})</p>
</div>
</div>
<div class="flex items-center justify-end">
<div class="flex items-center md:mr-4">
<CircleIconButton title={$t('reset_people_visibility')} icon={mdiRestart} on:click={handleResetVisibility} />
<CircleIconButton title={$t('toggle_visibility')} icon={toggleIcon} on:click={handleToggleVisibility} />
<CircleIconButton title={toggleButton.label} icon={toggleButton.icon} on:click={handleToggleVisibility} />
</div>
{#if !showLoadingSpinner}
<Button on:click={handleSaveVisibility} size="sm" rounded="lg">{$t('done')}</Button>
@ -137,14 +140,17 @@
<div class="flex flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 mt-16">
<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">
{#each people as person, index (person.id)}
{@const hidden = personIsHidden[person.id]}
<button
type="button"
class="group relative"
on:click={() => (personIsHidden[person.id] = !personIsHidden[person.id])}
on:click={() => (personIsHidden[person.id] = !hidden)}
aria-pressed={hidden}
aria-label={person.name ? $t('hide_named_person', { values: { name: person.name } }) : $t('hide_person')}
>
<ImageThumbnail
preload={index < 20}
hidden={personIsHidden[person.id]}
{hidden}
shadow
url={getPeopleThumbnailUrl(person)}
altText={person.name}