Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: place 'add new button' in bottom-left instead of having a dynamic pin

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-09 01:26:12 +02:00
parent dab8d6cd5d
commit 285fe9ab83
7 changed files with 730 additions and 703 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
langs/en.json
View file

@ -124,7 +124,7 @@
"pleaseLogin": "Please log in to add a new feature", "pleaseLogin": "Please log in to add a new feature",
"presetInfo": "The new POI will have {tags}", "presetInfo": "The new POI will have {tags}",
"stillLoading": "The data is still loading. Please wait a bit before you add a new feature.", "stillLoading": "The data is still loading. Please wait a bit before you add a new feature.",
"title": "Add a new feature?", "title": "Add a new feature",
"warnVisibleForEveryone": "Your addition will be visible for everyone", "warnVisibleForEveryone": "Your addition will be visible for everyone",
"wrongType": "This feature is not a node or a way and can not be imported", "wrongType": "This feature is not a node or a way and can not be imported",
"zoomInFurther": "Zoom in further to add a feature.", "zoomInFurther": "Zoom in further to add a feature.",

2
langs/nl.json
View file

@ -124,7 +124,7 @@
"pleaseLogin": "Gelieve je aan te melden om een object toe te voegen", "pleaseLogin": "Gelieve je aan te melden om een object toe te voegen",
"presetInfo": "Het nieuwe object krijgt de attributen {tags}", "presetInfo": "Het nieuwe object krijgt de attributen {tags}",
"stillLoading": "De data worden nog geladen. Nog even geduld en dan kan je een object toevoegen.", "stillLoading": "De data worden nog geladen. Nog even geduld en dan kan je een object toevoegen.",
"title": "Nieuw object toevoegen?", "title": "Nieuw object toevoegen",
"warnVisibleForEveryone": "Je toevoeging is voor iedereen zichtbaar", "warnVisibleForEveryone": "Je toevoeging is voor iedereen zichtbaar",
"wrongType": "Dit object is geen punt of lijn en kan daarom niet geïmporteerd worden", "wrongType": "Dit object is geen punt of lijn en kan daarom niet geïmporteerd worden",
"zoomInFurther": "Gelieve verder in te zoomen om een object toe te voegen.", "zoomInFurther": "Gelieve verder in te zoomen om een object toe te voegen.",

68
src/Logic/FeatureSource/Sources/LastClickFeatureSource.ts
View file

