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

More refactoring, stuff kindoff works

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-12 02:58:32 +02:00
parent 62f471df1e
commit 3943100e54
52 changed files with 635 additions and 1010 deletions
Download patch file Download diff file Expand all files Collapse all files

41
UI/BigComponents/LayerSelection.ts
View file

@ -1,56 +1,43 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import State from "../../State";
import Toggle from "../Input/Toggle";
import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import BaseUIElement from "../BaseUIElement";
/**
* Shows the panel with all layers and a toggle for each of them
*/
export default class LayerSelection extends UIElement {
export default class LayerSelection extends Combine {
private _checkboxes: UIElement[];
private activeLayers: UIEventSource<{
readonly isDisplayed: UIEventSource<boolean>,
readonly layerDef: LayerConfig;
}[]>;
constructor(activeLayers: UIEventSource<{
readonly isDisplayed: UIEventSource<boolean>,
readonly layerDef: LayerConfig;
}[]>) {
super(activeLayers);
if(activeLayers === undefined){
if (activeLayers === undefined) {
throw "ActiveLayers should be defined..."
}
this.activeLayers = activeLayers;
}
InnerRender(): string {
const checkboxes: BaseUIElement[] = [];
this._checkboxes = [];
for (const layer of this.activeLayers.data) {
for (const layer of activeLayers.data) {
const leafletStyle = layer.layerDef.GenerateLeafletStyle(
new UIEventSource<any>({id: "node/-1"}),
false)
const leafletHtml = leafletStyle.icon.html;
const icon =
new FixedUiElement(leafletHtml.Render())
.SetClass("single-layer-selection-toggle")
let iconUnselected: UIElement = new FixedUiElement(leafletHtml.Render())
const icon = new Combine([leafletStyle.icon.html]).SetClass("single-layer-selection-toggle")
let iconUnselected: BaseUIElement = new Combine([leafletStyle.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 ?? "") === ""){
if ((name ?? "") === "") {
continue
}
@ -59,13 +46,12 @@ export default class LayerSelection extends UIElement {
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 styleWhole = "display:flex; flex-wrap: wrap"
this._checkboxes.push(new Toggle(
checkboxes.push(new Toggle(
new Combine([new Combine([icon, name]).SetStyle(style), zoomStatus])
.SetStyle(styleWhole),
new Combine([new Combine([iconUnselected, "<del>", name, "</del>"]).SetStyle(style), zoomStatus])
@ -76,9 +62,8 @@ export default class LayerSelection extends UIElement {
}
return new Combine(this._checkboxes)
.SetStyle("display:flex;flex-direction:column;")
.Render();
}
super(checkboxes)
this.SetStyle("display:flex;flex-direction:column;")
}
}