Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:17:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): fix asset grid keyboard navigation (#9448)

Browse Source 
* fix(web): fix asset grid keyboard navigation

* Ignore eslint rule

* Pass page up/down keys after focusing on grid

* Remove unneeded event listener, use existing class
This commit is contained in:
Snowknight26 2024-05-24 15:11:55 -05:00 committed by GitHub
parent 602f0a3499
commit 847cb90038
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -101,6 +101,12 @@
} }
}; };
const focusElement = () => {
if (document.activeElement === document.body) {
element.focus();
}
};
$: shortcutList = (() => { $: shortcutList = (() => {
if ($isSearchEnabled || $showAssetViewer) { if ($isSearchEnabled || $showAssetViewer) {
return []; return [];
@ -111,8 +117,8 @@
{ shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) }, { shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
{ shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) }, { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(assetStore, assetInteractionStore) }, { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(assetStore, assetInteractionStore) },
{ shortcut: { key: 'PageUp' }, onShortcut: () => (element.scrollTop = 0) }, { shortcut: { key: 'PageDown' }, preventDefault: false, onShortcut: focusElement },
{ shortcut: { key: 'PageDown' }, onShortcut: () => (element.scrollTop = element.scrollHeight) }, { shortcut: { key: 'PageUp' }, preventDefault: false, onShortcut: focusElement },
]; ];
if ($isMultiSelectState) { if ($isMultiSelectState) {
@ -406,7 +412,8 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar --> <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section <section
id="asset-grid" id="asset-grid"
class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}" class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
tabindex="-1"
bind:clientHeight={viewport.height} bind:clientHeight={viewport.height}
bind:clientWidth={viewport.width} bind:clientWidth={viewport.width}
bind:this={element} bind:this={element}