elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: improve geolocation-indicators

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-10 12:44:23 +02:00
parent 8e98502960
commit f699905f4b
3 changed files with 46 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/UI/BigComponents/GeolocationControl.ts
View file

@ -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)

17
src/UI/BigComponents/GeolocationControl.svelte → src/UI/BigComponents/GeolocationIndicator.svelte
View file

@ -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}