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

Fixes to the personal theme

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-15 02:29:31 +02:00
parent ce1568f2bb
commit 9e6460030b
11 changed files with 126 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

71
Logic/PersonalLayersPanel.ts
View file

@ -4,19 +4,18 @@ import Translations from "../UI/i18n/Translations";
import {UIEventSource} from "./UIEventSource";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
import Combine from "../UI/Base/Combine";
import {Img} from "../UI/Img";
import {CheckBox} from "../UI/Input/CheckBox";
import {PersonalLayout} from "./PersonalLayout";
import {Layout} from "../Customizations/Layout";
import {SubtleButton} from "../UI/Base/SubtleButton";
import {FixedUiElement} from "../UI/Base/FixedUiElement";
export class PersonalLayersPanel extends UIElement {
private checkboxes: UIElement[] = [];
constructor() {
super(State.state.favouriteLayers);
this.ListenTo(State.state.osmConnection.userDetails);
this.ListenTo(State.state.favouriteLayers);
this.UpdateView([]);
const self = this;
@ -32,7 +31,6 @@ export class PersonalLayersPanel extends UIElement {
const favs = State.state.favouriteLayers.data ?? [];
const controls = new Map<string, UIEventSource<boolean>>();
const allLayouts = AllKnownLayouts.layoutsList.concat(extraThemes);
console.log("ALL LAYOUTS", allLayouts)
for (const layout of allLayouts) {
if (layout.id === PersonalLayout.NAME) {
continue;
@ -40,50 +38,41 @@ export class PersonalLayersPanel extends UIElement {
const header =
new Combine([
`<div class="custom-layer-panel-header-img"><img src='${layout.icon}'></div>`,
"<span><b>",
`<img style="max-width: 3em;max-height: 3em; float: left; padding: 0.1em; margin-right: 0.3em;" src='${layout.icon}'>`,
"<b>",
layout.title,
"</b><br/>",
layout.description ?? "",
"</span>",
], 'custom-layer-panel-header')
layout.description ?? ""
]).SetStyle("background: #eee; display: block; padding: 0.5em; border-radius:0.5em; overflow:auto;")
this.checkboxes.push(header);
for (const layer of layout.layers) {
if(typeof layer === "string"){
if (typeof layer === "string") {
continue;
}
let icon = layer.icon;
if (icon !== undefined && typeof (icon) !== "string") {
icon = icon.GetContent({"id": "node/-1"}).txt ?? "./assets/bug.svg";
let icon = layer.icon ?? "./assets/checkmark.svg";
if (typeof (icon) !== "string") {
icon = icon.GetContent({"id": "node/-1"}).txt ?? "./assets/checkmark.svg";
}
const image = (layer.icon ? `<img src='${layer.icon}'>` : Img.checkmark);
const noimage = (layer.icon ? `<img src='${layer.icon}'>` : Img.no_checkmark);
let name = layer.name ?? layer.id;
if (name === undefined) {
continue;
}
if (typeof (name) !== "string") {
name = name.InnerRender();
}
const content = new Combine([
"<span>",
"<b>", name ?? "", "</b> ",
"<b>",
name,
"</b> ",
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
"</span>"])
])
const cb = new CheckBox(
new Combine([
image, content
]),
new Combine([
"<span style='opacity: 0.1'>",
noimage, "</span>",
"<del>",
content,
"</del>"
]),
new SubtleButton(icon ?? "./assets/checkmark.svg", content),
new SubtleButton(
new FixedUiElement(`<img src="${icon}">`).SetStyle("opacity:0.1"),
new Combine(["<del>",
content,
"</del>"
])),
controls[layer.id] ?? (favs.indexOf(layer.id) >= 0)
);
cb.SetClass("custom-layer-checkbox");
@ -92,6 +81,9 @@ export class PersonalLayersPanel extends UIElement {
cb.isEnabled.addCallback((isEnabled) => {
const favs = State.state.favouriteLayers;
if (isEnabled) {
if(favs.data.indexOf(layer.id)>= 0){
return; // Already added
}
favs.data.push(layer.id);
} else {
favs.data.splice(favs.data.indexOf(layer.id), 1);
@ -103,13 +95,14 @@ export class PersonalLayersPanel extends UIElement {
}
State.state.favouriteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
})
}
State.state.favouriteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
});
}
InnerRender(): string {
@ -122,7 +115,7 @@ export class PersonalLayersPanel extends UIElement {
return new Combine([
t.panelIntro,
...this.checkboxes
], "custom-layer-panel").Render();
]).Render();
}