midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests 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
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;")
);