Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-11 01:18:24 -05:00
Code Issues Activity

wip: prevent multiple popovers

Browse source
This commit is contained in:
ben-basten 2024-10-12 14:54:53 -04:00
parent b4bc9a6d2e
commit 0ea22f76bd
No known key found for this signature in database
GPG key ID: 78803E894B258348
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/lib/components/elements/buttons/circle-icon-button.svelte
View file

@ -33,7 +33,8 @@
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { scale } from 'svelte/transition'; import { scale } from 'svelte/transition';
import { tick } from 'svelte'; import { tick } from 'svelte';
import { getHoverMode, hoverDelay, setHoverMode } from '$lib/utils/popover-timer'; import { activePopoverId, getHoverMode, hoverDelay, setHoverMode } from '$lib/utils/popover-timer';
import { generateId } from '$lib/utils/generate-id';
type $$Props = Props; type $$Props = Props;
@ -84,6 +85,8 @@
$: mobileClass = hideMobile ? 'hidden sm:flex' : ''; $: mobileClass = hideMobile ? 'hidden sm:flex' : '';
$: paddingClass = paddingClasses[padding]; $: paddingClass = paddingClasses[padding];
const id = $$restProps.id ?? generateId();
let popover: HTMLElement; let popover: HTMLElement;
let element: HTMLElement; let element: HTMLElement;
let top = 0; let top = 0;
@ -111,6 +114,7 @@
left = box.left; left = box.left;
showPopover = true; showPopover = true;
setHoverMode(true); setHoverMode(true);
$activePopoverId = id;
void tick().then(() => { void tick().then(() => {
const offsetWidth = popover?.offsetWidth ?? 10; const offsetWidth = popover?.offsetWidth ?? 10;
const spaceBelow = (window.visualViewport?.height ?? window.innerHeight) - box.top - box.height; const spaceBelow = (window.visualViewport?.height ?? window.innerHeight) - box.top - box.height;
@ -128,6 +132,7 @@
bind:this={element} bind:this={element}
type={href ? undefined : type} type={href ? undefined : type}
{href} {href}
{id}
style:width={buttonSize ? buttonSize + 'px' : ''} style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''} style:height={buttonSize ? buttonSize + 'px' : ''}
class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}" class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}"
@ -141,7 +146,7 @@
> >
<Icon path={icon} {size} ariaHidden {viewBox} color="currentColor" /> <Icon path={icon} {size} ariaHidden {viewBox} color="currentColor" />
</svelte:element> </svelte:element>
{#if showPopover} {#if showPopover && $activePopoverId === id}
<div <div
in:scale={{ duration: 150, opacity: 0, start: 0.9 }} in:scale={{ duration: 150, opacity: 0, start: 0.9 }}
out:scale={{ duration: 150, opacity: 0, start: 0.9 }} out:scale={{ duration: 150, opacity: 0, start: 0.9 }}

8
web/src/lib/utils/popover-timer.ts
View file

@ -1,6 +1,11 @@
import { writable } from 'svelte/store';
let _hoverMode = false; let _hoverMode = false;
let timeoutId: ReturnType<typeof setTimeout> | undefined; let timeoutId: ReturnType<typeof setTimeout> | undefined;
const hoverDelay = 600; const hoverDelay = 600;
const activePopoverId = writable<number>(0);
const getHoverMode = () => _hoverMode; const getHoverMode = () => _hoverMode;
const setHoverMode = (mode: boolean) => { const setHoverMode = (mode: boolean) => {
if (mode) { if (mode) {
@ -12,4 +17,5 @@ const setHoverMode = (mode: boolean) => {
_hoverMode = false; _hoverMode = false;
}, hoverDelay); }, hoverDelay);
}; };
export { getHoverMode, hoverDelay, setHoverMode };
export { activePopoverId, getHoverMode, hoverDelay, setHoverMode };