Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-04 01:09:14 -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 { scale } from 'svelte/transition';
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;
@ -84,6 +85,8 @@
$: mobileClass = hideMobile ? 'hidden sm:flex' : '';
$: paddingClass = paddingClasses[padding];
const id = $$restProps.id ?? generateId();
let popover: HTMLElement;
let element: HTMLElement;
let top = 0;
@ -111,6 +114,7 @@
left = box.left;
showPopover = true;
setHoverMode(true);
$activePopoverId = id;
void tick().then(() => {
const offsetWidth = popover?.offsetWidth ?? 10;
const spaceBelow = (window.visualViewport?.height ?? window.innerHeight) - box.top - box.height;
@ -128,6 +132,7 @@
bind:this={element}
type={href ? undefined : type}
{href}
{id}
style:width={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}"
@ -141,7 +146,7 @@
>
<Icon path={icon} {size} ariaHidden {viewBox} color="currentColor" />
</svelte:element>
{#if showPopover}
{#if showPopover && $activePopoverId === id}
<div
in: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 timeoutId: ReturnType<typeof setTimeout> | undefined;
const hoverDelay = 600;
const activePopoverId = writable<number>(0);
const getHoverMode = () => _hoverMode;
const setHoverMode = (mode: boolean) => {
if (mode) {
@ -12,4 +17,5 @@ const setHoverMode = (mode: boolean) => {
_hoverMode = false;
}, hoverDelay);
};
export { getHoverMode, hoverDelay, setHoverMode };
export { activePopoverId, getHoverMode, hoverDelay, setHoverMode };