From a7c70646367ed9324e5c5405d33c82f6bfcfc3c2 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 9 Aug 2024 14:37:57 +0200
Subject: [PATCH] UX: improve rendering of disabled GPS button (esp. if not
 available)

---
 assets/svg/location-refused.svg        | 4 ++--
 src/UI/Base/MapControlButton.svelte    | 1 +
 src/UI/ThemeViewGUI.svelte             | 4 +++-
 src/assets/svg/Location_refused.svelte | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/assets/svg/location-refused.svg b/assets/svg/location-refused.svg
index 20d0f2f1e..2e3fceaca 100644
--- a/assets/svg/location-refused.svg
+++ b/assets/svg/location-refused.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
   <g id="surface1">
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/>
+    <path style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/>
     <path style="fill-rule:nonzero;fill:rgb(74.117649%,5.882353%,0%);fill-opacity:1;stroke-width:0.426333;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 3.18875 2.36425 C 2.9815 2.379 2.80175 2.51325 2.72825 2.70775 C 2.655 2.90225 2.7015 3.1215 2.84725 3.26975 L 19.9735 21.26175 C 20.10475 21.4 20.29975 21.45775 20.485 21.413 C 20.67025 21.3685 20.81775 21.22825 20.8715 21.0455 C 20.92525 20.8625 20.87725 20.665 20.74575 20.527 L 3.61975 2.53475 C 3.5095 2.41525 3.35075 2.35225 3.18875 2.36425 Z M 3.18875 2.36425 " transform="matrix(15.625,0,0,15.625,0,0)"/>
   </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/UI/Base/MapControlButton.svelte b/src/UI/Base/MapControlButton.svelte
index afd42306a..610d864be 100644
--- a/src/UI/Base/MapControlButton.svelte
+++ b/src/UI/Base/MapControlButton.svelte
@@ -27,6 +27,7 @@
   on:click={(e) => dispatch("click", e)}
   on:keydown
   use:ariaLabelStore={arialabelString}
+  disabled={!$enabled}
   class={twJoin(
     "pointer-events-auto relative h-fit w-fit rounded-full",
     cls,
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 27ab873d4..23a6ba53c 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -208,7 +208,8 @@
   let openBackgroundButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
   let addNewFeatureMode = state.userRelatedState.addNewFeatureMode
 
-  let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsAvailable.map(available => {
+  let gpsAvailable = state.geolocation.geolocationState.gpsAvailable
+  let gpsButtonAriaLabel = gpsAvailable.map(available => {
     if (!available) {
       return Translations.t.general.labels.locationNotAvailable
     }
@@ -433,6 +434,7 @@
         <If condition={featureSwitches.featureSwitchGeolocation}>
           <div class="relative m-0">
             <MapControlButton
+              enabled={gpsAvailable}
               arialabelDynamic={gpsButtonAriaLabel}
               on:click={() => state.geolocationControl.handleClick()}
               on:keydown={forwardEventToMap}
diff --git a/src/assets/svg/Location_refused.svelte b/src/assets/svg/Location_refused.svelte
index 5c6b0a28c..a3588889f 100644
--- a/src/assets/svg/Location_refused.svelte
+++ b/src/assets/svg/Location_refused.svelte
@@ -1,4 +1,4 @@
 <script>
 export let color = "#000000"
 </script>
- <svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">   <g id="surface1">     <path style=" stroke:none;fill-rule:nonzero;fill:{color};fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/>     <path style="fill-rule:nonzero;fill:rgb(74.117649%,5.882353%,0%);fill-opacity:1;stroke-width:0.426333;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 3.18875 2.36425 C 2.9815 2.379 2.80175 2.51325 2.72825 2.70775 C 2.655 2.90225 2.7015 3.1215 2.84725 3.26975 L 19.9735 21.26175 C 20.10475 21.4 20.29975 21.45775 20.485 21.413 C 20.67025 21.3685 20.81775 21.22825 20.8715 21.0455 C 20.92525 20.8625 20.87725 20.665 20.74575 20.527 L 3.61975 2.53475 C 3.5095 2.41525 3.35075 2.35225 3.18875 2.36425 Z M 3.18875 2.36425 " transform="matrix(15.625,0,0,15.625,0,0)"/>   </g> </svg>
\ No newline at end of file
+ <svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">   <g id="surface1">     <path style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/>     <path style="fill-rule:nonzero;fill:rgb(74.117649%,5.882353%,0%);fill-opacity:1;stroke-width:0.426333;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 3.18875 2.36425 C 2.9815 2.379 2.80175 2.51325 2.72825 2.70775 C 2.655 2.90225 2.7015 3.1215 2.84725 3.26975 L 19.9735 21.26175 C 20.10475 21.4 20.29975 21.45775 20.485 21.413 C 20.67025 21.3685 20.81775 21.22825 20.8715 21.0455 C 20.92525 20.8625 20.87725 20.665 20.74575 20.527 L 3.61975 2.53475 C 3.5095 2.41525 3.35075 2.35225 3.18875 2.36425 Z M 3.18875 2.36425 " transform="matrix(15.625,0,0,15.625,0,0)"/>   </g> </svg> 
\ No newline at end of file