midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Sexier layer selection panel

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-17 19:11:16 +02:00
parent a6cc01982f
commit 0084e462e8
2 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
UI/LayerSelection.ts
View file

@ -4,6 +4,8 @@ import Combine from "./Base/Combine";
import {Img} from "./Img";
import {State} from "../State";
import Translations from "./i18n/Translations";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
export class LayerSelection extends UIElement {
@ -15,16 +17,36 @@ export class LayerSelection extends UIElement {
for (const layer of State.state.filteredLayers.data) {
const checkbox = Img.checkmark;
let icon = "";
let icon : UIElement;
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
icon = `<img width="20" height="20" src="${layer.layerDef.icon}">`
icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
}else{
icon = new FixedUiElement(Img.checkmark);
}
const name = Translations.WT(layer.layerDef.name).Clone()
.SetStyle("font-size:large;");
let iconUnselected : UIElement;
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
}else{
iconUnselected = new FixedUiElement("");
}
iconUnselected.SetStyle("opacity:0.2");
const name = Translations.WT(layer.layerDef.name).Clone()
.SetStyle("font-size:large;margin-left: 0.5em;");
const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
if(location.zoom < layer.layerDef.minzoom){
return Translations.t.general.zoomInToSeeThisLayer
.SetClass("alert")
.Render();
}
return ""
}))
this._checkboxes.push(new CheckBox(
new Combine([checkbox, icon, name]),
new Combine([Img.no_checkmark, icon, name]),
new Combine([icon, name, zoomStatus]),
new Combine([iconUnselected, "<del>",name,"</del>", zoomStatus]),
layer.isDisplayed)
.SetStyle("margin:0.3em;")
);

6
UI/i18n/Translations.ts
View file

@ -498,7 +498,7 @@ export default class Translations {
"<p>Moltes persones i aplicacions ja utilitzen OpenStreetMap: <a href='https://maps.me/' target='_blank'>Maps.me</a>, <a href='https://osmAnd.net' target='_blank'>OsmAnd</a>, però també els mapes de Facebook, Instagram, Apple i Bing són (en part) impulsats ​​per OpenStreetMap." +
"Si canvies alguna cosa aquí també es reflectirà en aquestes aplicacions en la seva propera actualització.</p>",
nl: "<h3>Een open kaart</h3>" +
"<p>Zou het niet fantastisch zijn als er een open kaart zou zijn die door iedereen aangepast én gebruikt kan worden? Een kaart iedereen zijn interesses aan zou kunnen toevoegen? " +
"<p>Zou het niet fantastisch zijn als er een open kaart zou zijn die door iedereen aangepast én gebruikt kan worden? Een kaart waar iedereen zijn interesses aan zou kunnen toevoegen? " +
"Dan zouden er geen duizend-en-één verschillende kleine kaartjes, websites, ... meer nodig zijn</p>" +
"<p><b><a href='https://OpenStreetMap.org' target='_blank'>OpenStreetMap</a></b> is deze open kaart. Je mag de kaartdata gratis gebruiken (mits <a href='https://osm.org/copyright' target='_blank'>bronvermelding en herpublicatie van aanpassingen</a>). Daarenboven mag je de kaart ook gratis aanpassen als je een account maakt. " +
"Ook deze website is gebaseerd op OpenStreetMap. Als je hier een vraag beantwoord, gaat het antwoord daar ook naartoe</p>" +
@ -791,6 +791,10 @@ export default class Translations {
"en": "Background map",
"nl": "Achtergrondkaart",
"de": "Hintergrundkarte"
}),
zoomInToSeeThisLayer: new T({
"nl":"Vergroot de kaart om deze laag te zien",
"en":"Zoom in to see this layer"
})
},
favourite: {