helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add album keyboard shortcuts (#16442)

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.
This commit is contained in:
knechtandreas 2025-03-03 00:15:00 +11:00 • committed by GitHub
parent 366f23774a
commit 6bf2e8dbcb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 455 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/lib/components/asset-viewer/album-list-item.svelte
View file

@ -3,14 +3,25 @@
import { type AlbumResponseDto } from '@immich/sdk';
import { normalizeSearchString } from '$lib/utils/string-utils.js';
import AlbumListItemDetails from './album-list-item-details.svelte';
import type { Action } from 'svelte/action';
import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
interface Props {
album: AlbumResponseDto;
searchQuery?: string;
selected: boolean;
onAlbumClick: () => void;
}
let { album, searchQuery = '', onAlbumClick }: Props = $props();
let { album, searchQuery = '', selected = false, onAlbumClick }: Props = $props();
const scrollIntoViewIfSelected: Action = (node) => {
$effect(() => {
if (selected) {
node.scrollIntoView(SCROLL_PROPERTIES);
}
});
};
let albumNameArray: string[] = $state(['', '', '']);
@ -31,7 +42,10 @@
<button
type="button"
onclick={onAlbumClick}
use:scrollIntoViewIfSelected
class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
class:bg-gray-200={selected}
class:dark:bg-gray-700={selected}
>
<span class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">
{#if album.albumThumbnailAssetId}