From b21d7967ab9b42d41a78414d4b4a4d90b76abc1e Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 7 Jun 2023 22:45:42 +0200
Subject: [PATCH] UX: improve move wizard

---
 UI/BigComponents/Geosearch.svelte             |  7 ++-
 .../OpenBackgroundSelectorButton.svelte       | 12 +++++
 UI/Popup/MoveWizard.ts                        | 44 +++++++++++--------
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/UI/BigComponents/Geosearch.svelte b/UI/BigComponents/Geosearch.svelte
index 330f743871..1b885a14ee 100644
--- a/UI/BigComponents/Geosearch.svelte
+++ b/UI/BigComponents/Geosearch.svelte
@@ -17,11 +17,12 @@
     export let bounds: UIEventSource<BBox>;
     export let selectedElement: UIEventSource<Feature> | undefined = undefined;
     export let selectedLayer: UIEventSource<LayerConfig> | undefined = undefined;
+    
+    export let clearAfterView: boolean = true
 
     let searchContents: string = ""
     export let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
     onDestroy(triggerSearch.addCallback(_ => {
-        console.log("TriggerRun pinged")
         performSearch()
     }))
 
@@ -76,7 +77,9 @@
 
                 }
             }
-            searchContents = ""
+            if(clearAfterView){
+                searchContents = ""
+            }
             dispatch("searchIsValid", false)
             dispatch("searchCompleted")
         } catch (e) {
diff --git a/UI/BigComponents/OpenBackgroundSelectorButton.svelte b/UI/BigComponents/OpenBackgroundSelectorButton.svelte
index e69de29bb2..af9c6a4d0a 100644
--- a/UI/BigComponents/OpenBackgroundSelectorButton.svelte
+++ b/UI/BigComponents/OpenBackgroundSelectorButton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+
+    import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid";
+    import MapControlButton from "../Base/MapControlButton.svelte";
+    import ThemeViewState from "../../Models/ThemeViewState";
+
+    export let state: ThemeViewState
+</script>
+
+<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
+    <Square3Stack3dIcon class="w-6 h-6"/>
+</MapControlButton>
diff --git a/UI/Popup/MoveWizard.ts b/UI/Popup/MoveWizard.ts
index e6d6621843..7dc1176e03 100644
--- a/UI/Popup/MoveWizard.ts
+++ b/UI/Popup/MoveWizard.ts
@@ -1,27 +1,28 @@
-import { SubtleButton } from "../Base/SubtleButton"
+import {SubtleButton} from "../Base/SubtleButton"
 import Combine from "../Base/Combine"
 import Svg from "../../Svg"
 import Toggle from "../Input/Toggle"
-import { UIEventSource } from "../../Logic/UIEventSource"
+import {UIEventSource} from "../../Logic/UIEventSource"
 import Translations from "../i18n/Translations"
-import { VariableUiElement } from "../Base/VariableUIElement"
-import { Translation } from "../i18n/Translation"
+import {VariableUiElement} from "../Base/VariableUIElement"
+import {Translation} from "../i18n/Translation"
 import BaseUIElement from "../BaseUIElement"
-import { GeoOperations } from "../../Logic/GeoOperations"
+import {GeoOperations} from "../../Logic/GeoOperations"
 import ChangeLocationAction from "../../Logic/Osm/Actions/ChangeLocationAction"
 import MoveConfig from "../../Models/ThemeConfig/MoveConfig"
 import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
-import { And } from "../../Logic/Tags/And"
-import { Tag } from "../../Logic/Tags/Tag"
-import { LoginToggle } from "./LoginButton"
-import { SpecialVisualizationState } from "../SpecialVisualization"
-import { Feature, Point } from "geojson"
-import { OsmTags } from "../../Models/OsmFeature"
+import {And} from "../../Logic/Tags/And"
+import {Tag} from "../../Logic/Tags/Tag"
+import {LoginToggle} from "./LoginButton"
+import {SpecialVisualizationState} from "../SpecialVisualization"
+import {Feature, Point} from "geojson"
+import {OsmTags} from "../../Models/OsmFeature"
 import SvelteUIElement from "../Base/SvelteUIElement"
-import { MapProperties } from "../../Models/MapProperties"
+import {MapProperties} from "../../Models/MapProperties"
 import LocationInput from "../InputElement/Helpers/LocationInput.svelte"
 import Geosearch from "../BigComponents/Geosearch.svelte"
 import Constants from "../../Models/Constants"
+import OpenBackgroundSelectorButton from "../BigComponents/OpenBackgroundSelectorButton.svelte";
 
 interface MoveReason {
     text: Translation | string
@@ -127,19 +128,26 @@ export default class MoveWizard extends Toggle {
             const mapProperties: Partial<MapProperties> = {
                 minzoom: new UIEventSource(reason.minZoom),
                 zoom: new UIEventSource(reason?.startZoom ?? 16),
-                location: new UIEventSource({ lon, lat }),
+                location: new UIEventSource({lon, lat}),
                 bounds: new UIEventSource(undefined),
                 rasterLayer: state.mapProperties.rasterLayer
             }
             const value = new UIEventSource<{ lon: number; lat: number }>(undefined)
-            const locationInput = new SvelteUIElement(LocationInput, {
-                mapProperties,
-                value,
-            })
+            const locationInput =
+                new Combine([
+
+                    new SvelteUIElement(LocationInput, {
+                        mapProperties,
+                        value,
+                    }).SetClass("w-full h-full"),
+                    new SvelteUIElement(OpenBackgroundSelectorButton, {state}).SetClass("absolute bottom-0 left-0")
+
+                ]).SetClass("relative w-full h-full")
+
 
             let searchPanel: BaseUIElement = undefined
             if (reason.includeSearch) {
-                searchPanel = new SvelteUIElement(Geosearch, { bounds: mapProperties.bounds })
+                searchPanel = new SvelteUIElement(Geosearch, {bounds: mapProperties.bounds, clearAfterView: false})
             }
 
             locationInput.SetStyle("height: 17.5rem")