self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-06 06:07:29 +02:00
Code Issues Releases Activity

fix(web): asset viewer navbar overlapping with details tab and context menu not closing on button press (except in album viewer) (#2323)

Browse Source 
* fix overlapping of asset-viewer-nav-bar
with details tab

* fix contextmenu not closing on button press

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
This commit is contained in:
faupau
2023-04-26 04:30:19 +02:00
committed by GitHub
parent b8313abfa8
commit 6631b286c1
5 changed files with 57 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { clickOutside } from '$lib/utils/click-outside';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
@ -45,12 +46,12 @@
</script>
<div
class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[9999]"
class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001]"
>
<div>
<CircleIconButton logo={ArrowLeft} on:click={() => dispatch('goBack')} />
</div>
<div class="text-white flex gap-2">
<div class="text-white flex gap-2 justify-end w-[calc(100%-3rem)] overflow-hidden">
{#if isOwner}
<CircleIconButton
logo={asset.isArchived ? ArchiveArrowUpOutline : ArchiveArrowDownOutline}
@ -107,16 +108,21 @@
{#if isOwner}
<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More" />
<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More">
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition}>
<div class="flex flex-col rounded-lg ">
<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
<MenuOption
on:click={() => onMenuClick('addToSharedAlbum')}
text="Add to Shared Album"
/>
</div>
</ContextMenu>
{/if}
</CircleIconButton>
</div>
{/if}
</div>
</div>
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAssetOptions = false)}>
<div class="flex flex-col rounded-lg ">
<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
<MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
</div>
</ContextMenu>
{/if}