UX: improve geolocation-indicators

src/Logic/State/GeoLocationState.ts

@@ -1,6 +1,8 @@
 import { Store, UIEventSource } from "../UIEventSource"
 import { LocalStorageSource } from "../Web/LocalStorageSource"
 import { QueryParameters } from "../Web/QueryParameters"
+import { Translation } from "../../UI/i18n/Translation"
+import Translations from "../../UI/i18n/Translations"
 
 export type GeolocationPermissionState = "prompt" | "requested" | "granted" | "denied"
 
@@ -62,7 +64,11 @@ export class GeoLocationState {
      */
     private readonly _grantedThisSession: UIEventSource<boolean> = new UIEventSource<boolean>(false)
 
-    constructor() {
+    /**
+     * A human explanation of the current gps state, to be shown on the home screen or as tooltip
+     */
+    public readonly gpsStateExplanation  : Store<Translation>
+     constructor() {
         const self = this
 
         this.permission.addCallbackAndRunD(async (state) => {
@@ -96,7 +102,34 @@ export class GeoLocationState {
             }
             this.requestPermission()
         }
-    }
+
+
+        this.gpsStateExplanation = this.gpsAvailable.map(available => {
+            if (!available) {
+                return Translations.t.general.labels.locationNotAvailable
+            }
+            if (this.permission.data === "denied") {
+                return Translations.t.general.geopermissionDenied
+            }
+            if (this.permission.data === "prompt") {
+                return Translations.t.general.labels.jumpToLocation
+            }
+            if (this.permission.data === "requested") {
+                return Translations.t.general.waitingForGeopermission
+            }
+
+
+            if (!this.allowMoving.data) {
+                return Translations.t.general.visualFeedback.islocked
+            }
+
+            if (this.currentGPSLocation.data !== undefined) {
+                return Translations.t.general.labels.jumpToLocation
+            }
+            return Translations.t.general.waitingForLocation
+        }, [this.allowMoving, this.permission])
+
+     }
 
     /**
      * Requests the user to allow access to their position.

src/UI/BigComponents/GeolocationControl.ts

@@ -4,8 +4,8 @@ import Constants from "../../Models/Constants"
 import { MapProperties } from "../../Models/MapProperties"
 
 /**
- * Displays an icon depending on the state of the geolocation.
- * Will set the 'lock' if clicked twice
+ * Does the user interaction state with a geolocation button, such as keeping track of the last click,
+ * and lock status + moving the map when clicked
  */
 export class GeolocationControlState {
     public readonly lastClick = new UIEventSource<Date>(undefined)

src/UI/BigComponents/GeolocationIndicator.svelte

@@ -16,24 +16,25 @@
   let geolocationControlState = state.geolocationControl
   let isAvailable = state.geolocation.geolocationState.gpsAvailable
   let lastClickWasRecent = geolocationControlState.lastClickWithinThreeSecs
+  export let clss = "h-8 w-8 shrink-0"
 </script>
 
 {#if !$allowMoving}
-  <Location_locked class="h-8 w-8" />
+  <Location_locked class={clss} />
 {:else if $currentGPSLocation !== undefined}
   <!-- If we have a location; this implies that the location access was granted -->
   {#if $lastClickWasRecent}
-    <Location_unlocked class="h-8 w-8" />
+    <Location_unlocked class={clss} />
   {:else}
-    <Location class="h-8 w-8" />
+    <Location class={clss} />
   {/if}
+{:else if $geopermission === "denied" || !$isAvailable}
+  <Location_refused class={clss} />
 {:else if $geopermission === "prompt"}
-  <Location class="h-8 w-8" />
+  <Location class={clss} />
 {:else if $geopermission === "requested"}
   <!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
-  <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
-{:else if $geopermission === "denied" || !$isAvailable}
-  <Location_refused class="h-8 w-8" />
+  <Location class={clss} style="animation: 3s linear 0s infinite normal none running spin;" />
 {:else}
-  <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
+  <Location class={clss} style="animation: 3s linear 0s infinite normal none running spin;" />
 {/if}