From 730fb29582531905d16d0cb3de7f450d8beedf05 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Fri, 29 Dec 2023 15:09:06 +0000
Subject: [PATCH] fix: improved the design of layer header name and buttons.
 Show tooltip to describe what they are.

---
 .changeset/twelve-worms-crash.md              |  5 ++
 .../pages/map/layers/LayerTemplate.svelte     | 50 ++++++++++++-------
 .../map/layers/header/VisibilityButton.svelte | 15 +++++-
 sites/geohub/src/lib/helper/initTippy.ts      | 20 ++++++++
 4 files changed, 69 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/twelve-worms-crash.md

diff --git a/.changeset/twelve-worms-crash.md b/.changeset/twelve-worms-crash.md
new file mode 100644
index 0000000000..abc30a720e
--- /dev/null
+++ b/.changeset/twelve-worms-crash.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: improved the design of layer header name and buttons. Show tooltip to describe what they are.
diff --git a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
index b765840ee6..3cb93571ef 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
 	import { AccessLevel } from '$lib/config/AppConfig';
-	import { clean, getAccessLevelIcon, getLayerStyle, handleEnterKey, initTippy } from '$lib/helper';
+	import {
+		clean,
+		getAccessLevelIcon,
+		getLayerStyle,
+		handleEnterKey,
+		initTippy,
+		initTooltipTippy
+	} from '$lib/helper';
 	import type { Layer, RasterTileMetadata, VectorTileMetadata } from '$lib/types';
 	import {
 		EDITING_LAYER_STORE_CONTEXT_KEY,
@@ -63,6 +70,8 @@
 	});
 	let tooltipContent: HTMLElement;
 
+	const tippyTooltip = initTooltipTippy();
+
 	const handleZoomToLayer = () => {
 		clickMenuButton();
 		let bounds: LngLatBoundsLike;
@@ -170,22 +179,35 @@
 				</div>
 			{/if}
 
-			<i class="fa-solid fa-lock fa-lg px-2 access-icon {accessIcon ? 'show' : ''}" />
-
-			<span class="layer-name has-text-weight-bold is-size-6 pl-1">
+			<span
+				class="layer-name is-size-5 has-text-grey-dark"
+				use:tippyTooltip={{ content: layer.name }}
+			>
 				{clean(layer.name)}
 			</span>
 		</div>
 
 		<div class="is-flex is-align-items-center">
+			{#if accessIcon}
+				<button
+					class="button menu-button p-0 px-3"
+					use:tippyTooltip={{ content: 'This dataset has limited data accesibility' }}
+				>
+					<span class="icon is-small">
+						<i class="fa-solid fa-circle-exclamation fa-lg has-text-grey-dark"></i>
+					</span>
+				</button>
+			{/if}
+
 			{#if showEditButton}
 				<button
-					class="button menu-button hidden-mobile"
+					class="button menu-button hidden-mobile p-0 px-3"
 					on:click={handleEditLayer}
 					disabled={($editingLayerStore && $editingLayerStore.id !== layer.id) ?? false}
+					use:tippyTooltip={{ content: 'Edit the settings on how the layer is visualised.' }}
 				>
 					<span class="icon is-small">
-						<i class="fa-solid fa-palette fa-lg"></i>
+						<i class="fa-solid fa-sliders fa-lg has-text-grey-dark"></i>
 					</span>
 				</button>
 			{/if}
@@ -194,11 +216,11 @@
 
 			<div class="dropdown-trigger">
 				<button
-					class="button menu-button menu-button-{layer.id}"
+					class="button menu-button menu-button-{layer.id} p-0 px-3"
 					use:tippy={{ content: tooltipContent }}
 				>
 					<span class="icon is-small">
-						<i class="fas fa-ellipsis fa-lg" aria-hidden="true"></i>
+						<i class="fas fa-ellipsis fa-lg has-text-grey-dark" aria-hidden="true"></i>
 					</span>
 				</button>
 			</div>
@@ -290,14 +312,6 @@
 	.header {
 		max-height: 60px;
 
-		.access-icon {
-			visibility: hidden;
-
-			&.show {
-				visibility: visible;
-			}
-		}
-
 		.layer-header {
 			cursor: default;
 
@@ -310,12 +324,10 @@
 	}
 
 	.layer-name {
-		align-items: center;
-
 		overflow: hidden;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
+		-webkit-line-clamp: 1;
 	}
 
 	:global(.tippy-box[data-theme='transparent']) {
diff --git a/sites/geohub/src/components/pages/map/layers/header/VisibilityButton.svelte b/sites/geohub/src/components/pages/map/layers/header/VisibilityButton.svelte
index 0110ab44a1..f7441d1cb9 100644
--- a/sites/geohub/src/components/pages/map/layers/header/VisibilityButton.svelte
+++ b/sites/geohub/src/components/pages/map/layers/header/VisibilityButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { initTooltipTippy } from '$lib/helper';
 	import type { Layer } from '$lib/types';
 	import {
 		LAYERLISTSTORE_CONTEXT_KEY,
@@ -12,6 +13,8 @@
 	const map: MapStore = getContext(MAPSTORE_CONTEXT_KEY);
 	const layerListStore: LayerListStore = getContext(LAYERLISTSTORE_CONTEXT_KEY);
 
+	const tippyTooltip = initTooltipTippy();
+
 	export let layer: Layer;
 
 	const layerId = layer.id;
@@ -50,9 +53,17 @@
 	});
 </script>
 
-<button class="button menu-button" on:click={toggleVisibility}>
+<button
+	class="button menu-button p-0 px-3"
+	on:click={toggleVisibility}
+	use:tippyTooltip={{ content: 'Change the layer visibility' }}
+>
 	<span class="icon is-small">
-		<i class="fa-solid {visibility === 'visible' ? 'fa-eye' : 'fa-eye-slash'} fa-lg" />
+		<i
+			class="fa-solid {visibility === 'visible'
+				? 'fa-eye'
+				: 'fa-eye-slash'} fa-lg has-text-grey-dark"
+		/>
 	</span>
 </button>
 
diff --git a/sites/geohub/src/lib/helper/initTippy.ts b/sites/geohub/src/lib/helper/initTippy.ts
index 4502b97291..8ce7532cce 100644
--- a/sites/geohub/src/lib/helper/initTippy.ts
+++ b/sites/geohub/src/lib/helper/initTippy.ts
@@ -39,3 +39,23 @@ export const initTippy = (options?: TippyProps) => {
 	const tippy = createTippy(props);
 	return tippy;
 };
+
+/**
+ * Create tippy object for tooltip purpose
+ * @param options TippyProps
+ * @returns Tippy object
+ */
+export const initTooltipTippy = (options?: TippyProps) => {
+	let props: TippyProps = {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		trigger: 'mouseenter focus'
+	};
+
+	if (options) {
+		props = Object.assign(props, options);
+	}
+
+	const tippy = createTippy(props);
+	return tippy;
+};