Add back button on simpleAddUI

AllTranslationAssets.ts

@@ -39,7 +39,8 @@ export default class AllTranslationAssets {
     number: new Translation( {"en":"number","ca":"nombre","es":"número","nl":"getal","fr":"nombre","gl":"número","de":"Zahl"} ),
     osmLinkTooltip: new Translation( {"en":"See this object on OpenStreetMap for history and more editing options","ca":"Mira aquest objecte a OpenStreetMap per veure historial i altres opcions d'edició","es":"Mira este objeto en OpenStreetMap para ver historial y otras opciones de edición","nl":"Bekijk dit object op OpenStreetMap waar geschiedenis en meer aanpasopties zijn","fr":"Voir l'historique de cet objet sur OpenStreetMap et plus d'options d'édition","gl":"Ollar este obxecto no OpenStreetMap para ollar o historial e outras opcións de edición","de":"Dieses Objekt auf OpenStreetMap anschauen für die Geschichte und weitere Bearbeitungsmöglichkeiten"} ),
     add: {      addNew: new Translation( {"en":"Add a new {category} here","ca":"Afegir {category} aquí","es":"Añadir {category} aquí","nl":"Voeg hier een {category} toe","fr":"Ajouter un/une {category} ici","gl":"Engadir {category} aquí","de":"Hier eine neue {category} hinzufügen"} ),
-      header: new Translation( {"en":"<h2>Add a point?</h2>You clicked somewhere where no data is known yet.<br/>","ca":"<h2>Vols afegir un punt?</h2>Has marcat un lloc on no coneixem les dades.<br/>","es":"<h2>Quieres añadir un punto?</h2>Has marcado un lugar del que no conocemos los datos.<br/>","nl":"<h2>Punt toevoegen?</h2>Je klikte ergens waar er nog geen data is. Kies hieronder welk punt je wilt toevoegen<br/>","fr":"<h2>Pas de données</h2>Vous avez cliqué sur un endroit où il n'y a pas encore de données. <br/>","gl":"<h2>Queres engadir un punto?</h2>Marcaches un lugar onde non coñecemos os datos.<br/>","de":"<h2>Punkt hinzufügen?</h2>Sie haben irgendwo geklickt, wo noch keine Daten bekannt sind.<br/>"} ),
+      title: new Translation( {"en":"Add a point?","ca":"Vols afegir un punt?","es":"Quieres añadir un punto?","nl":"Punt toevoegen?","fr":"Pas de données","gl":"Queres engadir un punto?","de":"Punkt hinzufügen?"} ),
+      intro: new Translation( {"en":"You clicked somewhere where no data is known yet.<br/>","ca":"Has marcat un lloc on no coneixem les dades.<br/>","es":"Has marcado un lugar del que no conocemos los datos.<br/>","nl":"Je klikte ergens waar er nog geen data is. Kies hieronder welk punt je wilt toevoegen<br/>","fr":"Vous avez cliqué sur un endroit où il n'y a pas encore de données. <br/>","gl":"Marcaches un lugar onde non coñecemos os datos.<br/>","de":"Sie haben irgendwo geklickt, wo noch keine Daten bekannt sind.<br/>"} ),
       pleaseLogin: new Translation( {"en":"<a class='activate-osm-authentication'>Please log in to add a new point</a>","ca":"<a class='activate-osm-authentication'>Entra per afegir un nou punt</a>","es":"<a class='activate-osm-authentication'>Entra para añadir un nuevo punto</a>","nl":"<a class='activate-osm-authentication'>Gelieve je aan te melden om een punt to te voegen</a>","fr":"<a class='activate-osm-authentication'>Vous devez vous connecter pour ajouter un point</a>","gl":"<a class='activate-osm-authentication'>Inicia a sesión para engadir un novo punto</a>","de":"<a class='activate-osm-authentication'>Bitte loggen Sie sich ein, um einen neuen Punkt hinzuzufügen</a>"} ),
       zoomInFurther: new Translation( {"en":"Zoom in further to add a point.","ca":"Apropa per afegir un punt.","es":"Acerca para añadir un punto.","nl":"Gelieve verder in te zoomen om een punt toe te voegen.","fr":"Rapprochez vous pour ajouter un point.","gl":"Achégate para engadir un punto.","de":"Weiter einzoomen, um einen Punkt hinzuzufügen."} ),
       stillLoading: new Translation( {"en":"The data is still loading. Please wait a bit before you add a new point.","ca":"Les dades es segueixen carregant. Espera una mica abans d'afegir cap punt.","es":"Los datos se siguen cargando. Espera un poco antes de añadir ningún punto.","nl":"De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen.","fr":"Chargement des données en cours. Patientez un instant avant d'ajouter un nouveau point.","gl":"Os datos seguen a cargarse. Agarda un intre antes de engadir ningún punto.","de":"Die Daten werden noch geladen. Bitte warten Sie etwas, bevor Sie einen neuen Punkt hinzufügen."} ),

Logic/Web/QueryParameters.ts

@@ -62,6 +62,7 @@ export class QueryParameters {
 
             parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(QueryParameters.knownSources[key].data))
         }
+        // Don't pollute the history every time a parameter changes
         history.replaceState(null, "", "?" + parts.join("&") + "#" + Hash.hash.data);
 
     }

Models/Constants.ts

@@ -1,7 +1,7 @@
 import { Utils } from "../Utils";
 
 export default class Constants {
-    public static vNumber = "0.4.3";
+    public static vNumber = "0.4.4";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/Base/ScrollableFullScreen.ts

@@ -2,6 +2,7 @@ import {UIElement} from "../UIElement";
 import Svg from "../../Svg";
 import State from "../../State";
 import Combine from "./Combine";
+import Ornament from "./Ornament";
 
 /**
  * Wraps some contents into a panel that scrolls the content _under_ the title
@@ -17,10 +18,12 @@ export default class ScrollableFullScreen extends UIElement{
             State.state.selectedElement.setData(undefined);
         }).SetClass("only-on-mobile")
             .SetClass("featureinfobox-back-to-the-map")
-        
+        title.SetClass("featureinfobox-title")
         this._component = new Combine([
             new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
-            new Combine([content]).SetClass("featureinfobox-content")
+            new Combine([content]).SetClass("featureinfobox-content"),
+         new Combine([  new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
+            // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
         ])
         this.SetClass("featureinfobox");
         

UI/BigComponents/SimpleAddUI.ts

@@ -13,47 +13,175 @@ import {FixedUiElement} from "../Base/FixedUiElement";
 import Translations from "../i18n/Translations";
 import Constants from "../../Models/Constants";
 import LayerConfig from "../../Customizations/JSON/LayerConfig";
+import ScrollableFullScreen from "../Base/ScrollableFullScreen";
 
 export default class SimpleAddUI extends UIElement {
-    private readonly _addButtons: UIElement[];
+    private readonly _loginButton: UIElement;
 
-    private _loginButton : UIElement;
+    private readonly _confirmPreset: UIEventSource<{
-    
-    private _confirmPreset: UIEventSource<{
         description: string | UIElement,
         name: string | UIElement,
         icon: UIElement,
         tags: Tag[],
         layerToAddTo: {
             layerDef: LayerConfig,
-            isDisplayed: UIEventSource<boolean> }
+            isDisplayed: UIEventSource<boolean>
+        }
     }>
         = new UIEventSource(undefined);
-    private confirmButton: UIElement = undefined;
+
-    private _confirmDescription: UIElement = undefined;
+    private _component: UIElement;
-    private openLayerControl: UIElement;
+
-    private cancelButton: UIElement;
+    private readonly openLayerControl: UIElement;
-    private goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(), 
+    private readonly cancelButton: UIElement;
+    private readonly goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(),
         Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false});
 
     constructor() {
-        super(State.state.locationControl);
+        super(State.state.locationControl.map(loc => loc.zoom));
+        const self = this;
         this.ListenTo(Locale.language);
         this.ListenTo(State.state.osmConnection.userDetails);
         this.ListenTo(State.state.layerUpdater.runningQuery);
         this.ListenTo(this._confirmPreset);
         this.ListenTo(State.state.locationControl);
+        State.state.filteredLayers.data?.map(layer => {
+            self.ListenTo(layer.isDisplayed)
+        })
 
         this._loginButton = Translations.t.general.add.pleaseLogin.Clone().onClick(() => State.state.osmConnection.AttemptLogin());
 
-        this._addButtons = [];
         this.SetStyle("font-size:large");
+        this.cancelButton = new SubtleButton(Svg.close_ui(),
+            Translations.t.general.cancel
+        ).onClick(() => {
+            self._confirmPreset.setData(undefined);
+        })
 
+        this.openLayerControl = new SubtleButton(Svg.layers_ui(),
+            Translations.t.general.add.openLayerControl
+        ).onClick(() => {
+            State.state.fullScreenMessage.setData(undefined);
+            State.state.layerControlIsOpened.setData(true);
+        })
+    }
+
+    InnerRender(): string {
+
+        this._component = new ScrollableFullScreen(
+            Translations.t.general.add.title,
+            this.CreateContent()
+        )
+        return this._component.Render();
+
+    }
+
+    private CreatePresetsPanel(): UIElement {
+        const userDetails = State.state.osmConnection.userDetails;
+        if (userDetails === undefined) {
+            return undefined;
+        }
+
+        if (!userDetails.data.loggedIn) {
+            return this._loginButton;
+        }
+
+        if (userDetails.data.unreadMessages > 0 && userDetails.data.csCount < Constants.userJourney.addNewPointWithUnreadMessagesUnlock) {
+            return new Combine([
+                Translations.t.general.readYourMessages.Clone().SetClass("alert"),
+                this.goToInboxButton
+            ]);
+
+        }
+
+        if (userDetails.data.csCount < Constants.userJourney.addNewPointsUnlock) {
+            return new Combine(["<span class='alert'>",
+                Translations.t.general.fewChangesBefore,
+                "</span>"]);
+        }
+
+        if (State.state.locationControl.data.zoom < Constants.userJourney.minZoomLevelToAddNewPoints) {
+            return Translations.t.general.add.zoomInFurther.SetClass("alert")
+        }
+
+        if (State.state.layerUpdater.runningQuery.data) {
+            return Translations.t.general.add.stillLoading
+        }
+
+        const presetButtons = this.CreatePresetButtons()
+        return new Combine(presetButtons).SetClass("add-popup-all-buttons")
+    }
+
+
+    private CreateContent(): UIElement {
+        const confirmPanel = this.CreateConfirmPanel();
+        if (confirmPanel !== undefined) {
+            return confirmPanel;
+        }
+
+        let intro: UIElement = Translations.t.general.add.intro;
+
+        let testMode: UIElement = undefined;
+        if (State.state.osmConnection?.userDetails?.data?.dryRun) {
+            testMode = new Combine([
+                "<span class='alert'>",
+                "Test mode - changes won't be saved",
+                "</span>"
+            ]);
+        }
+
+        let presets = this.CreatePresetsPanel();
+        return new Combine([intro, testMode, presets])
+
+
+    }
+
+    private CreateConfirmPanel(): UIElement {
+        const preset = this._confirmPreset.data;
+        if (preset === undefined) {
+            return undefined;
+        }
+
+        const confirmButton = new SubtleButton(preset.icon,
+            new Combine([
+                "<b>",
+                Translations.t.general.add.confirmButton.Subs({category: preset.name}),
+                "</b>"]));
+        confirmButton.onClick(this.CreatePoint(preset.tags));
+
+        if (!this._confirmPreset.data.layerToAddTo.isDisplayed.data) {
+            return new Combine([
+                Translations.t.general.add.layerNotEnabled.Subs({layer: this._confirmPreset.data.layerToAddTo.layerDef.name})
+                    .SetClass("alert"),
+                this.openLayerControl,
+
+                this.cancelButton
+            ]);
+        }
+
+        let tagInfo = "";
+        const csCount = State.state.osmConnection.userDetails.data.csCount;
+        if (csCount > Constants.userJourney.tagsVisibleAt) {
+            tagInfo = this._confirmPreset.data.tags.map(t => t.asHumanString(csCount > Constants.userJourney.tagsVisibleAndWikiLinked, true)).join("&");
+            tagInfo = `<br/>More information about the preset: ${tagInfo}`
+        }
+
+        return new Combine([
+            Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
+            State.state.osmConnection.userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>" : "",
+            confirmButton,
+            this.cancelButton,
+            preset.description,
+            tagInfo
+
+        ])
+
+    }
+
+    private CreatePresetButtons() {
+        const allButtons = [];
         const self = this;
         for (const layer of State.state.filteredLayers.data) {
-
-            this.ListenTo(layer.isDisplayed);
-
             const presets = layer.layerDef.presets;
             for (const preset of presets) {
                 const tags = TagUtils.KVtoProperties(preset.tags ?? []);
@@ -77,13 +205,6 @@ export default class SimpleAddUI extends UIElement {
                         ])
                     ).onClick(
                         () => {
-                            self.confirmButton = new SubtleButton(icon,
-                                new Combine([
-                                    "<b>",
-                                    Translations.t.general.add.confirmButton.Subs({category: preset.title}),
-                                    "</b>"]));
-                            self.confirmButton.onClick(self.CreatePoint(preset.tags));
-                            self._confirmDescription = preset.description;
                             self._confirmPreset.setData({
                                 tags: preset.tags,
                                 layerToAddTo: layer,
@@ -94,23 +215,10 @@ export default class SimpleAddUI extends UIElement {
                             self.Update();
                         }
                     )
-
+                allButtons.push(button);
-
-                this._addButtons.push(button);
             }
         }
-
+        return allButtons;
-        this.cancelButton = new SubtleButton(Svg.close_ui(),
-            Translations.t.general.cancel
-        ).onClick(() => {
-            self._confirmPreset.setData(undefined);
-        })
-
-        this.openLayerControl = new SubtleButton(Svg.layers_ui(),
-            Translations.t.general.add.openLayerControl
-        ).onClick(() => {
-            State.state.layerControlIsOpened.setData(true);
-        })
     }
 
     private CreatePoint(tags: Tag[]) {
@@ -121,86 +229,5 @@ export default class SimpleAddUI extends UIElement {
         }
     }
 
-    InnerRender(): string {
-
-        const userDetails = State.state.osmConnection.userDetails;
-
-        if (this._confirmPreset.data !== undefined) {
-            
-            if(!this._confirmPreset.data.layerToAddTo.isDisplayed.data){
-                return new Combine([
-                    Translations.t.general.add.layerNotEnabled.Subs({layer: this._confirmPreset.data.layerToAddTo.layerDef.name})
-                        .SetClass("alert"),
-                    this.openLayerControl,
-                    
-                    this.cancelButton
-                ]).Render();
-            }
-
-            let tagInfo = "";
-            const csCount = State.state.osmConnection.userDetails.data.csCount;
-            if (csCount > Constants.userJourney.tagsVisibleAt) {
-                tagInfo = this._confirmPreset.data .tags.map(t => t.asHumanString(csCount > Constants.userJourney.tagsVisibleAndWikiLinked, true)).join("&");
-                tagInfo = `<br/>More information about the preset: ${tagInfo}`
-            }
-
-            return new Combine([
-                Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
-                userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>" : "",
-                this.confirmButton,
-                this.cancelButton,
-                this._confirmDescription,
-                tagInfo
-
-            ]).Render();
-
-
-        }
-
-
-        let header: UIElement = Translations.t.general.add.header;
-
-
-        if (userDetails === undefined) {
-            return header.Render();
-        }
-
-        if (!userDetails.data.loggedIn) {
-            return new Combine([header, this._loginButton]).Render()
-        }
-
-        if (userDetails.data.unreadMessages > 0 && userDetails.data.csCount < Constants.userJourney.addNewPointWithUnreadMessagesUnlock) {
-            return new Combine([header,
-                Translations.t.general.readYourMessages.Clone().SetClass("alert"),
-                this.goToInboxButton
-            ]).Render();
-
-        }
-
-        if (userDetails.data.dryRun) {
-            header = new Combine([header,
-                "<span class='alert'>",
-                "Test mode - changes won't be saved",
-                "</span>"
-            ]);
-        }
-
-        if (userDetails.data.csCount < Constants.userJourney.addNewPointsUnlock) {
-            return new Combine([header, "<span class='alert'>",
-                Translations.t.general.fewChangesBefore,
-                "</span>"]).Render();
-        }
-
-        if (State.state.locationControl.data.zoom < Constants.userJourney.minZoomLevelToAddNewPoints) {
-            return new Combine([header, Translations.t.general.add.zoomInFurther.SetClass("alert")]).Render()
-        }
-
-        if (State.state.layerUpdater.runningQuery.data) {
-            return new Combine([header, Translations.t.general.add.stillLoading]).Render()
-        }
-
-        return header.Render() + new Combine(this._addButtons).SetClass("add-popup-all-buttons").Render();
-    }
-
 
 }

UI/Popup/FeatureInfoBox.ts

@@ -6,10 +6,7 @@ import QuestionBox from "./QuestionBox";
 import Combine from "../Base/Combine";
 import TagRenderingAnswer from "./TagRenderingAnswer";
 import State from "../../State";
-import {FixedUiElement} from "../Base/FixedUiElement";
 import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
-import Svg from "../../Svg";
-import Ornament from "../Base/Ornament";
 import ScrollableFullScreen from "../Base/ScrollableFullScreen";
 
 export default class FeatureInfoBox extends UIElement {
@@ -49,7 +46,7 @@ export default class FeatureInfoBox extends UIElement {
         if (!questionBoxIsUsed) {
             renderings.push(questionBox);
         }
-        const tail = new Combine([new Ornament()]).SetClass("only-on-mobile");
+        const tail = new Combine([]).SetClass("only-on-mobile");
 
         const content = new Combine([
                 ...renderings,

assets/translations.json

@@ -309,14 +309,24 @@
         "gl": "Engadir {category} aquí",
         "de": "Hier eine neue {category} hinzufügen"
       },
-      "header": {
+      "title": {
-        "en": "<h2>Add a point?</h2>You clicked somewhere where no data is known yet.<br/>",
+        "en": "Add a new point?",
-        "ca": "<h2>Vols afegir un punt?</h2>Has marcat un lloc on no coneixem les dades.<br/>",
+        "ca": "Vols afegir un punt?",
-        "es": "<h2>Quieres añadir un punto?</h2>Has marcado un lugar del que no conocemos los datos.<br/>",
+        "es": "Quieres añadir un punto?",
-        "nl": "<h2>Punt toevoegen?</h2>Je klikte ergens waar er nog geen data is. Kies hieronder welk punt je wilt toevoegen<br/>",
+        "nl": "Nieuw punt toevoegen?",
-        "fr": "<h2>Pas de données</h2>Vous avez cliqué sur un endroit où il n'y a pas encore de données. <br/>",
+        "fr": "Pas de données",
-        "gl": "<h2>Queres engadir un punto?</h2>Marcaches un lugar onde non coñecemos os datos.<br/>",
+        "gl": "Queres engadir un punto?",
-        "de": "<h2>Punkt hinzufügen?</h2>Sie haben irgendwo geklickt, wo noch keine Daten bekannt sind.<br/>"
+        "de": "Punkt hinzufügen?"
+
+      },
+      "intro": {
+        "en": "You clicked somewhere where no data is known yet.<br/>",
+        "ca": "Has marcat un lloc on no coneixem les dades.<br/>",
+        "es": "Has marcado un lugar del que no conocemos los datos.<br/>",
+        "nl": "Je klikte ergens waar er nog geen data is. Kies hieronder welk punt je wilt toevoegen<br/>",
+        "fr": "Vous avez cliqué sur un endroit où il n'y a pas encore de données. <br/>",
+        "gl": "Marcaches un lugar onde non coñecemos os datos.<br/>",
+        "de": "Sie haben irgendwo geklickt, wo noch keine Daten bekannt sind.<br/>"
       },
       "pleaseLogin": {
         "en": "<a class='activate-osm-authentication'>Please log in to add a new point</a>",