From 0331fab6d78f6deab8082950c58c6b66bee59b09 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Tue, 9 Jan 2024 11:35:04 +0000
Subject: [PATCH 1/2] fix: change hovering color to light gray for layer list.
 Moved padding to inside accordion

---
 .changeset/lemon-spoons-cough.md              |  5 +++
 .../src/components/pages/map/Content.svelte   |  2 +-
 .../pages/map/layers/LayerList.svelte         |  2 +-
 .../map/layers/raster/RasterLayer.svelte      | 32 +++++++++----------
 .../layers/raster/RasterSimpleLayer.svelte    |  2 +-
 .../map/layers/vector/VectorLayer.svelte      | 18 +++++------
 .../layers/vector/VectorSimpleLayer.svelte    |  8 +----
 .../map/plugins/MaplibreLegendControl.svelte  |  2 +-
 .../src/components/util/Accordion.svelte      | 25 +++++++++------
 .../src/components/util/FloatingPanel.svelte  |  2 +-
 10 files changed, 49 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/lemon-spoons-cough.md

diff --git a/.changeset/lemon-spoons-cough.md b/.changeset/lemon-spoons-cough.md
new file mode 100644
index 0000000000..60d0d6201e
--- /dev/null
+++ b/.changeset/lemon-spoons-cough.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: change hovering color to light gray for layer list. Moved padding to inside accordion
diff --git a/sites/geohub/src/components/pages/map/Content.svelte b/sites/geohub/src/components/pages/map/Content.svelte
index 77154a522c..cbbb4505ad 100644
--- a/sites/geohub/src/components/pages/map/Content.svelte
+++ b/sites/geohub/src/components/pages/map/Content.svelte
@@ -84,7 +84,7 @@
 	<div hidden={activeTab !== TabNames.DATA} class="mx-4">
 		<DataView bind:contentHeight />
 	</div>
-	<div hidden={activeTab !== TabNames.LAYERS} class="mx-4">
+	<div hidden={activeTab !== TabNames.LAYERS}>
 		<LayerList bind:contentHeight bind:activeTab />
 	</div>
 {/if}
diff --git a/sites/geohub/src/components/pages/map/layers/LayerList.svelte b/sites/geohub/src/components/pages/map/layers/LayerList.svelte
index b299a2a807..f9767839c2 100644
--- a/sites/geohub/src/components/pages/map/layers/LayerList.svelte
+++ b/sites/geohub/src/components/pages/map/layers/LayerList.svelte
@@ -120,7 +120,7 @@
 
 {#if $layerListStore?.length > 0}
 	<div
-		class="is-flex is-align-items-center layer-header pt-2"
+		class="is-flex is-align-items-center layer-header pt-2 px-4"
 		bind:clientHeight={layerHeaderHeight}
 	>
 		<div class="layer-header-buttons buttons mb-0">
diff --git a/sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte b/sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte
index 6a1b733545..e4ea571b96 100644
--- a/sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte
+++ b/sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import RasterLegend from '$components/maplibre/raster/RasterLegend.svelte';
+	import RasterHistogram from '$components/pages/map/layers/raster/RasterHistogram.svelte';
 	import RasterTransform from '$components/pages/map/layers/raster/RasterTransform.svelte';
 	import Tabs from '$components/util/Tabs.svelte';
 	import { TabNames } from '$lib/config/AppConfig';
@@ -19,7 +20,6 @@
 		type LayerListStore
 	} from '$stores';
 	import { getContext, setContext } from 'svelte';
-	import RasterHistogram from '$components/pages/map/layers/raster/RasterHistogram.svelte';
 
 	export let layer: Layer;
 
@@ -83,20 +83,18 @@
 
 <Tabs bind:tabs bind:activeTab on:tabChange={(e) => (activeTab = e.detail)} size="is-small" />
 
