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

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 21 deletions
Show stats 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"> <script lang="ts" context="module">
import { clickOutside } from '$lib/utils/click-outside';
import { createContext } from '$lib/utils/context'; import { createContext } from '$lib/utils/context';
const { get: getMenuContext, set: setContext } = createContext<() => void>(); const { get: getMenuContext, set: setContext } = createContext<() => void>();
@ -16,20 +17,22 @@
let showContextMenu = false; let showContextMenu = false;
let contextMenuPosition = { x: 0, y: 0 }; let contextMenuPosition = { x: 0, y: 0 };
const handleShowMenu = ({ x, y }: MouseEvent) => { const handleShowMenu = ({ x }: MouseEvent) => {
contextMenuPosition = { x, y }; const navigationBarHeight = 75;
contextMenuPosition = { x: x, y: navigationBarHeight };
showContextMenu = !showContextMenu; showContextMenu = !showContextMenu;
}; };
setContext(() => (showContextMenu = false)); setContext(() => (showContextMenu = false));
</script> </script>
<CircleIconButton {title} logo={icon} on:click={handleShowMenu} /> <div use:clickOutside on:outclick={() => (showContextMenu = false)}>
<CircleIconButton {title} logo={icon} on:click={handleShowMenu} />
{#if showContextMenu} {#if showContextMenu}
<ContextMenu {...contextMenuPosition} on:outclick={() => (showContextMenu = false)}> <ContextMenu {...contextMenuPosition}>
<div class="flex flex-col rounded-lg"> <div class="flex flex-col rounded-lg">
<slot /> <slot />
</div> </div>
</ContextMenu> </ContextMenu>
{/if} {/if}
</div>

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

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