From 77ffdc093af6a8b89bbaac3ff9c6450e11d30d71 Mon Sep 17 00:00:00 2001
From: pietervdvn MapComplete is an OpenStreetMap editor that is meant to help everyone to easily add information on a single theme. Only features relevant to a single theme are shown with a few predefined questions, in order to keep things simple and extremly user-friendly.The theme maintainer can also choose a language for the interface, choose to disable elements or even to embed it into a different website without any UI-element at all. However, another important part of MapComplete is to always offer the next step to learn more about OpenStreetMap:Custom themes
These are previously visited user-generated themes.","nl":"Onofficiële thema's
De onderstaande thema's heb je eerder bezocht en zijn gemaakt door andere OpenStreetMappers.","fr":"Thèmes personnalisés
Vous avez déjà visité ces thèmes personnalisés.","gl":"Temas personalizados
Estes son temas xerados por usuarios previamente visitados.","de":"Kundenspezifische Themen
Dies sind zuvor besuchte benutzergenerierte Themen"} ),
aboutMapcomplete: new Translation( {"en":"About MapComplete
Do you notice an issue with MapComplete? Do you have a feature request? Do you want to help translating? Head over to the source code or issue tracker. Follow the edit count on OsmCha
","nl":"MapComplete is een OpenStreetMap-editor om eenvoudig informatie toe te voegen over één enkel onderwerp.
Om de editor zo simpel en gebruiksvriendelijk mogelijk te houden, worden enkel objecten relevant voor het thema getoond.Voor deze objecten kunnen dan vragen beantwoord worden, of men kan een nieuw punt van dit thema toevoegen.De maker van het thema kan er ook voor opteren om een aantal elementen van de gebruikersinterface uit te schakelen of de taal ervan in te stellen.
Een ander belangrijk aspect is om bezoekers stap voor stap meer te leren over OpenStreetMap:
Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de broncode en issue tracker. Volg de edits op OsmCha
","de":"MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem Einzelthema hinzuzufügen.
Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge einfach und extrem benutzerfreundlich zu halten.Der Themen-Betreuer kann auch eine Sprache für die Schnittstelle wählen, Elemente deaktivieren oder sogar in eine andere Website ohne jegliches UI-Element einbetten.
Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer den nächsten Schritt anzubietenum mehr über OpenStreetMap zu erfahren:
Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie zum Quellcode oder zur Problemverfolgung.
"} ), backgroundMap: new Translation( {"en":"Background map","ca":"Mapa de fons","es":"Mapa de fondo","nl":"Achtergrondkaart","fr":"Carte de fonds","de":"Hintergrundkarte"} ), - zoomInToSeeThisLayer: new Translation( {"en":"Zoom in to see this layer","ca":"Amplia per veure aquesta capa","es":"Amplía para ver esta capa","nl":"Vergroot de kaart om deze laag te zien","fr":"Aggrandissez la carte pour voir cette couche","de":"Vergrößern, um diese Ebene zu sehen"} ), + layerSelection: { zoomInToSeeThisLayer: new Translation( {"en":"Zoom in to see this layer","ca":"Amplia per veure aquesta capa","es":"Amplía para ver esta capa","nl":"Vergroot de kaart om deze laag te zien","fr":"Aggrandissez la carte pour voir cette couche","de":"Vergrößern, um diese Ebene zu sehen"} ), + title: new Translation( {"en":"Select layers","nl":"Selecteer lagen"} ), +}, weekdays: { abbreviations: { monday: new Translation( {"en":"Mon","ca":"Dil","es":"Lun","nl":"Maan","fr":"Lun"} ), tuesday: new Translation( {"en":"Tue","ca":"Dim","es":"Mar","nl":"Din","fr":"Mar"} ), wednesday: new Translation( {"en":"Wed","ca":"Dic","es":"Mie","nl":"Woe","fr":"Mer"} ), diff --git a/Models/Constants.ts b/Models/Constants.ts index 24d7f72..106bec8 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -1,7 +1,7 @@ import { Utils } from "../Utils"; export default class Constants { - public static vNumber = "0.4.2"; + public static vNumber = "0.4.3"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts new file mode 100644 index 0000000..f5770d7 --- /dev/null +++ b/UI/Base/ScrollableFullScreen.ts @@ -0,0 +1,34 @@ +import {UIElement} from "../UIElement"; +import Svg from "../../Svg"; +import State from "../../State"; +import Combine from "./Combine"; + +/** + * Wraps some contents into a panel that scrolls the content _under_ the title + */ +export default class ScrollableFullScreen extends UIElement{ + private _component: Combine; + + + constructor(title: UIElement, content: UIElement) { + super(); + const returnToTheMap = Svg.back_svg().onClick(() => { + State.state.fullScreenMessage.setData(undefined); + State.state.selectedElement.setData(undefined); + }).SetClass("only-on-mobile") + .SetClass("featureinfobox-back-to-the-map") + + this._component = new Combine([ + new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"), + new Combine([content]).SetClass("featureinfobox-content") + ]) + this.SetClass("featureinfobox"); + + } + + InnerRender(): string { + return this._component.Render(); + } + + +} \ No newline at end of file diff --git a/UI/BigComponents/LayerControlPanel.ts b/UI/BigComponents/LayerControlPanel.ts index 2330bee..76f7ac4 100644 --- a/UI/BigComponents/LayerControlPanel.ts +++ b/UI/BigComponents/LayerControlPanel.ts @@ -3,6 +3,8 @@ import State from "../../State"; import BackgroundSelector from "./BackgroundSelector"; import LayerSelection from "./LayerSelection"; import Combine from "../Base/Combine"; +import {FixedUiElement} from "../Base/FixedUiElement"; +import ScrollableFullScreen from "../Base/ScrollableFullScreen"; import Translations from "../i18n/Translations"; export default class LayerControlPanel extends UIElement { @@ -11,7 +13,7 @@ export default class LayerControlPanel extends UIElement { constructor() { super(); - let layerControlPanel: UIElement = undefined; + let layerControlPanel: UIElement = new FixedUiElement(""); if (State.state.layoutToUse.data.enableBackgroundLayerSelection) { layerControlPanel = new BackgroundSelector(); layerControlPanel.SetStyle("margin:1em"); @@ -27,16 +29,9 @@ export default class LayerControlPanel extends UIElement { } - const backButton = new Combine([ - new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")]) - .SetClass("to-the-map-inner") + const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title") - ]).SetClass("only-on-mobile") - .onClick(() => State.state.fullScreenMessage.setData(undefined)); - - layerControlPanel = new Combine([layerControlPanel , backButton]); - - this._panel = layerControlPanel; + this._panel = new ScrollableFullScreen(title, layerControlPanel); } InnerRender(): string { diff --git a/UI/BigComponents/LayerSelection.ts b/UI/BigComponents/LayerSelection.ts index f914a18..f38b8ca 100644 --- a/UI/BigComponents/LayerSelection.ts +++ b/UI/BigComponents/LayerSelection.ts @@ -36,14 +36,14 @@ export default class LayerSelection extends UIElement { const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => { if (location.zoom < layer.layerDef.minzoom) { - return Translations.t.general.zoomInToSeeThisLayer + return Translations.t.general.layerSelection.zoomInToSeeThisLayer .SetClass("alert") .SetStyle("display: block ruby;width:min-content;") .Render(); } return "" })) - const style = "display:flex;align-items:center;" + const style = "display:flex;align-items:center;flex-wrap:wrap;" this._checkboxes.push(new CheckBox( new Combine([icon, name, zoomStatus]).SetStyle(style), new Combine([iconUnselected, "