From 381c997d82b6720cd246bb6d352f847c3aec219e Mon Sep 17 00:00:00 2001
From: Jin Igarashi <jin.igarashi@undp.org>
Date: Thu, 3 Oct 2024 16:23:36 +0100
Subject: [PATCH] Fix/4205 export control UI (#4207)

* fix: use undp design for the control

* fix: use FloatingPanel component for export control

* revert box-shadow

* changeset

* fix: adjusted padding

* Update StaticImageControl.svelte
---
 .changeset/real-mails-know.md                 |   5 +
 .../svelte-static-image-controls/package.json |   1 +
 .../src/lib/MaplibreStaticImageControl.svelte |  88 ++++----
 .../src/lib/StaticImageControl.svelte         | 202 +++++-------------
 pnpm-lock.yaml                                |   3 +
 5 files changed, 101 insertions(+), 198 deletions(-)
 create mode 100644 .changeset/real-mails-know.md

diff --git a/.changeset/real-mails-know.md b/.changeset/real-mails-know.md
new file mode 100644
index 000000000..d54b310f6
--- /dev/null
+++ b/.changeset/real-mails-know.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-geohub-static-image-controls": patch
+---
+
+fix: change UI design to use svelte undp design like components.
diff --git a/packages/svelte-static-image-controls/package.json b/packages/svelte-static-image-controls/package.json
index 13b60890f..3f7d2d34f 100644
--- a/packages/svelte-static-image-controls/package.json
+++ b/packages/svelte-static-image-controls/package.json
@@ -69,6 +69,7 @@
 		"@placemarkio/geo-viewport": "^1.0.2",
 		"@undp-data/svelte-copy-to-clipboard": "workspace:^",
 		"@undp-data/svelte-undp-components": "workspace:^",
+		"@undp-data/svelte-undp-design": "workspace:^",
 		"@undp-data/undp-bulma": "workspace:^",
 		"debounce": "^2.1.1",
 		"maplibre-gl": "^4.7.1"
diff --git a/packages/svelte-static-image-controls/src/lib/MaplibreStaticImageControl.svelte b/packages/svelte-static-image-controls/src/lib/MaplibreStaticImageControl.svelte
index 0d2f3d5f2..fd53afaa5 100644
--- a/packages/svelte-static-image-controls/src/lib/MaplibreStaticImageControl.svelte
+++ b/packages/svelte-static-image-controls/src/lib/MaplibreStaticImageControl.svelte
@@ -38,6 +38,7 @@
 
 <script lang="ts">
 	import { draggable, type DragOptions } from '@neodrag/svelte';
+	import { FloatingPanel } from '@undp-data/svelte-undp-components';
 	import StaticImageControl from './StaticImageControl.svelte';
 	import type { ControlOptions } from './interface/index.js';
 
@@ -160,48 +161,45 @@
 </div>
 
 <div
-	class="contents p-2 {show ? 'is-active' : ''}"
+	class="static-control {show ? 'is-active' : ''}"
 	bind:this={contentDiv}
 	use:draggable={dragOptions}
 >
-	<h2 class="header-title subtitle has-background-light p-2 mb-0">
-		<span class="icon">
-			<i class="fa-solid fa-print"></i>
-		</span>
-		<span>{title} </span>
-
-		<button
-			class="close-button delete"
-			on:click={() => {
-				show = false;
-			}}
-		/>
-	</h2>
-
-	<StaticImageControl
-		bind:map
-		bind:show
-		bind:style
-		bind:apiBase
-		bind:showAdvanced
-		bind:options
-		bind:hiddenApiTypes
-		on:change={handleUrlChanged}
-	/>
-
-	{#if apiUrl}
-		<div class="mt-2">
-			<button
-				class="button is-primary is-uppercase has-text-weight-bold is-fullwidth {isExporting
-					? 'is-loading'
-					: ''}"
-				disabled={isExporting}
-				on:click={handleExport}
-			>
-				Export
-			</button>
+	<FloatingPanel
+		{title}
+		showExpand={true}
+		showClose={true}
+		on:close={() => {
+			show = false;
+		}}
+	>
+		<div class="p-4">
+			<StaticImageControl
+				bind:map
+				bind:show
+				bind:style
+				bind:apiBase
+				bind:showAdvanced
+				bind:options
+				bind:hiddenApiTypes
+				on:change={handleUrlChanged}
+			/>
+
+			{#if apiUrl}
+				<div class="mt-3">
+					<button
+						class="button is-link is-uppercase has-text-weight-bold is-fullwidth {isExporting
+							? 'is-loading'
+							: ''}"
+						disabled={isExporting}
+						on:click={handleExport}
+					>
+						Export
+					</button>
+				</div>
+			{/if}
 		</div>
-	{/if}
+	</FloatingPanel>
 </div>
 
 <style lang="scss">
@@ -209,24 +207,14 @@
 		display: none;
 	}
 
