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"
-  import ThemeViewState from "../../Models/ThemeViewState"
+  /**
+   * A mapcontrol button which allows the user to select a different background.
+   * 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
+        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 {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid"
+    import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
 
     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
-                        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
-                >
-                    <Square3Stack3dIcon class="h-6 w-6"/>
-                </MapControlButton>
+                <OpenBackgroundSelectorButton {state}/>
             </div>
         </div>
         <div class="flex flex-wrap-reverse md:flex-nowrap">

UI/Popup/ImportButtons/PointImportFlow.svelte

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

UI/Popup/ImportButtons/WayImportFlow.svelte

@@ -4,8 +4,6 @@
    */
   import WayImportFlowState from "./WayImportFlowState"
   import ImportFlow from "./ImportFlow.svelte"
-  import MapControlButton from "../../Base/MapControlButton.svelte"
-  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
   import {UIEventSource} from "../../../Logic/UIEventSource"
   import {Map as MlMap} from "maplibre-gl"
   import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
@@ -15,6 +13,8 @@
   import {ImportFlowUtils} from "./ImportFlow"
   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
-      on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
-      cls="absolute bottom-0"
-    >
-      <Square3Stack3dIcon class="h-6 w-6" />
-    </MapControlButton>
+    <div class="absolute bottom-0">
+      <OpenBackgroundSelectorButton/>
+    </div>
   </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

@@ -16,7 +16,6 @@
   import Geosearch from "./BigComponents/Geosearch.svelte"
   import Translations from "./i18n/Translations"
   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"
@@ -49,6 +48,7 @@
   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
-        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
-      >
-        <Square3Stack3dIcon class="h-6 w-6" />
-      </MapControlButton>
+      <OpenBackgroundSelectorButton {state} hideTooltip={true}/>
       <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;
 }