From 98bb3de8da16321cf39c75c6e04889fbe403adb7 Mon Sep 17 00:00:00 2001
From: faupau <paul.paffe@gmx.de>
Date: Tue, 9 May 2023 17:10:13 +0200
Subject: [PATCH] fix(web) small UI improvements (#2369)

* 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>
---
 .../asset-viewer/asset-viewer-nav-bar.svelte  | 29 +++++++++++++++----
 .../asset-viewer/asset-viewer.svelte          |  4 +--
 .../buttons/circle-icon-button.svelte         |  6 +++-
 .../layouts/user-page-layout.svelte           |  4 +--
 web/src/routes/(user)/map/+page.svelte        |  2 +-
 5 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 5121361e24..2ab3df1df8 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -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')}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 4eec8f2505..8e8db38fa3 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -378,7 +378,7 @@
 			}}
 		>
 			<button
-				class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4"
+				class="rounded-full p-3 hover:bg-gray-500 hover:text-white text-gray-500 mx-4"
 				class:navigation-button-hover={halfRightHover}
 				on:click={navigateAssetForward}
 			>
@@ -422,7 +422,7 @@
 
 	.navigation-button-hover {
 		background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-		color: rgb(55 65 81 / var(--tw-text-opacity));
+		color: rgb(255 255 255 / var(--tw-text-opacity));
 		transition: all 150ms;
 	}
 </style>
diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
index f8391495b4..107d8f0d3b 100644
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@@ -6,13 +6,17 @@
 	export let hoverColor = '#e2e7e9';
 	export let size = '24';
 	export let title = '';
+	export let isOpacity = false;
 </script>
 
 <button
 	{title}
 	style:backgroundColor
 	style:--immich-icon-button-hover-color={hoverColor}
-	class="immich-circle-icon-button dark:text-immich-dark-fg hover:dark:text-immich-dark-gray rounded-full p-3 flex place-items-center place-content-center transition-all"
+	class="dark:text-immich-dark-fg rounded-full p-3 flex place-items-center place-content-center transition-all
+	{isOpacity
+		? 'hover:bg-immich-bg/30'
+		: 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}"
 	on:click
 >
 	<svelte:component this={logo} {size} />
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 79afd41054..7db54f4878 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -3,7 +3,6 @@
 	import type { UserResponseDto } from '@api';
 	import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBar from '../shared-components/side-bar/side-bar.svelte';
-
 	export let user: UserResponseDto;
 	export let hideNavbar = false;
 	export let showUploadButton = false;
@@ -26,9 +25,8 @@
 	class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
 >
 	<SideBar />
-
 	<slot name="content">
-		<section class="my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
+		<section class="overflow-y-auto my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
 			{#if title}
 				<div class="flex justify-between place-items-center dark:text-immich-dark-fg px-4 h-10">
 					<p class="font-medium">{title}</p>
diff --git a/web/src/routes/(user)/map/+page.svelte b/web/src/routes/(user)/map/+page.svelte
index db9320cd10..c4b8c5053f 100644
--- a/web/src/routes/(user)/map/+page.svelte
+++ b/web/src/routes/(user)/map/+page.svelte
@@ -45,7 +45,7 @@
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div slot="buttons" />
 
-	<div class="h-[90%] w-full">
+	<div class="h-[90%] w-full relative z-0">
 		{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster }}
 			<Map latlng={initialMapCenter} zoom={7}>
 				<TileLayer