mirror of
https://github.com/immich-app/immich.git
synced 2025-12-09 14:45:21 -05:00
6bf2e8dbcb
* 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.
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Action } from 'svelte/action';
|
|
import { mdiPlus } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
|
|
|
|
interface Props {
|
|
searchQuery?: string;
|
|
selected: boolean;
|
|
onNewAlbum: (search: string) => void;
|
|
}
|
|
|
|
let { searchQuery = '', selected = false, onNewAlbum }: Props = $props();
|
|
|
|
const scrollIntoViewIfSelected: Action = (node) => {
|
|
$effect(() => {
|
|
if (selected) {
|
|
node.scrollIntoView(SCROLL_PROPERTIES);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => onNewAlbum(searchQuery)}
|
|
use:scrollIntoViewIfSelected
|
|
class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
|
|
class:bg-gray-200={selected}
|
|
class:dark:bg-gray-700={selected}
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center">
|
|
<Icon path={mdiPlus} size="30" />
|
|
</div>
|
|
<p class="">
|
|
{$t('new_album')}
|
|
{#if searchQuery.length > 0}<b>{searchQuery}</b>{/if}
|
|
</p>
|
|
</button>
|