KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): ContextMenu unsatisfying UI behaviors (#3787)

Browse Source
This commit is contained in:
Flyot
2023-08-21 07:28:25 +08:00
committed by GitHub
parent 7ad12c7f33
commit 476b735e3c
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/lib/components/photos-page/asset-select-context-menu.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts" context="module">
import { clickOutside } from '$lib/utils/click-outside';
import { createContext } from '$lib/utils/context';
const { get: getMenuContext, set: setContext } = createContext<() => void>();
@@ -16,20 +17,22 @@
let showContextMenu = false;
let contextMenuPosition = { x: 0, y: 0 };
const handleShowMenu = ({ x, y }: MouseEvent) => {
contextMenuPosition = { x, y };
const handleShowMenu = ({ x }: MouseEvent) => {
const navigationBarHeight = 75;
contextMenuPosition = { x: x, y: navigationBarHeight };
showContextMenu = !showContextMenu;
};
setContext(() => (showContextMenu = false));
</script>
<CircleIconButton {title} logo={icon} on:click={handleShowMenu} />
{#if showContextMenu}
<ContextMenu {...contextMenuPosition} on:outclick={() => (showContextMenu = false)}>
<div class="flex flex-col rounded-lg">
<slot />
</div>
</ContextMenu>
{/if}
<div use:clickOutside on:outclick={() => (showContextMenu = false)}>
<CircleIconButton {title} logo={icon} on:click={handleShowMenu} />
{#if showContextMenu}
<ContextMenu {...contextMenuPosition}>
<div class="flex flex-col rounded-lg">
<slot />
</div>
</ContextMenu>
{/if}
</div>