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): 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/album-page/album-viewer.svelte
View File

@@ -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,12 +458,27 @@
{/if}
{#if !isPublicShared}
<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}
<ThemeButton />
@@ -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}

17
web/src/lib/components/album-page/share-info-modal.svelte
View File

@@ -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}
<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>

24
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" />
{/if}
</div>
</div>
<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More">
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAssetOptions = false)}>
<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" />
<MenuOption
on:click={() => onMenuClick('addToSharedAlbum')}
text="Add to Shared Album"
/>
</div>
</ContextMenu>
{/if}
</CircleIconButton>
</div>
{/if}
</div>
</div>

2
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@@ -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

1
web/src/lib/components/elements/buttons/circle-icon-button.svelte
View File

@@ -16,6 +16,7 @@
on:click
>
<svelte:component this={logo} {size} />
<slot />
</button>
<style>