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): navigate with keyboard on person page (#5486)

Browse source 
* feat: navigate with keyboard on person page

* pr feedback

* pr feedback

* pr feedback

* fix: remove unused import
This commit is contained in:
martin 2024-02-13 16:57:15 +01:00 • committed by GitHub
parent b4579e788b
commit dcfd1f9ea6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 81 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/src/lib/components/elements/buttons/button.svelte
View file

@ -27,6 +27,7 @@
export let fullwidth = false;
export let border = false;
export let title: string | undefined = '';
let className = '';
export { className as class };

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

@ -8,12 +8,6 @@
import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
const dispatch = createEventDispatcher<{
reject: void;
confirm: [PersonResponseDto, PersonResponseDto];
close: void;
}>();
export let personMerge1: PersonResponseDto;
export let personMerge2: PersonResponseDto;
export let potentialMergePeople: PersonResponseDto[];
@ -22,6 +16,21 @@
const title = personMerge2.name;
const dispatch = createEventDispatcher<{
reject: void;
confirm: [PersonResponseDto, PersonResponseDto];
close: void;
}>();
const handleKeyboardPress = (event: KeyboardEvent) => {
switch (event.key) {
case 'Escape': {
dispatch('close');
return;
}
}
};
const changePersonToMerge = (newperson: PersonResponseDto) => {
const index = potentialMergePeople.indexOf(newperson);
[potentialMergePeople[index], personMerge2] = [personMerge2, potentialMergePeople[index]];
@ -29,6 +38,8 @@
};
</script>
<svelte:document on:keypress={handleKeyboardPress} />
<FullScreenModal on:clickOutside={() => dispatch('close')}>
<div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
<div
@ -114,7 +125,7 @@
<p class="text-sm text-gray-500 dark:text-gray-300">They will be merged together</p>
</div>
<div class="mt-8 flex w-full gap-4 px-4 pb-4">
<Button color="gray" fullwidth on:click={() => dispatch('reject')}>No</Button>
<Button fullwidth color="gray" on:click={() => dispatch('reject')}>No</Button>
<Button fullwidth on:click={() => dispatch('confirm', [personMerge1, personMerge2])}>Yes</Button>
</div>
</div>