@ -1,10 +1,11 @@
import LayoutConfig from "../../../Models/ThemeConfig/LayoutConfig" import LayoutConfig from "../../../Models/ThemeConfig/LayoutConfig";
import { WritableFeatureSource } from "../FeatureSource" import { WritableFeatureSource } from "../FeatureSource";
import { ImmutableStore, Store, UIEventSource } from "../../UIEventSource" import { ImmutableStore, Store, UIEventSource } from "../../UIEventSource";
import { Feature, Point } from "geojson" import { Feature, Point } from "geojson";
import { TagUtils } from "../../Tags/TagUtils" import { TagUtils } from "../../Tags/TagUtils";
import BaseUIElement from "../../../UI/BaseUIElement" import BaseUIElement from "../../../UI/BaseUIElement";
import { Utils } from "../../../Utils" import { Utils } from "../../../Utils";
import { OsmTags } from "../../../Models/OsmFeature";
/** /**
* Highly specialized feature source. * Highly specialized feature source.
@ -12,8 +13,14 @@ import { Utils } from "../../../Utils"
*/ */
export class LastClickFeatureSource implements WritableFeatureSource { export class LastClickFeatureSource implements WritableFeatureSource {
public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([]) public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([])
private i: number = 0
private readonly hasNoteLayer: string
private readonly renderings: string[];
private readonly hasPresets: string;
constructor(location: Store<{ lon: number; lat: number }>, layout: LayoutConfig) { constructor(location: Store<{ lon: number; lat: number }>, layout: LayoutConfig) {
this.hasNoteLayer = layout.layers.some((l) => l.id === "note") ? "yes" : "no"
this.hasPresets= layout.layers.some((l) => l.presets?.length > 0) ? "yes" : "no"
const allPresets: BaseUIElement[] = [] const allPresets: BaseUIElement[] = []
for (const layer of layout.layers) for (const layer of layout.layers)
for (let i = 0; i < (layer.presets ?? []).length; i++) { for (let i = 0; i < (layer.presets ?? []).length; i++) {
@ -26,35 +33,36 @@ export class LastClickFeatureSource implements WritableFeatureSource {
allPresets.push(html) allPresets.push(html)
} }
const renderings = Utils.Dedup( this.renderings = Utils.Dedup(
allPresets.map((uiElem) => allPresets.map((uiElem) =>
Utils.runningFromConsole ? "" : uiElem.ConstructElement().innerHTML Utils.runningFromConsole ? "" : uiElem.ConstructElement().innerHTML
) )
) )
let i = 0
location.addCallbackAndRunD(({ lon, lat }) => { location.addCallbackAndRunD(({ lon, lat }) => {
const properties = { this.features.setData([this.createFeature(lon, lat)])
lastclick: "yes",
id: "last_click_" + i,
has_note_layer: layout.layers.some((l) => l.id === "note") ? "yes" : "no",
has_presets: layout.layers.some((l) => l.presets?.length > 0) ? "yes" : "no",
renderings: renderings.join(""),
number_of_presets: "" + renderings.length,
first_preset: renderings[0],
}
i++
const point = <Feature<Point>>{
type: "Feature",
properties,
geometry: {
type: "Point",
coordinates: [lon, lat],
},
}
this.features.setData([point])
}) })
} }
public createFeature(lon: number, lat: number): Feature<Point, OsmTags> {
const properties: OsmTags = {
lastclick: "yes",
id: "last_click_" + this.i,
has_note_layer: this.hasNoteLayer ,
has_presets:this.hasPresets ,
renderings: this.renderings.join(""),
number_of_presets: "" +this. renderings.length,
first_preset: this.renderings[0],
}
this. i++
return <Feature<Point, OsmTags>>{
type: "Feature",
properties,
geometry: {
type: "Point",
coordinates: [lon, lat],
},
}
}
} }

2
src/Logic/Web/ThemeViewStateHashActor.ts
View file

@ -175,7 +175,7 @@ export default class ThemeViewStateHashActor {
} }
private back() { private back() {
console.log("Got a back event") console.trace("Got a back event")
const state = this._state const state = this._state
// history.pushState(null, null, window.location.pathname); // history.pushState(null, null, window.location.pathname);
if (state.selectedElement.data) { if (state.selectedElement.data) {

2
src/Models/Constants.ts
View file

@ -58,7 +58,7 @@ export default class Constants {
importHelperUnlock: 5000, importHelperUnlock: 5000,
} }
static readonly minZoomLevelToAddNewPoint = Constants.isRetina() ? 18 : 19 static readonly minZoomLevelToAddNewPoint = Constants.isRetina() ? 17 : 18
/** /**
* Used by 'PendingChangesUploader', which waits this amount of seconds to upload changes. * Used by 'PendingChangesUploader', which waits this amount of seconds to upload changes.
* (Note that pendingChanges might upload sooner if the popup is closed or similar) * (Note that pendingChanges might upload sooner if the popup is closed or similar)

1164
src/Models/ThemeViewState.ts
View file

File diff suppressed because it is too large Load diff

193
src/UI/ThemeViewGUI.svelte
View file

@ -1,115 +1,114 @@
<script lang="ts"> <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 MaplibreMap from "./Map/MaplibreMap.svelte";
import FeatureSwitchState from "../Logic/State/FeatureSwitchState" import FeatureSwitchState from "../Logic/State/FeatureSwitchState";
import MapControlButton from "./Base/MapControlButton.svelte" import MapControlButton from "./Base/MapControlButton.svelte";
import ToSvelte from "./Base/ToSvelte.svelte" import ToSvelte from "./Base/ToSvelte.svelte";
import If from "./Base/If.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 SelectedElementView from "./BigComponents/SelectedElementView.svelte";
import LayerConfig from "../Models/ThemeConfig/LayerConfig" import LayerConfig from "../Models/ThemeConfig/LayerConfig";
import Filterview from "./BigComponents/Filterview.svelte" import Filterview from "./BigComponents/Filterview.svelte";
import ThemeViewState from "../Models/ThemeViewState" import ThemeViewState from "../Models/ThemeViewState";
import type { MapProperties } from "../Models/MapProperties" import type { MapProperties } from "../Models/MapProperties";
import Geosearch from "./BigComponents/Geosearch.svelte" import Geosearch from "./BigComponents/Geosearch.svelte";
import Translations from "./i18n/Translations" 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 Tr from "./Base/Tr.svelte" import Tr from "./Base/Tr.svelte";
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte" import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte";
import FloatOver from "./Base/FloatOver.svelte" import FloatOver from "./Base/FloatOver.svelte";
import PrivacyPolicy from "./BigComponents/PrivacyPolicy" import PrivacyPolicy from "./BigComponents/PrivacyPolicy";
import Constants from "../Models/Constants" import Constants from "../Models/Constants";
import TabbedGroup from "./Base/TabbedGroup.svelte" import TabbedGroup from "./Base/TabbedGroup.svelte";
import UserRelatedState from "../Logic/State/UserRelatedState" import UserRelatedState from "../Logic/State/UserRelatedState";
import LoginToggle from "./Base/LoginToggle.svelte" import LoginToggle from "./Base/LoginToggle.svelte";
import LoginButton from "./Base/LoginButton.svelte" import LoginButton from "./Base/LoginButton.svelte";
import CopyrightPanel from "./BigComponents/CopyrightPanel" import CopyrightPanel from "./BigComponents/CopyrightPanel";
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte" import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte";
import ModalRight from "./Base/ModalRight.svelte" import ModalRight from "./Base/ModalRight.svelte";
import { Utils } from "../Utils" import { Utils } from "../Utils";
import Hotkeys from "./Base/Hotkeys" import Hotkeys from "./Base/Hotkeys";
import { VariableUiElement } from "./Base/VariableUIElement" import { VariableUiElement } from "./Base/VariableUIElement";
import SvelteUIElement from "./Base/SvelteUIElement" import SvelteUIElement from "./Base/SvelteUIElement";
import OverlayToggle from "./BigComponents/OverlayToggle.svelte" import OverlayToggle from "./BigComponents/OverlayToggle.svelte";
import LevelSelector from "./BigComponents/LevelSelector.svelte" import LevelSelector from "./BigComponents/LevelSelector.svelte";
import ExtraLinkButton from "./BigComponents/ExtraLinkButton" import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte" import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
import Svg from "../Svg" import Svg from "../Svg";
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte" 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 RasterLayerOverview from "./Map/RasterLayerOverview.svelte";
import IfHidden from "./Base/IfHidden.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 MapillaryLink from "./BigComponents/MapillaryLink.svelte";
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte" import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte";
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte" import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
import StateIndicator from "./BigComponents/StateIndicator.svelte" import StateIndicator from "./BigComponents/StateIndicator.svelte";
import LanguagePicker from "./LanguagePicker" import LanguagePicker from "./LanguagePicker";
import Locale from "./i18n/Locale" import Locale from "./i18n/Locale";
import ShareScreen from "./BigComponents/ShareScreen.svelte" import ShareScreen from "./BigComponents/ShareScreen.svelte";
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid";
export let state: ThemeViewState export let state: ThemeViewState;
let layout = state.layout let layout = state.layout;
let maplibremap: UIEventSource<MlMap> = state.map let maplibremap: UIEventSource<MlMap> = state.map;
let selectedElement: UIEventSource<Feature> = state.selectedElement let selectedElement: UIEventSource<Feature> = state.selectedElement;
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer;
const selectedElementView = selectedElement.map( const selectedElementView = selectedElement.map(
(selectedElement) => { (selectedElement) => {
// Svelte doesn't properly reload some of the legacy UI-elements // Svelte doesn't properly reload some of the legacy UI-elements
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
const layer = selectedLayer.data const layer = selectedLayer.data;
if (selectedElement === undefined || layer === undefined) { if (selectedElement === undefined || layer === undefined) {
return undefined return undefined;
} }
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) { if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
return undefined return undefined;
} }
const tags = state.featureProperties.getStore(selectedElement.properties.id) const tags = state.featureProperties.getStore(selectedElement.properties.id);
return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags }) return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags });
}, },
[selectedLayer] [selectedLayer]
) );
const selectedElementTitle = selectedElement.map( const selectedElementTitle = selectedElement.map(
(selectedElement) => { (selectedElement) => {
// Svelte doesn't properly reload some of the legacy UI-elements // Svelte doesn't properly reload some of the legacy UI-elements
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
const layer = selectedLayer.data const layer = selectedLayer.data;
if (selectedElement === undefined || layer === undefined) { if (selectedElement === undefined || layer === undefined) {
return undefined return undefined;
} }
const tags = state.featureProperties.getStore(selectedElement.properties.id) const tags = state.featureProperties.getStore(selectedElement.properties.id);
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags }) return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags });
}, },
[selectedLayer] [selectedLayer]
) );
let mapproperties: MapProperties = state.mapProperties let mapproperties: MapProperties = state.mapProperties;
let featureSwitches: FeatureSwitchState = state.featureSwitches let featureSwitches: FeatureSwitchState = state.featureSwitches;
let availableLayers = state.availableLayers let availableLayers = state.availableLayers;
let userdetails = state.osmConnection.userDetails let userdetails = state.osmConnection.userDetails;
let currentViewLayer = layout.layers.find((l) => l.id === "current_view") let currentViewLayer = layout.layers.find((l) => l.id === "current_view");
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer;
let rasterLayerName = let rasterLayerName =
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name;
onDestroy( onDestroy(
rasterLayer.addCallbackAndRunD((l) => { rasterLayer.addCallbackAndRunD((l) => {
rasterLayerName = l.properties.name rasterLayerName = l.properties.name;
}) })
) );
</script> </script>
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden"> <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
@ -169,22 +168,30 @@
<div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen"> <div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
<!-- bottom controls --> <!-- bottom controls -->
<div class="flex w-full items-end justify-between px-4"> <div class="flex w-full items-end justify-between px-4">
<div class="flex"> <div class="flex flex-col">
<!-- bottom left elements --> <span>
<MapControlButton on:click={() => state.guistate.openFilterView()}> <button class="w-fit pointer-events-auto" on:click={() => {state.openNewDialog()}}>
<ToSvelte construct={Svg.filter_svg().SetClass("h-6 w-6")}/> <Tr t={Translations.t.general.add.title}/>
</MapControlButton> </button>
</span>
<div class="flex">
<!-- bottom left elements -->
<MapControlButton on:click={() => state.guistate.openFilterView()}>
<ToSvelte construct={Svg.filter_svg().SetClass("h-6 w-6")} />
</MapControlButton>
<OpenBackgroundSelectorButton hideTooltip={true} {state} /> <OpenBackgroundSelectorButton hideTooltip={true} {state} />
<a <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" 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={() => { on:click={() => {
state.guistate.themeViewTab.setData("copyright") state.guistate.themeViewTab.setData("copyright")
state.guistate.themeIsOpened.setData(true) state.guistate.themeIsOpened.setData(true)
}} }}
> >
© OpenStreetMap, <span class="w-24">{rasterLayerName}</span> © OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
</a> </a>
</div>
</div> </div>
<div class="flex flex-col items-end"> <div class="flex flex-col items-end">
@ -319,7 +326,7 @@
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" /> <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
<div slot="title4" class="flex"> <div class="flex" slot="title4">
<ToSvelte construct={Svg.share_svg().SetClass("w-4 h-4")} /> <ToSvelte construct={Svg.share_svg().SetClass("w-4 h-4")} />
<Tr t={Translations.t.general.sharescreen.title} /> <Tr t={Translations.t.general.sharescreen.title} />
</div> </div>
@ -347,7 +354,9 @@
<If condition={state.guistate.menuIsOpened}> <If condition={state.guistate.menuIsOpened}>
<!-- Menu page --> <!-- Menu page -->
<FloatOver> <FloatOver on:close={() => {
selectedElement.setData(undefined)
}}>
<span slot="close-button"><!-- Hide the default close button --></span> <span slot="close-button"><!-- Hide the default close button --></span>
<TabbedGroup tab={state.guistate.menuViewTabIndex}> <TabbedGroup tab={state.guistate.menuViewTabIndex}>
<div slot="post-tablist"> <div slot="post-tablist">