-	.contents {
+	.static-control {
 		position: absolute;
 		top: 40px;
 		left: 10px;
 		background-color: white;
 		z-index: 11;
 		display: none;
-
-		.header-title {
-			position: relative;
-			cursor: grab;
-
-			.close-button {
-				position: absolute;
-				top: 10px;
-				right: 10px;
-			}
-		}
+		min-width: 342px;
 	}
 
 	.is-active {
diff --git a/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte b/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte
index 4eace251e..7e779235d 100644
--- a/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte
+++ b/packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
 	import { bounds } from '@placemarkio/geo-viewport';
-	import { FieldControl, Notification, SegmentButtons } from '@undp-data/svelte-undp-components';
+	import {
+		FieldControl,
+		Notification,
+		SegmentButtons,
+		Tabs,
+		type Tab
+	} from '@undp-data/svelte-undp-components';
+	import { Switch } from '@undp-data/svelte-undp-design';
 	import debounce from 'debounce';
 	import type { Map } from 'maplibre-gl';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { PageSizes, supportedExtensions } from './constants/index.js';
 	import { PageOrientations } from './constants/pageOrientations.js';
-	import { handleEnterKey, mm2pixel } from './helpers/index.js';
+	import { mm2pixel } from './helpers/index.js';
 	import type { ControlOptions } from './interface/ControlOptions.ts';
 
 	const dispatch = createEventDispatcher();
@@ -73,6 +80,23 @@
 
 	let apiUrl: string;
 
+	let tabs: Tab[] = [
+		{
+			id: 'center',
+			label: 'center'
+		},
+		{
+			id: 'bbox',
+			label: 'bounding box'
+		},
+		{
+			id: 'auto',
+			label: 'auto'
+		}
+	];
+
+	let activeTab = tabs[0].id as 'center' | 'bbox' | 'auto';
+
 	onMount(() => {
 		options = Object.assign(defaultOptions, options);
 
@@ -218,12 +242,7 @@
 </script>
 
 <div class="export-contents">
-	<FieldControl
-		title="page size"
-		showHelp={false}
-		isFirstCharCapitalized={true}
-		fontWeight="semibold"
-	>
+	<FieldControl title="page size" showHelp={false} isFirstCharCapitalized={true}>
 		<div slot="control" class="control has-icons-left">
 			<div class="select is-fullwidth">
 				<select bind:value={selectedPageName}>
@@ -244,12 +263,7 @@
 		{@const orientationButtons = PageOrientations.map((o) => {
 			return { title: o, value: o };
 		})}
-		<FieldControl
-			title="Orientation"
-			showHelp={false}
-			isFirstCharCapitalized={true}
-			fontWeight="semibold"
-		>
+		<FieldControl title="Orientation" showHelp={false} isFirstCharCapitalized={true}>
 			<div slot="control">
 				<SegmentButtons
 					size="small"
@@ -264,12 +278,7 @@
 
 	{#if selectedPageName === 'custom'}
 		<div class="is-flex">
-			<FieldControl
-				title="Width"
-				showHelp={false}
-				isFirstCharCapitalized={true}
-				fontWeight="semibold"
-			>
+			<FieldControl title="Width" showHelp={false} isFirstCharCapitalized={true}>
 				<div slot="control" class="mr-2">
 					<div class="control is-flex is-align-items-center">
 						<input
@@ -284,12 +293,7 @@
 				</div>
 			</FieldControl>
 
-			<FieldControl
-				title="Height"
-				showHelp={false}
-				isFirstCharCapitalized={true}
-				fontWeight="semibold"
-			>
+			<FieldControl title="Height" showHelp={false} isFirstCharCapitalized={true}>
 				<div slot="control">
 					<div class="control is-flex is-align-items-center">
 						<input
@@ -306,17 +310,11 @@
 		</div>
 	{/if}
 
-	<FieldControl
-		title="High resolution"
-		showHelp={false}
-		isFirstCharCapitalized={true}
-		fontWeight="semibold"
-	>
+	<FieldControl title="High resolution" showHelp={false} isFirstCharCapitalized={true}>
 		<div slot="control">
 			<SegmentButtons
 				size="small"
 				capitalized={true}
-				fontWeight="semibold"
 				buttons={[
 					{ title: '@1x', value: 1 },
 					{ title: '@2x', value: 2 },
@@ -329,36 +327,19 @@
 		</div>
 	</FieldControl>
 
-	<span class="is-flex">
+	<span class="is-flex my-2">
 		<span class="is-size-6 has-text-weight-bold mr-2 my-auto">Advanced settings</span>
-		<div class="buttons has-addons" style="margin-left: auto;">
-			<button
-				class="button is-small px-2 {showAdvanced ? 'is-success is-selected' : ''}"
-				on:click={() => {
-					showAdvanced = !showAdvanced;
-				}}>Show</button
-			>
-			<button
-				class="button is-small px-2 {!showAdvanced ? 'is-danger is-selected' : ''}"
-				on:click={() => {
-					showAdvanced = !showAdvanced;
-				}}>Hide</button
-			>
+		<div class="ml-auto pr-1">
+			<Switch bind:toggled={showAdvanced} />
 		</div>
 	</span>
 
 	{#if showAdvanced}
-		<FieldControl
-			title="File extension"
-			showHelp={false}
-			isFirstCharCapitalized={true}
-			fontWeight="semibold"
-		>
+		<FieldControl title="File extension" showHelp={false} isFirstCharCapitalized={true}>
 			<div slot="control">
 				<SegmentButtons
 					size="small"
 					uppercase={true}
-					fontWeight="semibold"
 					buttons={supportedExtensions.map((e) => {
 						return { title: e, value: e };
 					})}
@@ -368,64 +349,25 @@
 			</div>
 		</FieldControl>
 		{#if !hiddenApiTypes}
-			<div
-				class="tabs is-toggle is-small is-toggle-rounded is-fullwidth mt-1 mb-2 is-capitalized has-text-weight-semibold"
-			>
-				<ul>
-					<li class={options.defaultApi === 'center' ? 'is-active' : ''}>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<!-- svelte-ignore a11y-interactive-supports-focus -->
-						<a
-							role="tab"
-							on:click={() => handleActiveTabChanged('center')}
-							on:keydown={handleEnterKey}
-							data-sveltekit-preload-data="off"
-							data-sveltekit-preload-code="off">center</a
-						>
-					</li>
-					<li class={options.defaultApi === 'bbox' ? 'is-active' : ''}>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<!-- svelte-ignore a11y-interactive-supports-focus -->
-						<a
-							role="tab"
-							on:click={() => handleActiveTabChanged('bbox')}
-							on:keydown={handleEnterKey}
-							data-sveltekit-preload-data="off"
-							data-sveltekit-preload-code="off">bounding box</a
-						>
-					</li>
-					<li class={options.defaultApi === 'auto' ? 'is-active' : ''}>
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<!-- svelte-ignore a11y-interactive-supports-focus -->
-						<a
-							role="tab"
-							on:click={() => handleActiveTabChanged('auto')}
-							on:keydown={handleEnterKey}
-							data-sveltekit-preload-data="off"
-							data-sveltekit-preload-code="off">auto</a
-						>
-					</li>
-				</ul>
-			</div>
+			<Tabs
+				size="is-small"
+				isBoxed={false}
+				isFullwidth={false}
+				bind:tabs
+				bind:activeTab
+				on:tabChange={() => handleActiveTabChanged(activeTab)}
+				isUppercase={true}
+				fontWeight="semibold"
+			/>
 
 			<div class="p-1" hidden={options.defaultApi !== 'center'}>
 				<div class="is-flex">
-					<FieldControl
-						title="longitude"
-						showHelp={false}
-						isFirstCharCapitalized={true}
-						fontWeight="semibold"
-					>
+					<FieldControl title="longitude" showHelp={false} isFirstCharCapitalized={true}>
 						<div slot="control">
 							<input class="input is-small" type="number" bind:value={options.longitude} readonly />
 						</div>
 					</FieldControl>
-					<FieldControl
-						title="latitude"
-						showHelp={false}
-						isFirstCharCapitalized={true}
-						fontWeight="semibold"
-					>
+					<FieldControl title="latitude" showHelp={false} isFirstCharCapitalized={true}>
 						<div slot="control">
 							<input class="input is-small" type="number" bind:value={options.latitude} readonly />
 						</div>
@@ -433,32 +375,17 @@
 				</div>
 
 				<div class="is-flex">
-					<FieldControl
-						title="zoom level"
-						showHelp={false}
-						isFirstCharCapitalized={true}
-						fontWeight="semibold"
-					>
+					<FieldControl title="zoom level" showHelp={false} isFirstCharCapitalized={true}>
 						<div slot="control">
 							<input class="input is-small" type="number" bind:value={options.zoom} readonly />
 						</div>
 					</FieldControl>
-					<FieldControl
-						title="bearing"
-						showHelp={false}
-						isFirstCharCapitalized={true}
-						fontWeight="semibold"
-					>
+					<FieldControl title="bearing" showHelp={false} isFirstCharCapitalized={true}>
 						<div slot="control">
 							<input class="input is-small" type="number" bind:value={options.bearing} readonly />
 						</div>
 					</FieldControl>
-					<FieldControl
-						title="pitch"
-						showHelp={false}
-						isFirstCharCapitalized={true}
-						fontWeight="semibold"
-					>
+					<FieldControl title="pitch" showHelp={false} isFirstCharCapitalized={true}>
 						<div slot="control">
 							<input class="input is-small" type="number" bind:value={options.pitch} readonly />
 						</div>
@@ -471,23 +398,13 @@
 					{@const bbox = options.bbox}
 
 					<div class="is-flex">
-						<FieldControl
-							title="min longitude"
-							showHelp={false}
-							isFirstCharCapitalized={true}
-							fontWeight="semibold"
-						>
+						<FieldControl title="min longitude" showHelp={false} isFirstCharCapitalized={true}>
 							<div slot="control">
 								<input class="input is-small" type="number" value={bbox[0]} readonly />
 							</div>
 						</FieldControl>
 
-						<FieldControl
-							title="max longitude"
-							showHelp={false}
-							isFirstCharCapitalized={true}
-							fontWeight="semibold"
-						>
+						<FieldControl title="max longitude" showHelp={false} isFirstCharCapitalized={true}>
 							<div slot="control">
 								<input class="input is-small" type="number" value={bbox[2]} readonly />
 							</div>
@@ -495,23 +412,13 @@
 					</div>
 
 					<div class="is-flex">
-						<FieldControl
-							title="min latitude"
-							showHelp={false}
-							isFirstCharCapitalized={true}
-							fontWeight="semibold"
-						>
+						<FieldControl title="min latitude" showHelp={false} isFirstCharCapitalized={true}>
 							<div slot="control">
 								<input class="input is-small" type="number" value={bbox[1]} readonly />
 							</div>
 						</FieldControl>
 
-						<FieldControl
-							title="max latitude"
-							showHelp={false}
-							isFirstCharCapitalized={true}
-							fontWeight="semibold"
-						>
+						<FieldControl title="max latitude" showHelp={false} isFirstCharCapitalized={true}>
 							<div slot="control">
 								<input class="input is-small" type="number" value={bbox[3]} readonly />
 							</div>
@@ -539,7 +446,6 @@
 
 <style lang="scss">
 	.export-contents {
-		width: 300px;
 		height: fit-content;
 		overflow: hidden;
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51876969f..e5d0435ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -478,6 +478,9 @@ importers:
       '@undp-data/svelte-undp-components':
         specifier: workspace:^
         version: link:../svelte-undp-components
+      '@undp-data/svelte-undp-design':
+        specifier: workspace:^
+        version: link:../svelte-undp-design
       '@undp-data/undp-bulma':
         specifier: workspace:^
         version: link:../undp-bulma