mirror of
https://github.com/immich-app/immich.git
synced 2025-07-09 09:12:57 +02:00
feat(web): Add keyboard shortcut selection on grid (#16713)
* 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:
parent
c80afea468
commit
b8acae2f21
10 changed files with 198 additions and 6 deletions
web/src/lib/components/photos-page
|
@ -42,8 +42,8 @@
|
|||
isSelectionMode?: boolean;
|
||||
singleSelect?: boolean;
|
||||
/** `true` if this asset grid is responds to navigation events; if `true`, then look at the
|
||||
`AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
|
||||
additionally, update the page location/url with the asset as the asset-grid is scrolled */
|
||||
`AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
|
||||
additionally, update the page location/url with the asset as the asset-grid is scrolled */
|
||||
enableRouting: boolean;
|
||||
assetStore: AssetStore;
|
||||
assetInteraction: AssetInteraction;
|
||||
|
@ -706,6 +706,36 @@
|
|||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const focusNextAsset = async () => {
|
||||
if (assetInteraction.focussedAssetId === null) {
|
||||
const firstAsset = assetStore.getFirstAsset();
|
||||
if (firstAsset !== null) {
|
||||
assetInteraction.focussedAssetId = firstAsset.id;
|
||||
}
|
||||
} else {
|
||||
const focussedAsset = assetStore.assets.find((asset) => asset.id === assetInteraction.focussedAssetId);
|
||||
if (focussedAsset) {
|
||||
const nextAsset = await assetStore.getNextAsset(focussedAsset);
|
||||
if (nextAsset !== null) {
|
||||
assetInteraction.focussedAssetId = nextAsset.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const focusPreviousAsset = async () => {
|
||||
if (assetInteraction.focussedAssetId !== null) {
|
||||
const focussedAsset = assetStore.assets.find((asset) => asset.id === assetInteraction.focussedAssetId);
|
||||
if (focussedAsset) {
|
||||
const previousAsset = await assetStore.getPreviousAsset(focussedAsset);
|
||||
if (previousAsset) {
|
||||
assetInteraction.focussedAssetId = previousAsset.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onDestroy(() => {
|
||||
assetStore.taskManager.removeAllTasksForComponent(componentId);
|
||||
});
|
||||
|
@ -749,6 +779,8 @@
|
|||
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(assetStore, assetInteraction) },
|
||||
{ shortcut: { key: 'PageDown' }, preventDefault: false, onShortcut: focusElement },
|
||||
{ shortcut: { key: 'PageUp' }, preventDefault: false, onShortcut: focusElement },
|
||||
{ shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: focusNextAsset },
|
||||
{ shortcut: { key: 'ArrowLeft' }, preventDefault: false, onShortcut: focusPreviousAsset },
|
||||
];
|
||||
|
||||
if (assetInteraction.selectionActive) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue