Fixes to the personal theme

Logic/LayerUpdater.ts

@@ -20,11 +20,13 @@ export class LayerUpdater {
      */
     private readonly previousBounds: Map<number, Bounds[]> = new Map<number, Bounds[]>();
 
+    private readonly state: State;
+    
     /**
      * The most important layer should go first, as that one gets first pick for the questions
      */
     constructor(state: State) {
-
+        this.state = state;
         const self = this;
 
         this.sufficentlyZoomed = State.state.locationControl.map(location => {
@@ -178,6 +180,7 @@ export class LayerUpdater {
         for (let i = 0; i < 25; i++) {
             this.previousBounds.set(i, []);
         }
+        this.update(this.state);
     }
 
 }

Logic/Osm/ChangesetHandler.ts

@@ -6,11 +6,11 @@ import {State} from "../../State";
 
 export class ChangesetHandler {
 
-    private _dryRun: boolean;
-    private userDetails: UIEventSource<UserDetails>;
-    private auth: any;
+    private readonly _dryRun: boolean;
+    private readonly userDetails: UIEventSource<UserDetails>;
+    private readonly auth: any;
 
-    public currentChangeset: UIEventSource<string>;
+    public readonly currentChangeset: UIEventSource<string>;
 
     constructor(layoutName: string, dryRun: boolean, osmConnection: OsmConnection, auth) {
         this._dryRun = dryRun;
@@ -29,6 +29,12 @@ export class ChangesetHandler {
         allElements: ElementStorage,
         generateChangeXML: (csid: string) => string,
          continuation: () => void) {
+        
+        if(this.userDetails.data.csCount == 0){
+            // The user became a contributor!
+            this.userDetails.data.csCount = 1;
+            this.userDetails.ping();
+        }
 
         if (this._dryRun) {
             const changesetXML = generateChangeXML("123456");

Logic/Osm/OsmPreferences.ts

@@ -65,17 +65,16 @@ export class OsmPreferences {
                 source.setData(undefined);
                 return;
             }
-            if (l > 25) {
+            const prefsCount = Number(l);
+            if (prefsCount > 100) {
                 throw "Length to long";
             }
-            const prefsCount = Number(l);
             let str = "";
             for (let i = 0; i < prefsCount; i++) {
                 str += self.GetPreference(allStartWith + "-" + i, "").data;
             }
 
             source.setData(str);
-            source.ping();
             console.log("Long preference", key, "has", str.length, "chars");
         }
 

Logic/PersonalLayersPanel.ts

@@ -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();
     }