KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2026-02-15 12:49:19 +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

24
web/src/routes/(user)/albums/[albumId]/+page.svelte
View File

@@ -44,6 +44,7 @@
import Plus from 'svelte-material-icons/Plus.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import type { PageData } from './$types';
import { clickOutside } from '$lib/utils/click-outside';
export let data: PageData;
@@ -166,9 +167,10 @@
timelineInteractionStore.clearMultiselect();
};
const handleOpenAlbumOptions = ({ x, y }: MouseEvent) => {
contextMenuPosition = { x, y };
viewMode = ViewMode.ALBUM_OPTIONS;
const handleOpenAlbumOptions = ({ x }: MouseEvent) => {
const navigationBarHeight = 75;
contextMenuPosition = { x: x, y: navigationBarHeight };
viewMode = viewMode === ViewMode.VIEW ? ViewMode.ALBUM_OPTIONS : ViewMode.VIEW;
};
const handleSelectFromComputer = async () => {
@@ -330,13 +332,15 @@
<CircleIconButton title="Download" on:click={handleDownloadAlbum} logo={FolderDownloadOutline} />
{#if isOwned}
<CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} logo={DotsVertical}>
{#if viewMode === ViewMode.ALBUM_OPTIONS}
<ContextMenu {...contextMenuPosition} on:outclick={() => (viewMode = ViewMode.VIEW)}>
<MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
</ContextMenu>
{/if}
</CircleIconButton>
<div use:clickOutside on:outclick={() => (viewMode = ViewMode.VIEW)}>
<CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} logo={DotsVertical}>
{#if viewMode === ViewMode.ALBUM_OPTIONS}
<ContextMenu {...contextMenuPosition}>
<MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
</ContextMenu>
{/if}
</CircleIconButton>
</div>
{/if}
{/if}