mirror of
https://github.com/immich-app/immich.git
synced 2025-05-30 19:54:52 -04: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>
60 lines
1.8 KiB
Svelte
60 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { quintOut } from 'svelte/easing';
|
|
import { slide } from 'svelte/transition';
|
|
import { clickOutside } from '$lib/actions/click-outside';
|
|
|
|
export let isVisible: boolean = false;
|
|
export let direction: 'left' | 'right' = 'right';
|
|
export let x = 0;
|
|
export let y = 0;
|
|
export let id: string | undefined = undefined;
|
|
export let ariaLabel: string | undefined = undefined;
|
|
export let ariaLabelledBy: string | undefined = undefined;
|
|
export let ariaActiveDescendant: string | undefined = undefined;
|
|
|
|
export let menuElement: HTMLUListElement | undefined = undefined;
|
|
export let onClose: (() => void) | undefined = undefined;
|
|
|
|
let left: number;
|
|
let top: number;
|
|
|
|
// We need to bind clientHeight since the bounding box may return a height
|
|
// of zero when starting the 'slide' animation.
|
|
let height: number;
|
|
|
|
$: {
|
|
if (menuElement) {
|
|
const rect = menuElement.getBoundingClientRect();
|
|
const directionWidth = direction === 'left' ? rect.width : 0;
|
|
const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
|
|
|
|
left = Math.min(window.innerWidth - rect.width, x - directionWidth);
|
|
top = Math.min(window.innerHeight - menuHeight, y);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
bind:clientHeight={height}
|
|
class="fixed z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
|
|
style:left="{left}px"
|
|
style:top="{top}px"
|
|
transition:slide={{ duration: 250, easing: quintOut }}
|
|
use:clickOutside={{ onOutclick: onClose }}
|
|
>
|
|
<ul
|
|
{id}
|
|
aria-activedescendant={ariaActiveDescendant ?? ''}
|
|
aria-label={ariaLabel}
|
|
aria-labelledby={ariaLabelledBy}
|
|
bind:this={menuElement}
|
|
class:max-h-[100vh]={isVisible}
|
|
class:max-h-0={!isVisible}
|
|
class="flex flex-col transition-all duration-[250ms] ease-in-out"
|
|
role="menu"
|
|
tabindex="-1"
|
|
>
|
|
<slot />
|
|
</ul>
|
|
</div>
|