mirror of
https://github.com/immich-app/immich.git
synced 2025-12-29 01:11:52 +03:00
b71aa4473b
* feat(web,a11y): context menu keyboard navigation * wip: all context menus visible * wip: more migrations to the ButtonContextMenu, usability improvements * wip: migrate Administration, PeopleCard * wip: refocus the button on click, docs * fix: more intuitive RightClickContextMenu - configurable title - focus management: tab keys, clicks, closing the menu - automatically closing when an option is selected * fix: refining the little details - adjust the aria attributes - intuitive escape key propagation - extract context into its own file * fix: dropdown options not clickable in a <Portal> * wip: small fixes - export selectedColor to prevent unexpected styling - better context function naming * chore: revert changes to list navigation, to reduce scope of the PR * fix: remove topBorder prop * feat: automatically select the first option on enter or space keypress * fix: use Svelte store instead to handle selecting menu options - better prop naming for ButtonContextMenu * feat: hovering the mouse can change the active element * fix: remove Portal, more predictable open/close behavior * feat: make selected item visible using a scroll - also: minor cleanup of the context-menu-navigation Svelte action * feat: maintain context menu position on resize * fix: use the whole padding class as better tailwind convention * fix: options not announcing with screen reader for ButtonContextMenu * fix: screen reader announcing right click context menu options * fix: handle focus out scenario --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
49 lines
1.6 KiB
Svelte
49 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
|
|
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
|
import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
|
|
import type { AlbumResponseDto } from '@immich/sdk';
|
|
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
|
import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
export let shared = false;
|
|
|
|
let showAlbumPicker = false;
|
|
|
|
const { getAssets, clearSelect } = getAssetControlContext();
|
|
|
|
const handleHideAlbumPicker = () => {
|
|
showAlbumPicker = false;
|
|
};
|
|
|
|
const handleAddToNewAlbum = async (albumName: string) => {
|
|
showAlbumPicker = false;
|
|
|
|
const assetIds = [...getAssets()].map((asset) => asset.id);
|
|
await addAssetsToNewAlbum(albumName, assetIds);
|
|
};
|
|
|
|
const handleAddToAlbum = async (album: AlbumResponseDto) => {
|
|
showAlbumPicker = false;
|
|
const assetIds = [...getAssets()].map((asset) => asset.id);
|
|
await addAssetsToAlbum(album.id, assetIds);
|
|
clearSelect();
|
|
};
|
|
</script>
|
|
|
|
<MenuOption
|
|
on:click={() => (showAlbumPicker = true)}
|
|
text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
|
|
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
|
|
/>
|
|
|
|
{#if showAlbumPicker}
|
|
<AlbumSelectionModal
|
|
{shared}
|
|
on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
|
|
on:album={({ detail }) => handleAddToAlbum(detail)}
|
|
onClose={handleHideAlbumPicker}
|
|
/>
|
|
{/if}
|