Add layer-control-toggle to the URL bar and in the share-screen, fix #90

InitUiElements.ts

@@ -127,7 +127,10 @@ export class InitUiElements {
 
         InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
 
-            const checkbox = new CheckBox(layerControl, closedFilterButton);
+            const checkbox = new CheckBox(layerControl, closedFilterButton,
+                QueryParameters.GetQueryParameter("layer-control-toggle", "false")
+                    .map((str) => str !== "false", [], b => "" + b)
+            );
             checkbox.AttachTo("filter__selection");
             State.state.bm.Location.addCallback(() => {
                 checkbox.isEnabled.setData(false);

UI/CustomThemeGenerator/ThemeGenerator.ts

@@ -441,10 +441,14 @@ export class ThemeGenerator extends UIElement {
     private readonly allQuestionFields: UIElement[];
     public url: UIEventSource<string>;
 
+    private loginButton: Button
 
     constructor(connection: OsmConnection, windowHash) {
         super(connection.userDetails);
         this.userDetails = connection.userDetails;
+        this.loginButton = new Button("Log in with OSM", () => {
+            connection.AttemptLogin()
+        })
 
         const defaultTheme = {layers: [], icon: "./assets/bug.svg"};
         let loadedTheme = undefined;
@@ -573,7 +577,7 @@ export class ThemeGenerator extends UIElement {
     InnerRender(): string {
 
         if (!this.userDetails.data.loggedIn) {
-            return "Not logged in. You need to be logged in to create a theme."
+            return new Combine(["Not logged in. You need to be logged in to create a theme.", this.loginButton]).Render();
         }
         if (this.userDetails.data.csCount < 500) {
             return "You need at least 500 changesets to create your own theme.";

UI/ShareScreen.ts

@@ -97,7 +97,8 @@ export class ShareScreen extends UIElement {
             {urlName: "fs-welcome-message", human: "Enable the welcome message"},
             {urlName: "fs-layers", human: "Enable layer control"},
             {urlName: "fs-add-new", human: "Enable the 'add new POI' button"},
-            {urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"}
+            {urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"},
+            {urlName: "layer-control-toggle", human: "Start with the layer control expanded", reverse:true}
         ]
 
 
@@ -106,13 +107,19 @@ export class ShareScreen extends UIElement {
             const checkbox = new CheckBox(
                 new Combine([Img.checkmark, swtch.human]),
                 new Combine([Img.no_checkmark, swtch.human]),
-                true
+                swtch.reverse ? false : true
             );
             optionCheckboxes.push(checkbox);
             optionParts.push(checkbox.isEnabled.map((isEn) => {
                 if (isEn) {
+                    if(swtch.reverse){
+                       return `${swtch.urlName}=true`
+                    }
                     return null;
                 } else {
+                    if(swtch.reverse){
+                        return null;
+                    }
                     return `${swtch.urlName}=false`
                 }
             }))
@@ -127,7 +134,8 @@ export class ShareScreen extends UIElement {
             
             let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.name + ".html"
 
-            const parts = Utils.NoNull(optionParts.map((eventSource) => eventSource.data));
+            const parts = 
+                Utils.NoEmpty(Utils.NoNull(optionParts.map((eventSource) => eventSource.data)));
 
             let hash = "";
             if (State.state.layoutDefinition !== undefined) {
@@ -136,6 +144,7 @@ export class ShareScreen extends UIElement {
                 parts.push("userlayout=true");
             }
             
+
             if (parts.length === 0) {
                 return literalText + hash;
             }

Utils.ts

@@ -47,6 +47,17 @@ export class Utils {
         return ls;
     }
     
+    public static NoEmpty(array: string[]): string[]{
+        const ls: string[] = [];
+        for (const t of array) {
+            if (t === "") {
+                continue;
+            }
+            ls.push(t);
+        }
+        return ls;
+    }
+
     public static CreateLanguagePicker(label: string | UIElement = "") {
 
         return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => {