diff --git a/Logic/InstalledThemes.ts b/Logic/InstalledThemes.ts index 373636c5d..704a41386 100644 --- a/Logic/InstalledThemes.ts +++ b/Logic/InstalledThemes.ts @@ -4,18 +4,9 @@ import {UIEventSource} from "./UIEventSource"; import {OsmConnection} from "./Osm/OsmConnection"; export default class InstalledThemes { - - private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]){ - // for (const invalid of invalidThemes) { - // console.error("Attempting to remove ", invalid) - // osmConnection.GetLongPreference( - // "installed-theme-" + invalid - // ).setData(null); - // } - } - - static InstalledThemes(osmConnection: OsmConnection) : UIEventSource<{ layout: LayoutConfig; definition: string }[]>{ - return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => { + + static InstalledThemes(osmConnection: OsmConnection): UIEventSource<{ layout: LayoutConfig; definition: string }[]> { + return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => { const installedThemes: { layout: LayoutConfig, definition: string }[] = []; if (allPreferences === undefined) { console.log("All prefs is undefined"); @@ -31,8 +22,7 @@ export default class InstalledThemes { continue; } try { - var json = atob(customLayout.data); - console.log("Found a theme:",json); + const json = atob(customLayout.data); const layout = new LayoutConfig( JSON.parse(json)); installedThemes.push({ @@ -53,5 +43,14 @@ export default class InstalledThemes { }); } - + + private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]) { + for (const invalid of invalidThemes) { + console.error("Attempting to remove ", invalid) + osmConnection.GetLongPreference( + "installed-theme-" + invalid + ).setData(null); + } + } + } \ No newline at end of file diff --git a/State.ts b/State.ts index 65b3d764f..61f3480e7 100644 --- a/State.ts +++ b/State.ts @@ -152,7 +152,6 @@ export default class State { this.layoutToUse.data.defaultBackgroundId ?? AvailableBaseLayers.osmCarto.id, "The id of the background layer to start with") .map((selectedId: string) => { - console.log("SELECTED ID", selectedId) const available = self.availableBackgroundLayers.data; for (const layer of available) { if (layer.id === selectedId) { diff --git a/UI/PersonalLayersPanel.ts b/UI/PersonalLayersPanel.ts index bbb0fb1c5..9cdac9a47 100644 --- a/UI/PersonalLayersPanel.ts +++ b/UI/PersonalLayersPanel.ts @@ -1,16 +1,15 @@ -import {UIElement} from "../UI/UIElement"; +import {UIElement} from "./UIElement"; import State from "../State"; import Translations from "../UI/i18n/Translations"; -import {UIEventSource} from "./UIEventSource"; import {AllKnownLayouts} from "../Customizations/AllKnownLayouts"; import Combine from "../UI/Base/Combine"; import CheckBox from "../UI/Input/CheckBox"; import * as personal from "../assets/themes/personalLayout/personalLayout.json"; -import {SubtleButton} from "../UI/Base/SubtleButton"; -import {FixedUiElement} from "../UI/Base/FixedUiElement"; -import {Img} from "../UI/Img"; +import {SubtleButton} from "./Base/SubtleButton"; +import {FixedUiElement} from "./Base/FixedUiElement"; import Svg from "../Svg"; import LayoutConfig from "../Customizations/JSON/LayoutConfig"; +import {UIEventSource} from "../Logic/UIEventSource"; export class PersonalLayersPanel extends UIElement { private checkboxes: UIElement[] = []; @@ -22,7 +21,7 @@ export class PersonalLayersPanel extends UIElement { this.UpdateView([]); const self = this; State.state.installedThemes.addCallback(extraThemes => { - self.UpdateView(extraThemes.map(layout => layout.layout.layoutConfig)); + self.UpdateView(extraThemes.map(layout => layout.layout)); self.Update(); }) } @@ -56,12 +55,12 @@ export class PersonalLayersPanel extends UIElement { if (typeof layer === "string") { continue; } - let icon = layer.icon ?? Img.AsData(Svg.checkmark); - let iconUnset = layer.icon ?? ""; - if (layer.icon !== undefined && typeof (layer.icon) !== "string") { - icon = layer.icon.GetRenderValue({"id": "node/-123456"}).txt ?? Img.AsData(Svg.checkmark) - iconUnset = icon; - } + let icon :UIElement = layer.GenerateLeafletStyle(new UIEventSource({id:"node/-1"}), false).icon.html + ?? Svg.checkmark_svg(); + let iconUnset =new FixedUiElement(icon.Render()); + icon.SetClass("single-layer-selection-toggle") + iconUnset.SetClass("single-layer-selection-toggle") + let name = layer.name ?? layer.id; if (name === undefined) { @@ -74,15 +73,13 @@ export class PersonalLayersPanel extends UIElement { layer.description !== undefined ? new Combine(["
", layer.description]) : "", ]) - const iconImage = ``; - const iconUnsetImage = `` const cb = new CheckBox( new SubtleButton( - new FixedUiElement(iconImage).SetStyle(""), + icon, content), new SubtleButton( - new FixedUiElement(iconUnsetImage).SetStyle("opacity:0.1;"), + iconUnset.SetStyle("opacity:0.1"), new Combine(["", content, ""