Usertests: explicitly mark the 'switch layers' button in special interactions, see #1316

UI/BigComponents/OpenBackgroundSelectorButton.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
-  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
+  /**
-  import MapControlButton from "../Base/MapControlButton.svelte"
+   * A mapcontrol button which allows the user to select a different background.
-  import ThemeViewState from "../../Models/ThemeViewState"
+   * Even though the componenet is very small, it gets it's 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";
 
-  export let state: ThemeViewState
+  export let state: SpecialVisualizationState
+  export let hideTooltip = false
 </script>
 
-<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
+<MapControlButton
-  <Square3Stack3dIcon class="h-6 w-6" />
+        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+>
+  <Square3Stack3dIcon class="h-6 w-6"/>
+  {#if !hideTooltip}
+    <Tr cls="mx-2" t={Translations.t.general.backgroundSwitch}/>
+  {/if}
 </MapControlButton>

UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -31,8 +31,7 @@
     import BackButton from "../../Base/BackButton.svelte"
     import ToSvelte from "../../Base/ToSvelte.svelte"
     import Svg from "../../../Svg"
-    import MapControlButton from "../../Base/MapControlButton.svelte"
+    import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
-    import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid"
 
     export let coordinate: { lon: number; lat: number }
     export let state: SpecialVisualizationState
@@ -329,11 +328,7 @@
             </div>
 
             <div class="absolute bottom-0 left-0 p-4">
-                <MapControlButton
+                <OpenBackgroundSelectorButton {state}/>
-                        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
-                >
-                    <Square3Stack3dIcon class="h-6 w-6"/>
-                </MapControlButton>
             </div>
         </div>
         <div class="flex flex-wrap-reverse md:flex-nowrap">

UI/Popup/ImportButtons/PointImportFlow.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import ImportFlow from "./ImportFlow.svelte"
-  import { PointImportFlowState } from "./PointImportFlowState"
+  import {PointImportFlowState} from "./PointImportFlowState"
   import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import {UIEventSource} from "../../../Logic/UIEventSource"
-  import MapControlButton from "../../Base/MapControlButton.svelte"
+  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
-  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
 
   export let importFlow: PointImportFlowState
 
@@ -52,11 +51,8 @@
         {value}
       />
     </div>
-    <MapControlButton
+    <div class="absolute bottom-0">
-      on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+      <OpenBackgroundSelectorButton {state}/>
-      cls="absolute bottom-0"
+    </div>
-    >
-      <Square3Stack3dIcon class="h-6 w-6" />
-    </MapControlButton>
   </div>
 </ImportFlow>

UI/Popup/ImportButtons/WayImportFlow.svelte

@@ -4,17 +4,17 @@
    */
   import WayImportFlowState from "./WayImportFlowState"
   import ImportFlow from "./ImportFlow.svelte"
-  import MapControlButton from "../../Base/MapControlButton.svelte"
+  import {UIEventSource} from "../../../Logic/UIEventSource"
-  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
+  import {Map as MlMap} from "maplibre-gl"
-  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
-  import { Map as MlMap } from "maplibre-gl"
-  import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
   import MaplibreMap from "../../Map/MaplibreMap.svelte"
   import ShowDataLayer from "../../Map/ShowDataLayer"
   import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
-  import { ImportFlowUtils } from "./ImportFlow"
+  import {ImportFlowUtils} from "./ImportFlow"
-  import { GeoOperations } from "../../../Logic/GeoOperations"
+  import {GeoOperations} from "../../../Logic/GeoOperations"
   import ConflateImportFlowState from "./ConflateImportFlowState"
+  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
+
   export let importFlow: WayImportFlowState | ConflateImportFlowState
 
   const state = importFlow.state
@@ -50,11 +50,8 @@
     <div class="h-32">
       <MaplibreMap {map} />
     </div>
-    <MapControlButton
+    <div class="absolute bottom-0">
-      on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+      <OpenBackgroundSelectorButton/>
-      cls="absolute bottom-0"
+    </div>
-    >
-      <Square3Stack3dIcon class="h-6 w-6" />
-    </MapControlButton>
   </div>
 </ImportFlow>

UI/SpecialVisualization.ts

