UX: translate 'creating point', indicate that a new background layer is loading in the selectBackgroundButton

This commit is contained in:
Pieter Vander Vennet 2024-03-12 03:40:55 +01:00
parent dcc4a98344
commit 7210b3ff5d
8 changed files with 41 additions and 10 deletions

View file

@ -1,15 +1,19 @@
<script lang="ts">
/**
* A mapcontrol button which allows the user to select a different background.
* Even though the component is very small, it gets it's own class as it is often reused
* Even though the component is very small, it gets its own class as it is often reused
*/
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import Translations from "../i18n/Translations"
import MapControlButton from "../Base/MapControlButton.svelte"
import Tr from "../Base/Tr.svelte"
import StyleLoadingIndicator from "../Map/StyleLoadingIndicator.svelte"
import { UIEventSource } from "../../Logic/UIEventSource"
import { Map as MlMap } from "maplibre-gl"
import ThemeViewState from "../../Models/ThemeViewState"
export let state: SpecialVisualizationState
export let state: ThemeViewState
export let hideTooltip = false
</script>
@ -17,7 +21,10 @@
arialabel={Translations.t.general.labels.background}
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="h-6 w-6" />
<StyleLoadingIndicator map={state.map} rasterLayer={state.mapProperties.rasterLayer} >
<Square3Stack3dIcon class="h-6 w-6" />
</StyleLoadingIndicator>
{#if !hideTooltip}
<Tr cls="mx-2" t={Translations.t.general.backgroundSwitch} />
{/if}