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

fix(web) small UI improvements (#2369)

Browse Source 
* small changes in asset viewer navigation

* add conditional wrapper and scroll only content

* fix formatting

* update conditional wrapper

* remove emptz title attribute

* remove conditional-wrapper as it is not needed

* remove isTimeline

* fix map over sidebar

* fix overlap

* fix conflict

* revert z-index

* add relative z index

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
This commit is contained in:
faupau
2023-05-09 17:10:13 +02:00
committed by GitHub
parent cd43edf074
commit 98bb3de8da
5 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,14 +46,15 @@
</script>
<div
class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001]"
class="h-16 flex justify-between place-items-center px-3 transition-transform duration-200 z-[1001] bg-gradient-to-b from-black/40"
>
<div>
<CircleIconButton logo={ArrowLeft} on:click={() => dispatch('goBack')} />
<div class="text-white">
<CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
</div>
<div class="text-white flex gap-2 justify-end w-[calc(100%-3rem)] overflow-hidden">
{#if isOwner}
<CircleIconButton
isOpacity={true}
logo={asset.isArchived ? ArchiveArrowUpOutline : ArchiveArrowDownOutline}
title={asset.isArchived ? 'Unarchive' : 'Archive'}
on:click={() => dispatch('toggleArchive')}
@ -63,12 +64,14 @@
{#if showMotionPlayButton}
{#if isMotionPhotoPlaying}
<CircleIconButton
isOpacity={true}
logo={MotionPauseOutline}
title="Stop Motion Photo"
on:click={() => dispatch('stopMotionPhoto')}
/>
{:else}
<CircleIconButton
isOpacity={true}
logo={MotionPlayOutline}
title="Play Motion Photo"
on:click={() => dispatch('playMotionPhoto')}
@ -77,6 +80,7 @@
{/if}
{#if showCopyButton}
<CircleIconButton
isOpacity={true}
logo={ContentCopy}
title="Copy Image"
on:click={() => {
@ -88,18 +92,21 @@
{#if showDownloadButton}
<CircleIconButton
isOpacity={true}
logo={CloudDownloadOutline}
on:click={() => dispatch('download')}
title="Download"
/>
{/if}
<CircleIconButton
isOpacity={true}
logo={InformationOutline}
on:click={() => dispatch('showDetail')}
title="Info"
/>
{#if isOwner}
<CircleIconButton
isOpacity={true}
logo={asset.isFavorite ? Heart : HeartOutline}
on:click={() => dispatch('favorite')}
title="Favorite"
@ -107,12 +114,22 @@
{/if}
{#if isOwner}
<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
<CircleIconButton
isOpacity={true}
logo={DeleteOutline}
on:click={() => dispatch('delete')}
title="Delete"
/>
<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
<CircleIconButton logo={DotsVertical} on:click={showOptionsMenu} title="More">
<CircleIconButton
isOpacity={true}
logo={DotsVertical}
on:click={showOptionsMenu}
title="More"
>
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition}>
<div class="flex flex-col rounded-lg ">
<div class="flex flex-col rounded-lg text-black bg-immich-bg">
<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
<MenuOption
on:click={() => onMenuClick('addToSharedAlbum')}