Add back button on simpleAddUI

This commit is contained in:
pietervdvn 2021-01-08 16:49:42 +01:00
parent ddea3d2fc1
commit 6e77504854
7 changed files with 178 additions and 139 deletions

View file

@ -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"} ), 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"} ), 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"} ), 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>"} ), 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."} ), 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."} ), 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."} ),

View file

@ -62,6 +62,7 @@ export class QueryParameters {
parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(QueryParameters.knownSources[key].data)) 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); history.replaceState(null, "", "?" + parts.join("&") + "#" + Hash.hash.data);
} }

View file

@ -1,7 +1,7 @@
import { Utils } from "../Utils"; import { Utils } from "../Utils";
export default class Constants { 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 // The user journey states thresholds when a new feature gets unlocked
public static userJourney = { public static userJourney = {

View file

@ -2,6 +2,7 @@ import {UIElement} from "../UIElement";
import Svg from "../../Svg"; import Svg from "../../Svg";
import State from "../../State"; import State from "../../State";
import Combine from "./Combine"; import Combine from "./Combine";
import Ornament from "./Ornament";
/** /**
* Wraps some contents into a panel that scrolls the content _under_ the title * 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); State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile") }).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map") .SetClass("featureinfobox-back-to-the-map")
title.SetClass("featureinfobox-title")
this._component = new Combine([ this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"), 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"); this.SetClass("featureinfobox");

View file

@ -13,47 +13,175 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations"; import Translations from "../i18n/Translations";
import Constants from "../../Models/Constants"; import Constants from "../../Models/Constants";
import LayerConfig from "../../Customizations/JSON/LayerConfig"; import LayerConfig from "../../Customizations/JSON/LayerConfig";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class SimpleAddUI extends UIElement { 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, description: string | UIElement,
name: string | UIElement, name: string | UIElement,
icon: UIElement, icon: UIElement,
tags: Tag[], tags: Tag[],
layerToAddTo: { layerToAddTo: {
layerDef: LayerConfig, layerDef: LayerConfig,
isDisplayed: UIEventSource<boolean> } isDisplayed: UIEventSource<boolean>
}
}> }>
= new UIEventSource(undefined); = 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}); Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false});
constructor() { constructor() {
super(State.state.locationControl); super(State.state.locationControl.map(loc => loc.zoom));
const self = this;
this.ListenTo(Locale.language); this.ListenTo(Locale.language);
this.ListenTo(State.state.osmConnection.userDetails); this.ListenTo(State.state.osmConnection.userDetails);
this.ListenTo(State.state.layerUpdater.runningQuery); this.ListenTo(State.state.layerUpdater.runningQuery);
this.ListenTo(this._confirmPreset); this.ListenTo(this._confirmPreset);
this.ListenTo(State.state.locationControl); 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._loginButton = Translations.t.general.add.pleaseLogin.Clone().onClick(() => State.state.osmConnection.AttemptLogin());
this._addButtons = [];
this.SetStyle("font-size:large"); 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; const self = this;
for (const layer of State.state.filteredLayers.data) { for (const layer of State.state.filteredLayers.data) {
this.ListenTo(layer.isDisplayed);
const presets = layer.layerDef.presets; const presets = layer.layerDef.presets;
for (const preset of presets) { for (const preset of presets) {
const tags = TagUtils.KVtoProperties(preset.tags ?? []); const tags = TagUtils.KVtoProperties(preset.tags ?? []);
@ -77,13 +205,6 @@ export default class SimpleAddUI extends UIElement {
]) ])
).onClick( ).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({ self._confirmPreset.setData({
tags: preset.tags, tags: preset.tags,
layerToAddTo: layer, layerToAddTo: layer,
@ -94,23 +215,10 @@ export default class SimpleAddUI extends UIElement {
self.Update(); 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[]) { 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();
}
} }

View file

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

View file

@ -309,14 +309,24 @@
"gl": "Engadir {category} aquí", "gl": "Engadir {category} aquí",
"de": "Hier eine neue {category} hinzufügen" "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": { "pleaseLogin": {
"en": "<a class='activate-osm-authentication'>Please log in to add a new point</a>", "en": "<a class='activate-osm-authentication'>Please log in to add a new point</a>",