From 504edea8537d7dcef55f4060ef8f09b303bfa985 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Mon, 8 Jan 2024 16:13:33 +0000
Subject: [PATCH 1/2] fix: click the entire header to toggle layer editor and
 legend panel.

---
 .../pages/map/layers/LayerEdit.svelte         | 90 ++++-------------
 .../map/plugins/MaplibreLegendControl.svelte  | 67 ++-----------
 .../src/components/util/FloatingPanel.svelte  | 96 +++++++++++++++++++
 3 files changed, 120 insertions(+), 133 deletions(-)
 create mode 100644 sites/geohub/src/components/util/FloatingPanel.svelte

diff --git a/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte b/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte
index 7eb1e3769b..5e24d0bf19 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerEdit.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { clean, getLayerStyle } from '$lib/helper';
+	import FloatingPanel from '$components/util/FloatingPanel.svelte';
+	import { getLayerStyle } from '$lib/helper';
 	import {
 		EDITING_LAYER_STORE_CONTEXT_KEY,
 		EDITING_MENU_SHOWN_CONTEXT_KEY,
@@ -23,8 +24,6 @@
 	$legendReadonly = false;
 	setContext(LEGEND_READONLY_CONTEXT_KEY, legendReadonly);
 
-	let isExpanded = true;
-
 	const handleClose = () => {
 		$editingLayerStore = undefined;
 		$editingMenuShownStore = false;
@@ -34,35 +33,17 @@
 {#if $editingLayerStore}
 	{@const type = getLayerStyle($map, $editingLayerStore.id)?.type}
 	<div class="layer-editor">
-		<div class="editor-header has-background-light is-flex is-align-items-center px-2">
-			<span class="layer-name is-size-6">{clean($editingLayerStore.name)}</span>
-			<div class="header-buttons pl-2">
-				<button
-					class="button px-0 chevron-button {isExpanded ? 'is-expanded' : ''}"
-					on:click={() => {
-						isExpanded = !isExpanded;
-					}}
-				>
-					<span class="icon is-small">
-						<i class="fa-solid fa-chevron-down"></i>
-					</span>
-				</button>
-				<button class="button pl-2" on:click={handleClose}>
-					<span class="icon is-small">
-						<i class="fas fa-xmark"></i>
-					</span>
-				</button>
-			</div>
-		</div>
-		<div class="editor-contents px-2 pb-2" hidden={!isExpanded}>
-			{#if type}
-				{#if type === 'raster'}
-					<RasterLayer bind:layer={$editingLayerStore} />
-				{:else}
-					<VectorLayer bind:layer={$editingLayerStore} />
+		<FloatingPanel title={$editingLayerStore.name} on:close={handleClose}>
+			<div class="editor-contents">
+				{#if type}
+					{#if type === 'raster'}
+						<RasterLayer bind:layer={$editingLayerStore} />
+					{:else}
+						<VectorLayer bind:layer={$editingLayerStore} />
+					{/if}
 				{/if}
-			{/if}
-		</div>
+			</div>
+		</FloatingPanel>
 	</div>
 {/if}
 
@@ -74,49 +55,10 @@
 		width: 350px;
 
 		z-index: 20;
-		background-color: white;
-
-		.editor-header {
-			.layer-name {
-				overflow: hidden;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 1;
-				word-break: break-all;
-			}
-
-			.header-buttons {
-				margin-left: auto;
-				display: grid;
-				grid-template-columns: repeat(2, 1fr);
-				gap: 5px;
-
-				.chevron-button {
-					-webkit-transition: all 0.3s ease;
-					-moz-transition: all 0.3s ease;
-					-ms-transition: all 0.3s ease;
-					-o-transition: all 0.3s ease;
-					transition: all 0.3s ease;
-
-					&.is-expanded {
-						transform: rotate(-180deg);
-						-webkit-transform: rotate(-180deg);
-						-moz-transform: rotate(-180deg);
-						-ms-transform: rotate(-180deg);
-						-o-transform: rotate(-180deg);
-						transition: rotateZ(-180deg);
-					}
-				}
-				.button {
-					border: none;
-					background: transparent;
-				}
-			}
-		}
+	}
 
-		.editor-contents {
-			overflow-y: auto;
-			max-height: 70vh;
-		}
+	.editor-contents {
+		overflow-y: auto;
+		max-height: 70vh;
 	}
 </style>
diff --git a/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte b/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
index 4a6dfd3bb7..66aceb9200 100644
--- a/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
+++ b/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
@@ -51,6 +51,7 @@
 <script lang="ts">
 	import RasterSimpleLayer from '$components/pages/map/layers/raster/RasterSimpleLayer.svelte';
 	import VectorSimpleLayer from '$components/pages/map/layers/vector/VectorSimpleLayer.svelte';
+	import FloatingPanel from '$components/util/FloatingPanel.svelte';
 	import { getLayerStyle, initTooltipTippy } from '$lib/helper';
 	import { draggable, type DragOptions } from '@neodrag/svelte';
 	import { Loader } from '@undp-data/svelte-undp-design';
@@ -60,8 +61,6 @@
 	export let show = true;
 	export let readonly = true;
 
-	let isExpanded = true;
-
 	const legendReadonly: LegendReadonlyStore = createLegendReadonlyStore();
 	$legendReadonly = readonly;
 	setContext(LEGEND_READONLY_CONTEXT_KEY, legendReadonly);
@@ -136,32 +135,12 @@
 </button>
 
 <div class="contents {show ? 'is-active' : ''}" bind:this={contentDiv} use:draggable={dragOptions}>
-	<div class="legend-header has-background-light is-flex is-align-items-center px-2">
-		<span class="is-size-6">Legend</span>
-		<div class="header-buttons pl-2">
-			<button
-				class="button px-0 chevron-button {isExpanded ? 'is-expanded' : ''}"
-				on:click={() => {
-					isExpanded = !isExpanded;
-				}}
-			>
-				<span class="icon is-small">
-					<i class="fa-solid fa-chevron-down"></i>
-				</span>
-			</button>
-			<button
-				class="button pl-2"
-				on:click={() => {
-					show = false;
-				}}
-			>
-				<span class="icon is-small">
-					<i class="fas fa-xmark"></i>
-				</span>
-			</button>
-		</div>
-	</div>
-	<div hidden={!isExpanded}>
+	<FloatingPanel
+		title="Legend"
+		on:close={() => {
+			show = false;
+		}}
+	>
 		<div class="is-flex is-align-items-center layer-header pt-2">
 			<div class="layer-header-buttons buttons">
 				{#key $layerList}
@@ -264,7 +243,7 @@
 				</div>
 			{/if}
 		</div>
-	</div>
+	</FloatingPanel>
 </div>
 
 <style lang="scss">
@@ -285,36 +264,6 @@
 		display: none;
 		width: $width;
 
-		.legend-header {
-			.header-buttons {
-				margin-left: auto;
-				display: grid;
-				grid-template-columns: repeat(2, 1fr);
-				gap: 5px;
-
-				.chevron-button {
-					-webkit-transition: all 0.3s ease;
-					-moz-transition: all 0.3s ease;
-					-ms-transition: all 0.3s ease;
-					-o-transition: all 0.3s ease;
-					transition: all 0.3s ease;
-
-					&.is-expanded {
-						transform: rotate(-180deg);
-						-webkit-transform: rotate(-180deg);
-						-moz-transform: rotate(-180deg);
-						-ms-transform: rotate(-180deg);
-						-o-transform: rotate(-180deg);
-						transition: rotateZ(-180deg);
-					}
-				}
-				.button {
-					border: none;
-					background: transparent;
-				}
-			}
-		}
-
 		.layer-header-buttons {
 			margin-left: auto;
 		}
diff --git a/sites/geohub/src/components/util/FloatingPanel.svelte b/sites/geohub/src/components/util/FloatingPanel.svelte
new file mode 100644
index 0000000000..6bfbccc953
--- /dev/null
+++ b/sites/geohub/src/components/util/FloatingPanel.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { clean, handleEnterKey } from '$lib/helper';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let title: string;
+	export let isExpanded = true;
+
+	const handleClose = () => {
+		dispatch('close');
+	};
+</script>
+
+<div class="floating-panel">
+	<div class="header has-background-light is-flex is-align-items-center px-2">
+		<div
+			class="header-title is-size-6"
+			role="button"
+			tabindex="0"
+			on:click={() => {
+				isExpanded = !isExpanded;
+			}}
+			on:keydown={handleEnterKey}
+		>
+			{clean(title)}
+		</div>
+		<div class="header-buttons pl-2">
+			<button
+				class="button px-0 chevron-button {isExpanded ? 'is-expanded' : ''}"
+				on:click={() => {
+					isExpanded = !isExpanded;
+				}}
+			>
+				<span class="icon is-small">
+					<i class="fa-solid fa-chevron-down"></i>
+				</span>
+			</button>
+			<button class="button pl-2" on:click={handleClose}>
+				<span class="icon is-small">
+					<i class="fas fa-xmark"></i>
+				</span>
+			</button>
+		</div>
+	</div>
+	<div class="contents px-2 pb-2" hidden={!isExpanded}>
+		<slot />
+	</div>
+</div>
+
+<style lang="scss">
+	.floating-panel {
+		background-color: white;
+
+		.header {
+			cursor: pointer;
+
+			.header-title {
+				width: 100%;
+				overflow: hidden;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				word-break: break-all;
+			}
+
+			.header-buttons {
+				margin-left: auto;
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				gap: 5px;
+
+				.chevron-button {
+					-webkit-transition: all 0.3s ease;
+					-moz-transition: all 0.3s ease;
+					-ms-transition: all 0.3s ease;
+					-o-transition: all 0.3s ease;
+					transition: all 0.3s ease;
+
+					&.is-expanded {
+						transform: rotate(-180deg);
+						-webkit-transform: rotate(-180deg);
+						-moz-transform: rotate(-180deg);
+						-ms-transform: rotate(-180deg);
+						-o-transform: rotate(-180deg);
+						transition: rotateZ(-180deg);
+					}
+				}
+				.button {
+					border: none;
+					background: transparent;
+				}
+			}
+		}
+	}
+</style>

From 0fabc5ed64307831f468aba06372c982997d7006 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Mon, 8 Jan 2024 16:22:48 +0000
Subject: [PATCH 2/2] changeset

---
 .changeset/gentle-jokes-call.md | 5 +++++
 .changeset/small-lamps-end.md   | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/gentle-jokes-call.md
 create mode 100644 .changeset/small-lamps-end.md

diff --git a/.changeset/gentle-jokes-call.md b/.changeset/gentle-jokes-call.md
new file mode 100644
index 0000000000..b03160a284
--- /dev/null
+++ b/.changeset/gentle-jokes-call.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: click the entire header to toggle layer editor and legend panel.
diff --git a/.changeset/small-lamps-end.md b/.changeset/small-lamps-end.md
new file mode 100644
index 0000000000..b03160a284
--- /dev/null
+++ b/.changeset/small-lamps-end.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: click the entire header to toggle layer editor and legend panel.