From 4be55428d26b87682bfab57a7f2398bbf7682220 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 21 Feb 2023 13:42:22 +0100
Subject: [PATCH] feat(web): syling sidebar buttons (#1812)

* feat(web): syling sidebar buttons

* style: some small changes

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../side-bar/side-bar-button.svelte           |  42 ++++-
 .../side-bar/side-bar.svelte                  | 165 +++++-------------
 web/src/routes/admin/+layout.svelte           |   2 +-
 web/src/routes/user-settings/+page.svelte     |   2 +-
 4 files changed, 86 insertions(+), 125 deletions(-)

diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
index 18c03301a1..aafe3276e3 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
+	import { fade } from 'svelte/transition';
+	import { createEventDispatcher } from 'svelte';
 
 	export let title: string;
 	export let logo: typeof Icon;
 	export let isSelected: boolean;
 
-	import { createEventDispatcher } from 'svelte';
+	let showMoreInformation = false;
 
 	const dispatch = createEventDispatcher();
 	const onButtonClicked = () => dispatch('selected');
@@ -14,13 +17,40 @@
 <div
 	on:click={onButtonClicked}
 	on:keydown={onButtonClicked}
-	class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
+	class={`flex gap-4 justify-between place-items-center w-full px-5 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
     ${
-			isSelected &&
-			'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
+			isSelected
+				? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
+				: ''
 		}
   `}
 >
-	<svelte:component this={logo} size="24" />
-	<p class="font-medium text-sm ">{title}</p>
+	<div class="flex gap-4 place-items-center w-full">
+		<svelte:component this={logo} size="1.5em" />
+		<p class="font-medium text-sm">{title}</p>
+	</div>
+
+	{#if $$slots.moreInformation}
+		<div
+			class="relative flex justify-center select-none cursor-default"
+			on:mouseenter={() => (showMoreInformation = true)}
+			on:mouseleave={() => (showMoreInformation = false)}
+		>
+			<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
+				<InformationOutline />
+			</div>
+
+			{#if showMoreInformation}
+				<div class="absolute left-6 top-0 z-20">
+					<div
+						class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
+						class:hidden={!showMoreInformation}
+						transition:fade={{ duration: 200 }}
+					>
+						<slot name="moreInformation" />
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index dd133b5ad4..bea3b34e40 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -4,19 +4,12 @@
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
 	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
-	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
 	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
-	import { fade } from 'svelte/transition';
 	import { AppRoute } from '../../../constants';
 	import LoadingSpinner from '../loading-spinner.svelte';
 	import StatusBox from '../status-box.svelte';
 	import SideBarButton from './side-bar-button.svelte';
 
-	let showAssetCount = false;
-	let showSharingCount = false;
-	let showFavoritesCount = false;
-	let showAlbumsCount = false;
-
 	const getAssetCount = async () => {
 		const { data: assetCount } = await api.assetApi.getAssetCountByUserId();
 
@@ -51,137 +44,75 @@
 		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
 		href={AppRoute.PHOTOS}
-		class="relative"
 		draggable="false"
 	>
 		<SideBarButton
-			title={`Photos`}
+			title="Photos"
 			logo={ImageOutline}
 			isSelected={$page.route.id === AppRoute.PHOTOS}
-		/>
-		<div
-			id="asset-count-info"
-			class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
-			on:mouseenter={() => (showAssetCount = true)}
-			on:mouseleave={() => (showAssetCount = false)}
 		>
-			<InformationOutline size={18} color="#989a9f" />
-			{#if showAssetCount}
-				<div
-					transition:fade={{ duration: 200 }}
-					class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
-				>
-					{#await getAssetCount()}
-						<LoadingSpinner />
-					{:then data}
-						<div>
-							<p>{data.videos.toLocaleString(locale)} Videos</p>
-							<p>{data.photos.toLocaleString(locale)} Photos</p>
-						</div>
-					{/await}
-				</div>
-			{/if}
-		</div>
+			<svelte:fragment slot="moreInformation">
+				{#await getAssetCount()}
+					<LoadingSpinner />
+				{:then data}
+					<div>
+						<p>{data.videos.toLocaleString(locale)} Videos</p>
+						<p>{data.photos.toLocaleString(locale)} Photos</p>
+					</div>
+				{/await}
+			</svelte:fragment>
+		</SideBarButton>
 	</a>
-
-	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative" draggable="false">
+	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
 		<SideBarButton
 			title="Sharing"
 			logo={AccountMultipleOutline}
 			isSelected={$page.route.id === AppRoute.SHARING}
-		/>
-		<div
-			id="sharing-count-info"
-			class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
-			on:mouseenter={() => (showSharingCount = true)}
-			on:mouseleave={() => (showSharingCount = false)}
 		>
-			<InformationOutline size={18} color="#989a9f" />
-			{#if showSharingCount}
-				<div
-					transition:fade={{ duration: 200 }}
-					class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
-				>
-					{#await getAlbumCount()}
-						<LoadingSpinner />
-					{:then data}
-						<div>
-							<p>{(data.shared + data.sharing).toLocaleString(locale)} Albums</p>
-						</div>
-					{/await}
-				</div>
-			{/if}
-		</div>
+			<svelte:fragment slot="moreInformation">
+				{#await getAlbumCount()}
+					<LoadingSpinner />
+				{:then data}
+					<div>
+						<p>{(data.shared + data.sharing).toLocaleString(locale)} Albums</p>
+					</div>
+				{/await}
+			</svelte:fragment>
+		</SideBarButton>
 	</a>
-	<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
+
+	<div class="text-xs p-5 pb-2 dark:text-immich-dark-fg">
 		<p>LIBRARY</p>
 	</div>
-	<a
-		data-sveltekit-preload-data="hover"
-		href={AppRoute.FAVORITES}
-		class="relative"
-		draggable="false"
-	>
+	<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
 		<SideBarButton
 			title="Favorites"
 			logo={StarOutline}
 			isSelected={$page.route.id == AppRoute.FAVORITES}
-		/>
-
-		<div
-			id="favorite-count-info"
-			class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
-			on:mouseenter={() => (showFavoritesCount = true)}
-			on:mouseleave={() => (showFavoritesCount = false)}
 		>
-			<InformationOutline size={18} color="#989a9f" />
-			{#if showFavoritesCount}
-				<div
-					transition:fade={{ duration: 200 }}
-					id="asset-count-info-detail"
-					class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
-				>
-					{#await getFavoriteCount()}
-						<LoadingSpinner />
-					{:then data}
-						<div>
-							<p>{data.favorites} Favorites</p>
-						</div>
-					{/await}
-				</div>
-			{/if}
-		</div>
+			<svelte:fragment slot="moreInformation">
+				{#await getFavoriteCount()}
+					<LoadingSpinner />
+				{:then data}
+					<div>
+						<p>{data.favorites} Favorites</p>
+					</div>
+				{/await}
+			</svelte:fragment>
+		</SideBarButton>
 	</a>
-	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false">
-		<SideBarButton
-			title="Albums"
-			logo={ImageAlbum}
-			isSelected={$page.route.id === AppRoute.ALBUMS}
-		/>
-
-		<div
-			id="album-count-info"
-			class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
-			on:mouseenter={() => (showAlbumsCount = true)}
-			on:mouseleave={() => (showAlbumsCount = false)}
-		>
-			<InformationOutline size={18} color="#989a9f" />
-			{#if showAlbumsCount}
-				<div
-					transition:fade={{ duration: 200 }}
-					id="asset-count-info-detail"
-					class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
-				>
-					{#await getAlbumCount()}
-						<LoadingSpinner />
-					{:then data}
-						<div>
-							<p>{data.owned.toLocaleString(locale)} Albums</p>
-						</div>
-					{/await}
-				</div>
-			{/if}
-		</div>
+	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
+		<SideBarButton title="Albums" logo={ImageAlbum} isSelected={$page.route.id === AppRoute.ALBUMS}>
+			<svelte:fragment slot="moreInformation">
+				{#await getAlbumCount()}
+					<LoadingSpinner />
+				{:then data}
+					<div>
+						<p>{data.owned.toLocaleString(locale)} Albums</p>
+					</div>
+				{/await}
+			</svelte:fragment>
+		</SideBarButton>
 	</a>
 
 	<!-- Status Box -->
diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte
index 44fd8c92f0..59c1ef18af 100644
--- a/web/src/routes/admin/+layout.svelte
+++ b/web/src/routes/admin/+layout.svelte
@@ -61,7 +61,7 @@
 		</section>
 
 		<section class="overflow-y-auto immich-scrollbar ">
-			<div id="setting-title" class="pt-10 w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
+			<div id="setting-title" class="pt-10 w-full bg-immich-bg dark:bg-immich-dark-bg">
 				<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
 					{getPageTitle($page.route.id)}
 				</h1>
diff --git a/web/src/routes/user-settings/+page.svelte b/web/src/routes/user-settings/+page.svelte
index 2b6278f188..ca91e85651 100644
--- a/web/src/routes/user-settings/+page.svelte
+++ b/web/src/routes/user-settings/+page.svelte
@@ -19,7 +19,7 @@
 	<section class="overflow-y-auto ">
 		<div
 			id="user-setting-title"
-			class="pt-10 fixed w-full z-50 bg-immich-bg dark:bg-immich-dark-bg"
+			class="pt-10 fixed w-full z-10 bg-immich-bg dark:bg-immich-dark-bg"
 		>
 			<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
 				User Settings