mirror of
https://github.com/immich-app/immich.git
synced 2025-06-22 15:00:52 -04:00
b8acae2f21
* 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.
95 lines
3.3 KiB
Svelte
95 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { mdiInformationOutline } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
import Icon from '../elements/icon.svelte';
|
|
import FullScreenModal from './full-screen-modal.svelte';
|
|
|
|
interface Shortcuts {
|
|
general: ExplainedShortcut[];
|
|
actions: ExplainedShortcut[];
|
|
}
|
|
|
|
interface ExplainedShortcut {
|
|
key: string[];
|
|
action: string;
|
|
info?: string;
|
|
}
|
|
|
|
interface Props {
|
|
onClose: () => void;
|
|
shortcuts?: Shortcuts;
|
|
}
|
|
|
|
let {
|
|
onClose,
|
|
shortcuts = {
|
|
general: [
|
|
{ key: ['←', '→'], action: $t('previous_or_next_photo') },
|
|
{ key: ['x'], action: $t('select') },
|
|
{ key: ['Esc'], action: $t('back_close_deselect') },
|
|
{ key: ['Ctrl', 'k'], action: $t('search_your_photos') },
|
|
{ key: ['Ctrl', '⇧', 'k'], action: $t('open_the_search_filters') },
|
|
],
|
|
actions: [
|
|
{ key: ['f'], action: $t('favorite_or_unfavorite_photo') },
|
|
{ key: ['i'], action: $t('show_or_hide_info') },
|
|
{ key: ['s'], action: $t('stack_selected_photos') },
|
|
{ key: ['l'], action: $t('add_to_album') },
|
|
{ key: ['⇧', 'l'], action: $t('add_to_shared_album') },
|
|
{ key: ['⇧', 'a'], action: $t('archive_or_unarchive_photo') },
|
|
{ key: ['⇧', 'd'], action: $t('download') },
|
|
{ key: ['Space'], action: $t('play_or_pause_video') },
|
|
{ key: ['Del'], action: $t('trash_delete_asset'), info: $t('shift_to_permanent_delete') },
|
|
],
|
|
},
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<FullScreenModal title={$t('keyboard_shortcuts')} width="auto" {onClose}>
|
|
<div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
|
|
{#if shortcuts.general.length > 0}
|
|
<div class="p-4">
|
|
<h2>{$t('general')}</h2>
|
|
<div class="text-sm">
|
|
{#each shortcuts.general as shortcut (shortcut.key.join('-'))}
|
|
<div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
|
|
<div class="flex justify-self-end">
|
|
{#each shortcut.key as key (key)}
|
|
<p class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
|
|
{key}
|
|
</p>
|
|
{/each}
|
|
</div>
|
|
<p class="mb-1 mt-1 flex">{shortcut.action}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{#if shortcuts.actions.length > 0}
|
|
<div class="p-4">
|
|
<h2>{$t('actions')}</h2>
|
|
<div class="text-sm">
|
|
{#each shortcuts.actions as shortcut (shortcut.key.join('-'))}
|
|
<div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
|
|
<div class="flex justify-self-end">
|
|
{#each shortcut.key as key (key)}
|
|
<p class="mr-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
|
|
{key}
|
|
</p>
|
|
{/each}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<p class="mb-1 mt-1 flex">{shortcut.action}</p>
|
|
{#if shortcut.info}
|
|
<Icon path={mdiInformationOutline} title={shortcut.info} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</FullScreenModal>
|