Bastian-Greshake-Tzovaras/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

7
UI/BigComponents/Geosearch.svelte
View file

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

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>

44
UI/Popup/MoveWizard.ts
View file

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