mirror of
https://github.com/immich-app/immich.git
synced 2025-12-18 17:23:16 +03:00
feat(web): keyboard accessible context menus (#10017)
* 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>
This commit is contained in:
Ben
@@ -6,16 +6,13 @@
|
||||
import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
|
||||
import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.svelte';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
|
||||
import { getContextMenuPosition } from '$lib/utils/context-menu';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import {
|
||||
createLibrary,
|
||||
@@ -35,9 +32,9 @@
|
||||
import { fade, slide } from 'svelte/transition';
|
||||
import LinkButton from '../../../lib/components/elements/buttons/link-button.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
import { t } from 'svelte-i18n';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@@ -63,10 +60,6 @@
|
||||
let deleteAssetCount = 0;
|
||||
|
||||
let dropdownOpen: boolean[] = [];
|
||||
let showContextMenu = false;
|
||||
let contextMenuPosition = { x: 0, y: 0 };
|
||||
let selectedLibraryIndex = 0;
|
||||
let selectedLibrary: LibraryResponseDto | null = null;
|
||||
|
||||
let toCreateLibrary = false;
|
||||
|
||||
@@ -79,25 +72,12 @@
|
||||
editScanSettings = null;
|
||||
renameLibrary = null;
|
||||
updateLibraryIndex = null;
|
||||
showContextMenu = false;
|
||||
|
||||
for (let index = 0; index < dropdownOpen.length; index++) {
|
||||
dropdownOpen[index] = false;
|
||||
}
|
||||
};
|
||||
|
||||
const showMenu = (event: MouseEvent, library: LibraryResponseDto, index: number) => {
|
||||
contextMenuPosition = getContextMenuPosition(event);
|
||||
showContextMenu = !showContextMenu;
|
||||
|
||||
selectedLibraryIndex = index;
|
||||
selectedLibrary = library;
|
||||
};
|
||||
|
||||
const onMenuExit = () => {
|
||||
showContextMenu = false;
|
||||
};
|
||||
|
||||
const refreshStats = async (listIndex: number) => {
|
||||
stats[listIndex] = await getLibraryStatistics({ id: libraries[listIndex].id });
|
||||
owner[listIndex] = await getUserAdmin({ id: libraries[listIndex].ownerId });
|
||||
@@ -233,72 +213,72 @@
|
||||
}
|
||||
};
|
||||
|
||||
const onRenameClicked = () => {
|
||||
const onRenameClicked = (index: number) => {
|
||||
closeAll();
|
||||
renameLibrary = selectedLibraryIndex;
|
||||
updateLibraryIndex = selectedLibraryIndex;
|
||||
renameLibrary = index;
|
||||
updateLibraryIndex = index;
|
||||
};
|
||||
|
||||
const onEditImportPathClicked = () => {
|
||||
const onEditImportPathClicked = (index: number) => {
|
||||
closeAll();
|
||||
editImportPaths = selectedLibraryIndex;
|
||||
updateLibraryIndex = selectedLibraryIndex;
|
||||
editImportPaths = index;
|
||||
updateLibraryIndex = index;
|
||||
};
|
||||
|
||||
const onScanNewLibraryClicked = async () => {
|
||||
const onScanNewLibraryClicked = async (library: LibraryResponseDto) => {
|
||||
closeAll();
|
||||
|
||||
if (selectedLibrary) {
|
||||
await handleScan(selectedLibrary.id);
|
||||
if (library) {
|
||||
await handleScan(library.id);
|
||||
}
|
||||
};
|
||||
|
||||
const onScanSettingClicked = () => {
|
||||
const onScanSettingClicked = (index: number) => {
|
||||
closeAll();
|
||||
editScanSettings = selectedLibraryIndex;
|
||||
updateLibraryIndex = selectedLibraryIndex;
|
||||
editScanSettings = index;
|
||||
updateLibraryIndex = index;
|
||||
};
|
||||
|
||||
const onScanAllLibraryFilesClicked = async () => {
|
||||
const onScanAllLibraryFilesClicked = async (library: LibraryResponseDto) => {
|
||||
closeAll();
|
||||
if (selectedLibrary) {
|
||||
await handleScanChanges(selectedLibrary.id);
|
||||
if (library) {
|
||||
await handleScanChanges(library.id);
|
||||
}
|
||||
};
|
||||
|
||||
const onForceScanAllLibraryFilesClicked = async () => {
|
||||
const onForceScanAllLibraryFilesClicked = async (library: LibraryResponseDto) => {
|
||||
closeAll();
|
||||
if (selectedLibrary) {
|
||||
await handleForceScan(selectedLibrary.id);
|
||||
if (library) {
|
||||
await handleForceScan(library.id);
|
||||
}
|
||||
};
|
||||
|
||||
const onRemoveOfflineFilesClicked = async () => {
|
||||
const onRemoveOfflineFilesClicked = async (library: LibraryResponseDto) => {
|
||||
closeAll();
|
||||
if (selectedLibrary) {
|
||||
await handleRemoveOffline(selectedLibrary.id);
|
||||
if (library) {
|
||||
await handleRemoveOffline(library.id);
|
||||
}
|
||||
};
|
||||
|
||||
const onDeleteLibraryClicked = async () => {
|
||||
const onDeleteLibraryClicked = async (library: LibraryResponseDto, index: number) => {
|
||||
closeAll();
|
||||
|
||||
if (!selectedLibrary) {
|
||||
if (!library) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isConfirmedLibrary = await dialogController.show({
|
||||
id: 'delete-library',
|
||||
prompt: $t('admin.confirm_delete_library', { values: { library: selectedLibrary.name } }),
|
||||
prompt: $t('admin.confirm_delete_library', { values: { library: library.name } }),
|
||||
});
|
||||
|
||||
if (!isConfirmedLibrary) {
|
||||
return;
|
||||
}
|
||||
|
||||
await refreshStats(selectedLibraryIndex);
|
||||
if (totalCount[selectedLibraryIndex] > 0) {
|
||||
deleteAssetCount = totalCount[selectedLibraryIndex];
|
||||
await refreshStats(index);
|
||||
if (totalCount[index] > 0) {
|
||||
deleteAssetCount = totalCount[index];
|
||||
|
||||
const isConfirmedLibraryAssetCount = await dialogController.show({
|
||||
id: 'delete-library-assets',
|
||||
@@ -310,7 +290,7 @@
|
||||
}
|
||||
await handleDelete();
|
||||
} else {
|
||||
deletedLibrary = selectedLibrary;
|
||||
deletedLibrary = library;
|
||||
await handleDelete();
|
||||
}
|
||||
};
|
||||
@@ -392,46 +372,38 @@
|
||||
{/if}
|
||||
|
||||
<td class=" text-ellipsis px-4 text-sm">
|
||||
<CircleIconButton
|
||||
<ButtonContextMenu
|
||||
align="top-right"
|
||||
direction="left"
|
||||
color="primary"
|
||||
size="16"
|
||||
icon={mdiDotsVertical}
|
||||
title={$t('library_options')}
|
||||
size="16"
|
||||
on:click={(e) => showMenu(e, library, index)}
|
||||
/>
|
||||
|
||||
{#if showContextMenu}
|
||||
<Portal target="body">
|
||||
<ContextMenu {...contextMenuPosition} onClose={() => onMenuExit()}>
|
||||
<MenuOption on:click={() => onRenameClicked()} text={$t('rename')} />
|
||||
|
||||
{#if selectedLibrary}
|
||||
<MenuOption on:click={() => onEditImportPathClicked()} text={$t('edit_import_paths')} />
|
||||
<MenuOption on:click={() => onScanSettingClicked()} text={$t('scan_settings')} />
|
||||
<hr />
|
||||
<MenuOption on:click={() => onScanNewLibraryClicked()} text={$t('scan_new_library_files')} />
|
||||
<MenuOption
|
||||
on:click={() => onScanAllLibraryFilesClicked()}
|
||||
text={$t('scan_all_library_files')}
|
||||
subtitle={$t('only_refreshes_modified_files')}
|
||||
/>
|
||||
<MenuOption
|
||||
on:click={() => onForceScanAllLibraryFilesClicked()}
|
||||
text={$t('force_re-scan_library_files')}
|
||||
subtitle={$t('refreshes_every_file')}
|
||||
/>
|
||||
<hr />
|
||||
<MenuOption
|
||||
on:click={() => onRemoveOfflineFilesClicked()}
|
||||
text={$t('remove_offline_files')}
|
||||
/>
|
||||
<MenuOption on:click={() => onDeleteLibraryClicked()}>
|
||||
<p class="text-red-600">{$t('delete_library')}</p>
|
||||
</MenuOption>
|
||||
{/if}
|
||||
</ContextMenu>
|
||||
</Portal>
|
||||
{/if}
|
||||
>
|
||||
<MenuOption on:click={() => onRenameClicked(index)} text={$t('rename')} />
|
||||
<MenuOption on:click={() => onEditImportPathClicked(index)} text={$t('edit_import_paths')} />
|
||||
<MenuOption on:click={() => onScanSettingClicked(index)} text={$t('scan_settings')} />
|
||||
<hr />
|
||||
<MenuOption on:click={() => onScanNewLibraryClicked(library)} text={$t('scan_new_library_files')} />
|
||||
<MenuOption
|
||||
on:click={() => onScanAllLibraryFilesClicked(library)}
|
||||
text={$t('scan_all_library_files')}
|
||||
subtitle={$t('only_refreshes_modified_files')}
|
||||
/>
|
||||
<MenuOption
|
||||
on:click={() => onForceScanAllLibraryFilesClicked(library)}
|
||||
text={$t('force_re-scan_library_files')}
|
||||
subtitle={$t('refreshes_every_file')}
|
||||
/>
|
||||
<hr />
|
||||
<MenuOption
|
||||
on:click={() => onRemoveOfflineFilesClicked(library)}
|
||||
text={$t('remove_offline_files')}
|
||||
/>
|
||||
<MenuOption on:click={() => onDeleteLibraryClicked(library, index)}>
|
||||
<p class="text-red-600">{$t('delete_library')}</p>
|
||||
</MenuOption>
|
||||
</ButtonContextMenu>
|
||||
</td>
|
||||
</tr>
|
||||
{#if renameLibrary === index}
|
||||
|
||||
Reference in New Issue
Block a user