fix(web): asset viewer navbar overlapping with details tab and context menu not closing on button press (except in album viewer) (#2323)
* 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
GitHub
parent
b8313abfa8
commit
6631b286c1
5 changed files with 57 additions and 45 deletions
|
|
@ -43,6 +43,7 @@
|
|||
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
|
||||
|
|
@ -457,11 +458,26 @@
|
|||
{/if}
|
||||
|
||||
{#if !isPublicShared}
|
||||
<CircleIconButton
|
||||
title="Album options"
|
||||
on:click={showAlbumOptionsMenu}
|
||||
logo={DotsVertical}
|
||||
/>
|
||||
<div use:clickOutside on:outclick={() => (isShowAlbumOptions = false)}>
|
||||
<CircleIconButton
|
||||
title="Album options"
|
||||
on:click={showAlbumOptionsMenu}
|
||||
logo={DotsVertical}
|
||||
>{#if isShowAlbumOptions}
|
||||
<ContextMenu {...contextMenuPosition}>
|
||||
{#if isOwned}
|
||||
<MenuOption
|
||||
on:click={() => {
|
||||
isShowThumbnailSelection = true;
|
||||
isShowAlbumOptions = false;
|
||||
}}
|
||||
text="Set album cover"
|
||||
/>
|
||||
{/if}
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</CircleIconButton>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isPublicShared}
|
||||
|
|
@ -590,20 +606,6 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowAlbumOptions}
|
||||
<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAlbumOptions = false)}>
|
||||
{#if isOwned}
|
||||
<MenuOption
|
||||
on:click={() => {
|
||||
isShowThumbnailSelection = true;
|
||||
isShowAlbumOptions = false;
|
||||
}}
|
||||
text="Set album cover"
|
||||
/>
|
||||
{/if}
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
|
||||
{#if isShowThumbnailSelection}
|
||||
<ThumbnailSelection
|
||||
{album}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { AlbumResponseDto, api, UserResponseDto } from '@api';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import BaseModal from '../shared-components/base-modal.svelte';
|
||||
import CircleAvatar from '../shared-components/circle-avatar.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
|
|
@ -84,13 +85,21 @@
|
|||
|
||||
<div id={`icon-${user.id}`} class="flex place-items-center">
|
||||
{#if isOwned}
|
||||
<CircleIconButton
|
||||
on:click={() => showContextMenu(user.id)}
|
||||
logo={DotsVertical}
|
||||
backgroundColor={'transparent'}
|
||||
hoverColor={'#e2e7e9'}
|
||||
size={'20'}
|
||||
/>
|
||||
<div use:clickOutside on:outclick={() => (isShowMenu = false)}>
|
||||
<CircleIconButton
|
||||
on:click={() => showContextMenu(user.id)}
|
||||
logo={DotsVertical}
|
||||
backgroundColor={'transparent'}
|
||||
hoverColor={'#e2e7e9'}
|
||||
size={'20'}
|
||||
>
|
||||
{#if isShowMenu}
|
||||
<ContextMenu {...position}>
|
||||
<MenuOption on:click={() => removeUser(targetUserId)} text="Remove" />
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</CircleIconButton>
|
||||
</div>
|
||||
{:else if user.id == currentUser?.id}
|
||||
<button
|
||||
on:click={() => removeUser('me')}
|
||||
|
|
@ -102,10 +111,4 @@
|
|||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
{#if isShowMenu}
|
||||
<ContextMenu {...position} on:clickoutside={() => (isShowMenu = false)}>
|
||||
<MenuOption on:click={() => removeUser(targetUserId)} text="Remove" />
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</BaseModal>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -391,7 +391,7 @@
|
|||
<div
|
||||
transition:fly={{ duration: 150 }}
|
||||
id="detail-panel"
|
||||
class="bg-immich-bg w-[360px] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
|
||||
class="bg-immich-bg w-[360px] z-[1002] row-span-full transition-all overflow-y-auto dark:bg-immich-dark-bg dark:border-l dark:border-l-immich-dark-gray"
|
||||
translate="yes"
|
||||
>
|
||||
<DetailPanel
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
on:click
|
||||
>
|
||||
<svelte:component this={logo} {size} />
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue