midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Duplicate elements in layerselection to fix dissapearing elements

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-06 17:23:22 +02:00
parent eab3cc6b98
commit fe747dbfb4
2 changed files with 22 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
UI/BigComponents/LayerSelection.ts
View file

@ -6,6 +6,7 @@ import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import BaseUIElement from "../BaseUIElement";
import {Translation} from "../i18n/Translation";
/**
* Shows the panel with all layers and a toggle for each of them
@ -29,18 +30,21 @@ export default class LayerSelection extends Combine {
const leafletStyle = layer.layerDef.GenerateLeafletStyle(
new UIEventSource<any>({id: "node/-1"}),
false)
const leafletStyleNa = layer.layerDef.GenerateLeafletStyle(
new UIEventSource<any>({id: "node/-1"}),
false)
const icon = new Combine([leafletStyle.icon.html]).SetClass("single-layer-selection-toggle")
let iconUnselected: BaseUIElement = new Combine([leafletStyle.icon.html])
let iconUnselected: BaseUIElement = new Combine([leafletStyleNa.icon.html])
.SetClass("single-layer-selection-toggle")
.SetStyle("opacity:0.2;");
const name = Translations.WT(layer.layerDef.name)?.Clone()
?.SetStyle("font-size:large;margin-left: 0.5em;");
if ((name ?? "") === "") {
continue
if (layer.layerDef.name === undefined) {
continue;
}
const name: Translation = Translations.WT(layer.layerDef.name)?.Clone()
name.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.layerSelection.zoomInToSeeThisLayer.Clone()
@ -49,12 +53,21 @@ export default class LayerSelection extends Combine {
}
return ""
}))
const zoomStatusNonActive = new VariableUiElement(State.state.locationControl.map(location => {
if (location.zoom < layer.layerDef.minzoom) {
return Translations.t.general.layerSelection.zoomInToSeeThisLayer.Clone()
.SetClass("alert")
.SetStyle("display: block ruby;width:min-content;")
}
return ""
}))
const style = "display:flex;align-items:center;"
const styleWhole = "display:flex; flex-wrap: wrap"
checkboxes.push(new Toggle(
new Combine([new Combine([icon, name]).SetStyle(style), zoomStatus])
new Combine([new Combine([icon, name.Clone()]).SetStyle(style), zoomStatus])
.SetStyle(styleWhole),
new Combine([new Combine([iconUnselected, "<del>", name, "</del>"]).SetStyle(style), zoomStatus])
new Combine([new Combine([iconUnselected, "<del>", name.Clone(), "</del>"]).SetStyle(style), zoomStatusNonActive])
.SetStyle(styleWhole),
layer.isDisplayed).ToggleOnClick()
.SetStyle("margin:0.3em;")