@@ -64,7 +64,7 @@ export interface SpecialVisualizationState {
 
     readonly perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
     readonly userRelatedState: {
-        readonly showTags: UIEventSource<"no" | undefined | "always" | "yes">
+        readonly showTags: UIEventSource<"no" | undefined | "always" | "yes" | "full">
         readonly mangroveIdentity: MangroveIdentity
         readonly showAllQuestionsAtOnce: UIEventSource<boolean>
         readonly preferencesAsTags: Store<Record<string, string>>

UI/ThemeViewGUI.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../Logic/UIEventSource"
+  import {Store, UIEventSource} from "../Logic/UIEventSource"
-  import { Map as MlMap } from "maplibre-gl"
+  import {Map as MlMap} from "maplibre-gl"
   import MaplibreMap from "./Map/MaplibreMap.svelte"
   import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
   import MapControlButton from "./Base/MapControlButton.svelte"
   import ToSvelte from "./Base/ToSvelte.svelte"
   import If from "./Base/If.svelte"
-  import { GeolocationControl } from "./BigComponents/GeolocationControl"
+  import {GeolocationControl} from "./BigComponents/GeolocationControl"
-  import type { Feature } from "geojson"
+  import type {Feature} from "geojson"
   import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
   import LayerConfig from "../Models/ThemeConfig/LayerConfig"
   import Filterview from "./BigComponents/Filterview.svelte"
   import ThemeViewState from "../Models/ThemeViewState"
-  import type { MapProperties } from "../Models/MapProperties"
+  import type {MapProperties} from "../Models/MapProperties"
   import Geosearch from "./BigComponents/Geosearch.svelte"
   import Translations from "./i18n/Translations"
-  import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import {CogIcon, EyeIcon, MenuIcon, XCircleIcon} from "@rgossiaux/svelte-heroicons/solid"
-  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
 
   import Tr from "./Base/Tr.svelte"
   import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@@ -30,25 +29,26 @@
   import CopyrightPanel from "./BigComponents/CopyrightPanel"
   import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
   import ModalRight from "./Base/ModalRight.svelte"
-  import { Utils } from "../Utils"
+  import {Utils} from "../Utils"
   import Hotkeys from "./Base/Hotkeys"
-  import { VariableUiElement } from "./Base/VariableUIElement"
+  import {VariableUiElement} from "./Base/VariableUIElement"
   import SvelteUIElement from "./Base/SvelteUIElement"
   import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
   import LevelSelector from "./BigComponents/LevelSelector.svelte"
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
   import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
   import Svg from "../Svg"
-  import { ShareScreen } from "./BigComponents/ShareScreen"
+  import {ShareScreen} from "./BigComponents/ShareScreen"
   import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
-  import type { RasterLayerPolygon } from "../Models/RasterLayers"
+  import type {RasterLayerPolygon} from "../Models/RasterLayers"
-  import { AvailableRasterLayers } from "../Models/RasterLayers"
+  import {AvailableRasterLayers} from "../Models/RasterLayers"
   import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
   import IfHidden from "./Base/IfHidden.svelte"
-  import { onDestroy } from "svelte"
+  import {onDestroy} from "svelte"
-  import { OpenJosm } from "./BigComponents/OpenJosm"
+  import {OpenJosm} from "./BigComponents/OpenJosm"
   import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
   import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
+  import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -161,11 +161,7 @@
   <div class="flex w-full items-end justify-between px-4">
     <div class="flex">
       <!-- bottom left elements -->
-      <MapControlButton
+      <OpenBackgroundSelectorButton {state} hideTooltip={true}/>
-        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
-      >
-        <Square3Stack3dIcon class="h-6 w-6" />
-      </MapControlButton>
       <a
         class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
         on:click={() => {

langs/en.json

@@ -161,6 +161,7 @@
         "backToIndex": "Go back to the overview with all thematic maps",
         "backToMapcomplete": "Back to the theme overview",
         "backgroundMap": "Select a background layer",
+        "backgroundSwitch": "Switch background",
         "cancel": "Cancel",
         "confirm": "Confirm",
         "customThemeIntro": "<h3>Custom themes</h3>These are previously visited user-generated themes.",

public/css/index-tailwind-output.css

@@ -804,6 +804,11 @@ video {
   margin-right: 0.25rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1242,27 +1247,6 @@ video {
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-@-webkit-keyframes ping {
-  75%, 100% {
-    -webkit-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes ping {
-  75%, 100% {
-    -webkit-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.animate-ping {
-  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }