From a7f9e082e4f0680029345064dc2b04a78c43963c Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Fri, 12 Jul 2024 12:19:03 +0200
Subject: [PATCH] fix double-click in checkbox and select inputs

---
 .../layer-control/LayerControlSettings.svelte | 36 ++++++++++---------
 .../lib/components/toolbar/tools/Clean.svelte | 20 ++++++-----
 .../lib/components/toolbar/tools/Time.svelte  | 10 +++---
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/website/src/lib/components/layer-control/LayerControlSettings.svelte b/website/src/lib/components/layer-control/LayerControlSettings.svelte
index 3290e73a..99f02c36 100644
--- a/website/src/lib/components/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/layer-control/LayerControlSettings.svelte
@@ -116,8 +116,8 @@
 			<Sheet.Description>
 				{$_('layers.settings_help')}
 			</Sheet.Description>
-			<Accordion.Root class="flex flex-col overflow-hidden">
-				<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
+			<Accordion.Root class="flex flex-col overflow-hidden" value="layer-selection">
+				<Accordion.Item value="layer-selection" class="flex flex-col overflow-hidden">
 					<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
 					<Accordion.Content class="grow flex flex-col border rounded">
 						<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
@@ -139,11 +139,13 @@
 						</ScrollArea>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-2">
+				<Accordion.Item value="overlay-opacity">
 					<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
 					<Accordion.Content class="flex flex-col gap-3 overflow-visible">
-						<Label class="flex flex-row gap-2 items-center">
-							{$_('layers.custom_layers.overlay')}
+						<div class="flex flex-row gap-6 items-center">
+							<Label>
+								{$_('layers.custom_layers.overlay')}
+							</Label>
 							<Select.Root bind:selected={$selectedOverlay}>
 								<Select.Trigger class="h-8 mr-1">
 									<Select.Value />
@@ -161,8 +163,8 @@
 									{/each}
 								</Select.Content>
 							</Select.Root>
-						</Label>
-						<Label class="flex flex-row gap-2 items-center">
+						</div>
+						<Label class="flex flex-row gap-6 items-center">
 							{$_('menu.style.opacity')}
 							<div class="p-2 pr-3 grow">
 								<Slider
@@ -187,7 +189,7 @@
 						</Label>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-3">
+				<Accordion.Item value="custom-layers">
 					<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
 					<Accordion.Content>
 						<ScrollArea>
@@ -195,11 +197,17 @@
 						</ScrollArea>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-4">
+				<Accordion.Item value="pois" class="hidden">
+					<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
+					<Accordion.Content></Accordion.Content>
+				</Accordion.Item>
+				<Accordion.Item value="heatmap-color" class="hidden">
 					<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
 					<Accordion.Content class="overflow-visible">
-						<Label class="flex flex-row items-center justify-between gap-4"
-							>{$_('menu.style.color')}
+						<div class="flex flex-row items-center justify-between gap-6">
+							<Label>
+								{$_('menu.style.color')}
+							</Label>
 							<Select.Root bind:selected={$selectedHeatmapColor}>
 								<Select.Trigger class="h-8 mr-1">
 									<Select.Value />
@@ -210,13 +218,9 @@
 									{/each}
 								</Select.Content>
 							</Select.Root>
-						</Label>
+						</div>
 					</Accordion.Content>
 				</Accordion.Item>
-				<Accordion.Item value="item-5">
-					<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
-					<Accordion.Content></Accordion.Content>
-				</Accordion.Item>
 			</Accordion.Root>
 		</Sheet.Header>
 	</Sheet.Content>
diff --git a/website/src/lib/components/toolbar/tools/Clean.svelte b/website/src/lib/components/toolbar/tools/Clean.svelte
index 386224a7..21e22186 100644
--- a/website/src/lib/components/toolbar/tools/Clean.svelte
+++ b/website/src/lib/components/toolbar/tools/Clean.svelte
@@ -129,14 +129,18 @@
 
 <div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
 	<fieldset class="flex flex-col gap-3">
-		<Label class="flex flex-row items-center gap-[6.4px] h-3">
-			<Checkbox bind:checked={deleteTrackpoints} class="scale-90" />
-			{$_('toolbar.clean.delete_trackpoints')}
-		</Label>
-		<Label class="flex flex-row items-center gap-[6.4px] h-3">
-			<Checkbox bind:checked={deleteWaypoints} class="scale-90" />
-			{$_('toolbar.clean.delete_waypoints')}
-		</Label>
+		<div class="flex flex-row items-center gap-[6.4px] h-3">
+			<Checkbox id="delete-trkpt" bind:checked={deleteTrackpoints} class="scale-90" />
+			<Label for="delete-trkpt">
+				{$_('toolbar.clean.delete_trackpoints')}
+			</Label>
+		</div>
+		<div class="flex flex-row items-center gap-[6.4px] h-3">
+			<Checkbox id="delete-wpt" bind:checked={deleteWaypoints} class="scale-90" />
+			<Label for="delete-wpt">
+				{$_('toolbar.clean.delete_waypoints')}
+			</Label>
+		</div>
 		<RadioGroup.Root bind:value={cleanType}>
 			<Label class="flex flex-row items-center gap-2">
 				<RadioGroup.Item value={CleanType.INSIDE} />
diff --git a/website/src/lib/components/toolbar/tools/Time.svelte b/website/src/lib/components/toolbar/tools/Time.svelte
index 3becdda8..04a294d8 100644
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -270,10 +270,12 @@
 			/>
 		</div>
 		{#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
-			<Label class="mt-0.5 flex flex-row gap-1 items-center">
-				<Checkbox disabled={!canUpdate} />
-				{$_('toolbar.time.artificial')}
-			</Label>
+			<div class="mt-0.5 flex flex-row gap-1 items-center hidden">
+				<Checkbox id="artificial-time" disabled={!canUpdate} />
+				<Label for="artificial-time">
+					{$_('toolbar.time.artificial')}
+				</Label>
+			</div>
 		{/if}
 	</fieldset>
 	<div class="flex flex-row gap-2">