Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-11 02:23:09 -05:00
Code Issues Activity

feat(web): merge suggestion modal: focus on Yes button by default. (#15827)

Browse source 
* feat(web): merge suggestion modal: focus on Yes button by default.

* refactor(web): merge suggestion modal: use Button from @immich/ui.

---------

Co-authored-by: André Ventura <afv@users.noreply.github.com>
This commit is contained in:
André Ventura 2025-02-03 20:01:05 +00:00 • committed by GitHub
parent ef245ea2d2
commit aac029d92b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/lib/components/faces-page/merge-suggestion-modal.svelte
View file

@ -1,11 +1,12 @@
<script lang="ts"> <script lang="ts">
import { onMount, tick } from 'svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte'; import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { getPeopleThumbnailUrl } from '$lib/utils'; import { getPeopleThumbnailUrl } from '$lib/utils';
import { type PersonResponseDto } from '@immich/sdk'; import { type PersonResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiArrowLeft, mdiMerge } from '@mdi/js'; import { mdiArrowLeft, mdiMerge } from '@mdi/js';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte'; import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import Button from '../elements/buttons/button.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -36,6 +37,11 @@
[potentialMergePeople[index], personMerge2] = [personMerge2, potentialMergePeople[index]]; [potentialMergePeople[index], personMerge2] = [personMerge2, potentialMergePeople[index]];
choosePersonToMerge = false; choosePersonToMerge = false;
}; };
onMount(async () => {
await tick();
document.querySelector<HTMLElement>('#merge-confirm-button')?.focus();
});
</script> </script>
<FullScreenModal title="{$t('merge_people')} - {title}" {onClose}> <FullScreenModal title="{$t('merge_people')} - {title}" {onClose}>
@ -113,7 +119,9 @@
</div> </div>
{#snippet stickyBottom()} {#snippet stickyBottom()}
<Button fullwidth color="gray" onclick={onReject}>{$t('no')}</Button> <Button fullWidth shape="round" color="secondary" onclick={onReject}>{$t('no')}</Button>
<Button fullwidth onclick={() => onConfirm([personMerge1, personMerge2])}>{$t('yes')}</Button> <Button id="merge-confirm-button" fullWidth shape="round" onclick={() => onConfirm([personMerge1, personMerge2])}>
{$t('yes')}
</Button>
{/snippet} {/snippet}
</FullScreenModal> </FullScreenModal>