-<div class="panel-content px-2 pb-2">
-	<div hidden={activeTab !== TabNames.STYLE}>
-		<RasterLegend
-			bind:layerId={layer.id}
-			bind:metadata={layer.info}
-			bind:tags={layer.dataset.properties.tags}
-		/>
-	</div>
-	<div hidden={activeTab !== TabNames.HISTOGRAM}>
-		<RasterHistogram bind:metadata={layer.info} />
-	</div>
-	{#if !isRgbTile}
-		<div hidden={activeTab !== TabNames.TRANSFORM}>
-			<RasterTransform bind:layer />
-		</div>
-	{/if}
+<div hidden={activeTab !== TabNames.STYLE}>
+	<RasterLegend
+		bind:layerId={layer.id}
+		bind:metadata={layer.info}
+		bind:tags={layer.dataset.properties.tags}
+	/>
+</div>
+<div hidden={activeTab !== TabNames.HISTOGRAM}>
+	<RasterHistogram bind:metadata={layer.info} />
 </div>
+{#if !isRgbTile}
+	<div hidden={activeTab !== TabNames.TRANSFORM}>
+		<RasterTransform bind:layer />
+	</div>
+{/if}
diff --git a/sites/geohub/src/components/pages/map/layers/raster/RasterSimpleLayer.svelte b/sites/geohub/src/components/pages/map/layers/raster/RasterSimpleLayer.svelte
index f2079bb4f3..e0b55294bf 100644
--- a/sites/geohub/src/components/pages/map/layers/raster/RasterSimpleLayer.svelte
+++ b/sites/geohub/src/components/pages/map/layers/raster/RasterSimpleLayer.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <LayerTemplate {layer} bind:isExpanded on:toggled={handleToggleChanged} bind:showEditButton>
-	<div class="panel-content px-2 pb-2" slot="content">
+	<div slot="content">
 		<RasterLegend
 			bind:layerId={layer.id}
 			bind:metadata={layer.info}
diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte
index df320d6cde..7718a86ace 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte
@@ -126,14 +126,12 @@
 
 <Tabs bind:tabs bind:activeTab on:tabChange={(e) => (activeTab = e.detail)} />
 
-<div class="panel-content px-2 pb-2">
-	<div hidden={activeTab !== TabNames.STYLE}>
-		<VectorLegend bind:layerId={layer.id} bind:metadata bind:tags={layer.dataset.properties.tags} />
-	</div>
-	<div hidden={activeTab !== TabNames.FILTER}>
-		<VectorFilter {layer} />
-	</div>
-	<div hidden={activeTab !== TabNames.LABEL}>
-		<VectorLabelPanel {layer} bind:metadata />
-	</div>
+<div hidden={activeTab !== TabNames.STYLE}>
+	<VectorLegend bind:layerId={layer.id} bind:metadata bind:tags={layer.dataset.properties.tags} />
+</div>
+<div hidden={activeTab !== TabNames.FILTER}>
+	<VectorFilter {layer} />
+</div>
+<div hidden={activeTab !== TabNames.LABEL}>
+	<VectorLabelPanel {layer} bind:metadata />
 </div>
diff --git a/sites/geohub/src/components/pages/map/layers/vector/VectorSimpleLayer.svelte b/sites/geohub/src/components/pages/map/layers/vector/VectorSimpleLayer.svelte
index 0769420bba..dbcb2603e2 100644
--- a/sites/geohub/src/components/pages/map/layers/vector/VectorSimpleLayer.svelte
+++ b/sites/geohub/src/components/pages/map/layers/vector/VectorSimpleLayer.svelte
@@ -19,13 +19,7 @@
 
 <LayerTemplate {layer} bind:isExpanded on:toggled={handleToggleChanged} bind:showEditButton>
 	<div slot="content">
-		<div class="panel-content px-2 pb-2">
-			<VectorLegend
-				bind:layerId={layer.id}
-				bind:metadata
-				bind:tags={layer.dataset.properties.tags}
-			/>
-		</div>
+		<VectorLegend bind:layerId={layer.id} bind:metadata bind:tags={layer.dataset.properties.tags} />
 	</div>
 </LayerTemplate>
 
diff --git a/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte b/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
index 66aceb9200..9fa5640c15 100644
--- a/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
+++ b/sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
@@ -217,7 +217,7 @@
 			</div>
 		</div>
 
-		<div class="legend-contents p-2">
+		<div class="legend-contents py-2">
 			{#if $layerList?.length > 0}
 				{#each $layerList as layer (layer.id)}
 					{@const type = getLayerStyle(map, layer.id)?.type}
diff --git a/sites/geohub/src/components/util/Accordion.svelte b/sites/geohub/src/components/util/Accordion.svelte
index d75d425a64..3403268c7d 100644
--- a/sites/geohub/src/components/util/Accordion.svelte
+++ b/sites/geohub/src/components/util/Accordion.svelte
@@ -22,10 +22,12 @@
 </script>
 
 <div
-	class="accordion p-1 {`${
+	class="accordion px-4 {`${
 		showHoveredColor
 			? `${
-					isSelected ? 'has-background-danger-light' : `${isHovered ? 'border-primary' : 'border'}`
+					isSelected
+						? 'has-background-danger-light border-transparent'
+						: `${isHovered ? 'has-background-white-ter border-transparent' : 'border'}`
 				}`
 			: 'border'
 	}`}"
@@ -101,16 +103,19 @@
 		}
 
 		&.border {
-			border-right: 1px rgba(255, 255, 255, 0) solid;
-			border-left: 1px rgba(255, 255, 255, 0) solid;
-			border-bottom: 1px rgba(255, 255, 255, 0) solid;
+			// border-right: 1px rgba(255, 255, 255, 0) solid;
+			// border-left: 1px rgba(255, 255, 255, 0) solid;
+			// border-bottom: 1px rgba(255, 255, 255, 0) solid;
 			border-bottom: 1px #d4d6d8 solid;
 		}
-		&.border-primary {
-			border-right: 1px $primary solid;
-			border-left: 1px $primary solid;
-			border-bottom: 1px $primary solid;
-			border-top: 1px $primary solid;
+		&.border-transparent {
+			border-bottom: 1px rgba(255, 255, 255, 0) solid;
 		}
+		// &.border-primary {
+		// 	border-right: 1px $primary solid;
+		// 	border-left: 1px $primary solid;
+		// 	border-bottom: 1px $primary solid;
+		// 	border-top: 1px $primary solid;
+		// }
 	}
 </style>
diff --git a/sites/geohub/src/components/util/FloatingPanel.svelte b/sites/geohub/src/components/util/FloatingPanel.svelte
index 6bfbccc953..5184ca921c 100644
--- a/sites/geohub/src/components/util/FloatingPanel.svelte
+++ b/sites/geohub/src/components/util/FloatingPanel.svelte
@@ -43,7 +43,7 @@
 			</button>
 		</div>
 	</div>
-	<div class="contents px-2 pb-2" hidden={!isExpanded}>
+	<div class="contents pb-2" hidden={!isExpanded}>
 		<slot />
 	</div>
 </div>

From 38e8bc0a4517bf03b14e1ab3205f0114a24aeb53 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Tue, 9 Jan 2024 11:42:06 +0000
Subject: [PATCH 2/2] fix: fixed colormap picker button layout

---
 .../maplibre/raster/RasterClassifyLegend.svelte           | 6 +++---
 sites/geohub/src/components/util/ColorMapPicker.svelte    | 8 ++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/sites/geohub/src/components/maplibre/raster/RasterClassifyLegend.svelte b/sites/geohub/src/components/maplibre/raster/RasterClassifyLegend.svelte
index 5ffa9f094e..3fc20a4e34 100644
--- a/sites/geohub/src/components/maplibre/raster/RasterClassifyLegend.svelte
+++ b/sites/geohub/src/components/maplibre/raster/RasterClassifyLegend.svelte
@@ -287,8 +287,8 @@
 	</div>
 
 	{#if !layerHasUniqueValues}
-		<div class="columns">
-			<div class="column is-7 pr-1">
+		<div class="columns mb-0">
+			<div class="column is-7 pr-1 py-0">
 				<FieldControl title="Method">
 					<div slot="help">
 						Whether to apply a classification method for a vector layer in selected property. This
@@ -299,7 +299,7 @@
 					</div>
 				</FieldControl>
 			</div>
-			<div class="column pl-1">
+			<div class="column pl-1 py-0">
 				<FieldControl title="Classes">
 					<div slot="help">Increase of decrease the number of classes.</div>
 					<div slot="control">
diff --git a/sites/geohub/src/components/util/ColorMapPicker.svelte b/sites/geohub/src/components/util/ColorMapPicker.svelte
index 218de2f7dd..5b5d1a41d0 100644
--- a/sites/geohub/src/components/util/ColorMapPicker.svelte
+++ b/sites/geohub/src/components/util/ColorMapPicker.svelte
@@ -69,16 +69,12 @@
 
 	let colorMapStyle = '';
 	const getColorMapStyle = () => {
-		let width = buttonWidth;
-		if (!isFullWidth) {
-			width = 40;
-		}
 		const isReverse = colorMapName.indexOf('_r') !== -1;
 		let colorMap = chroma.scale(colorMapName.replace('_r', '')).mode('lrgb').colors(5, 'rgba');
 		if (isReverse) {
 			colorMap = colorMap.reverse();
 		}
-		colorMapStyle = `height: 40px; width:${width}px; background: linear-gradient(90deg, ${colorMap});`;
+		colorMapStyle = `height: 40px; width:100%; background: linear-gradient(90deg, ${colorMap});`;
 	};
 	$: colorMapName, getColorMapStyle();
 	$: buttonWidth, getColorMapStyle();
@@ -101,7 +97,7 @@
 	use:tippy={{ content: tooltipContent }}
 >
 	{#key isReverseColors}
-		<figure class="image" style={colorMapStyle} data-testid="color-map-figure" />
+		<div style={colorMapStyle} data-testid="color-map-figure" />
 	{/key}
 	<button class="button is-small">
 		<span class="icon is-small">