github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): focus on face-editor search input (#27136)

Browse Source
This commit is contained in:
Andreas Heinz
2026-03-26 18:18:23 +01:00
committed by GitHub
parent 389356149a
commit c9c2322b9d
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
+10 -4
View File
@@ -10,7 +10,7 @@
import { Button, Input, modalManager, toastManager } from '@immich/ui'; import { Button, Input, modalManager, toastManager } from '@immich/ui';
import { Canvas, InteractiveFabricObject, Rect } from 'fabric'; import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
import { clamp } from 'lodash-es'; import { clamp } from 'lodash-es';
import { onMount } from 'svelte'; import { onMount, tick } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
interface Props { interface Props {
@@ -27,6 +27,7 @@
let faceRect: Rect | undefined = $state(); let faceRect: Rect | undefined = $state();
let faceSelectorEl: HTMLDivElement | undefined = $state(); let faceSelectorEl: HTMLDivElement | undefined = $state();
let scrollableListEl: HTMLDivElement | undefined = $state(); let scrollableListEl: HTMLDivElement | undefined = $state();
let searchInputEl: HTMLInputElement | null = $state(null);
let page = $state(1); let page = $state(1);
let candidates = $state<PersonResponseDto[]>([]); let candidates = $state<PersonResponseDto[]>([]);
@@ -81,6 +82,8 @@
onMount(async () => { onMount(async () => {
setupCanvas(); setupCanvas();
await getPeople(); await getPeople();
await tick();
searchInputEl?.focus();
}); });
const imageContentMetrics = $derived.by(() => { const imageContentMetrics = $derived.by(() => {
@@ -221,12 +224,15 @@
$effect(() => { $effect(() => {
const rect = faceRect; const rect = faceRect;
if (rect) { const cvs = canvas;
if (rect && cvs) {
rect.on('moving', positionFaceSelector); rect.on('moving', positionFaceSelector);
rect.on('scaling', positionFaceSelector); rect.on('scaling', positionFaceSelector);
cvs.on('object:modified', () => searchInputEl?.focus());
return () => { return () => {
rect.off('moving', positionFaceSelector); rect.off('moving', positionFaceSelector);
rect.off('scaling', positionFaceSelector); rect.off('scaling', positionFaceSelector);
cvs.off('object:modified', () => searchInputEl?.focus());
}; };
} }
}); });
@@ -290,7 +296,7 @@
}; };
</script> </script>
<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel }} /> <svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel, ignoreInputFields: false }} />
<div <div
id="face-editor-data" id="face-editor-data"
@@ -310,7 +316,7 @@
<p class="text-center text-sm">{$t('select_person_to_tag')}</p> <p class="text-center text-sm">{$t('select_person_to_tag')}</p>
<div class="my-3 relative"> <div class="my-3 relative">
<Input placeholder={$t('search_people')} bind:value={searchTerm} size="tiny" /> <Input placeholder={$t('search_people')} bind:value={searchTerm} bind:ref={searchInputEl} size="tiny" />
</div> </div>
<div bind:this={scrollableListEl} class="h-62.5 overflow-y-auto mt-2"> <div bind:this={scrollableListEl} class="h-62.5 overflow-y-auto mt-2">