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

UX: improve move wizard

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-07 22:45:42 +02:00
parent 1208e095cf
commit b21d7967ab
3 changed files with 43 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

5
UI/BigComponents/Geosearch.svelte
View file

@ -18,10 +18,11 @@
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 @@
}
}
if(clearAfterView){
searchContents = ""
}
dispatch("searchIsValid", false)
dispatch("searchCompleted")
} catch (e) {

12
UI/BigComponents/OpenBackgroundSelectorButton.svelte
View file

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

14
UI/Popup/MoveWizard.ts
View file

@ -22,6 +22,7 @@ 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
@ -132,14 +133,21 @@ export default class MoveWizard extends Toggle {
rasterLayer: state.mapProperties.rasterLayer
}
const value = new UIEventSource<{ lon: number; lat: number }>(undefined)
const locationInput = new SvelteUIElement(LocationInput, {
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")