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

2
Models/Constants.ts
View file

@ -2,7 +2,7 @@ import { Utils } from "../Utils";
export default class Constants { export default class Constants {
public static vNumber = "0.8.3"; public static vNumber = "0.8.3a";
// 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 = {

29
UI/BigComponents/LayerSelection.ts
View file

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