self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-07 06:16:05 +02:00
Code Issues Releases Activity

feat(web): Add keyboard shortcut selection on grid (#16713)

Browse Source 
* 15712: Added keyboard shortcuts for opening add to album modal and highlighting/selecting an album to add to.

* 15712: Re-factored logic from template code into script. Extracted new album button into separate cmponent.

* 15712: Document new keyboard shortucts now that they work everywhere.

* 15712: Extract some constants/helper functions.

* 15712: Missing comma.

* 15712: Pulled logic out into separate unit testable class.

* 15712: Added a unit test.

* 15712: Move the modal back up to keep the github PR happy.

* 15712: PR feedback - renamed typescript files and switch to class bind directive.

* 15712:Move selection modal into correct package.

* 15712: Better naming of module and files.

* 15712: Add asset highlight using arrow keys.

* 15172: Add escape behaviour everywhere.

* 15712: Don't allow highlighting past start or end.

* 15712: Clear the highlight on changes to the component state.

* 15712: Use focus to track highlighted element.

* 15712: Rename highlight -> focussed.

* 15712: Better naming.

* 15712: Cleanup.

* 15712: Cleanup & simplify.

* 15712: bugfix for clicking on button.

* 15712: Cleanup.

* 15712: Rollback unnecessary changes.

* 15712: Add unit test.

* 15712: Add thumbnail unit test.

* 15712: Prettier.

* 15712: Fix merge issue.

* 15712: Add shortcut info.

* 15712: Fix linter.
This commit is contained in:
Andreas
2025-03-12 02:18:14 +11:00
committed by GitHub
parent c80afea468
commit b8acae2f21
10 changed files with 198 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
import { goto } from '$app/navigation';
import type { Action } from '$lib/components/asset-viewer/actions/action';
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
@ -178,6 +178,26 @@
}
};
const focusNextAsset = () => {
if (assetInteraction.focussedAssetId === null && assets.length > 0) {
assetInteraction.focussedAssetId = assets[0].id;
} else if (assetInteraction.focussedAssetId !== null && assets.length > 0) {
const currentIndex = assets.findIndex((a) => a.id === assetInteraction.focussedAssetId);
if (currentIndex !== -1 && currentIndex + 1 < assets.length) {
assetInteraction.focussedAssetId = assets[currentIndex + 1].id;
}
}
};
const focusPreviousAsset = () => {
if (assetInteraction.focussedAssetId !== null && assets.length > 0) {
const currentIndex = assets.findIndex((a) => a.id === assetInteraction.focussedAssetId);
if (currentIndex >= 1) {
assetInteraction.focussedAssetId = assets[currentIndex - 1].id;
}
}
};
let shortcutList = $derived(
(() => {
if ($isViewerOpen) {
@ -188,6 +208,8 @@
{ shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
{ shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets() },
{ shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: focusNextAsset },
{ shortcut: { key: 'ArrowLeft' }, preventDefault: false, onShortcut: focusPreviousAsset },
];
if (assetInteraction.selectionActive) {
@ -306,6 +328,10 @@
}
};
const assetOnFocusHandler = (asset: AssetResponseDto) => {
assetInteraction.focussedAssetId = asset.id;
};
let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
let idsSelectedAssets = $derived(assetInteraction.selectedAssetsArray.map(({ id }) => id));
@ -382,10 +408,12 @@
}}
onSelect={(asset) => handleSelectAssets(asset)}
onMouseEvent={() => assetMouseEventHandler(asset)}
handleFocus={() => assetOnFocusHandler(asset)}
onIntersected={() => (i === Math.max(1, assets.length - 7) ? onIntersected?.() : void 0)}
{showArchiveIcon}
{asset}
selected={assetInteraction.selectedAssets.has(asset)}
focussed={assetInteraction.isFocussedAsset(asset)}
selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
thumbnailWidth={geometry.boxes[i].width}
thumbnailHeight={geometry.boxes[i].height}