Add sublte-button, add different icon for popout

UI/Base/SubtleButton.ts

@@ -0,0 +1,27 @@
+import {UIElement} from "../UIElement";
+import Translations from "../i18n/Translations";
+import Combine from "./Combine";
+
+
+export class SubtleButton extends UIElement{
+    private imageUrl: string;
+    private message: UIElement;
+
+    constructor(imageUrl: string, message: string | UIElement) {
+        super(undefined);
+        this.message = Translations.W(message);
+        this.imageUrl = imageUrl;
+        
+    }
+
+    InnerRender(): string {
+        return new Combine([
+            '<span class="subtle-button">',
+            `<img src='${this.imageUrl}'>`,
+            this.message,
+            '</span>'
+        ]).Render();
+    }
+
+
+}

UI/MoreScreen.ts

@@ -7,6 +7,8 @@ import {Utils} from "../Utils";
 import {link} from "fs";
 import {UIEventSource} from "./UIEventSource";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Combine from "./Base/Combine";
+import {SubtleButton} from "./Base/SubtleButton";
 
 
 export class MoreScreen extends UIElement {
@@ -23,26 +25,27 @@ export class MoreScreen extends UIElement {
         const els: UIElement[] = []
         for (const k in AllKnownLayouts.allSets) {
             const layout = AllKnownLayouts.allSets[k]
-            if(layout.hideFromOverview){continue}
+            if (layout.hideFromOverview) {
+                continue
+            }
 
             const linkText =
-                `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}
-            `
-            const link = new FixedUiElement(
-                `
-                <span class="switch-layout">
-                 <a href="${linkText}" target="_blank">
-                <img src='${layout.icon}'>
-                 <div><b>${Utils.Upper(layout.name)}</b><br/>
-                  ${Translations.W(layout.description).Render()}</div>
-                </a>
-                </span>
-`
-            );
+                `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}`
+            const link =
+                new SubtleButton(layout.icon,
+                    new Combine([
+                        `<a href="${linkText}" target="_blank">`,
+                        "<div>",
+                        "<b>",
+                        Translations.W(layout.title),
+                        "</b>",
+                        "<br/>",
+                        Translations.W(layout.description),
+                        "</div>",
+                        "</a>"
+                    ]));
 
             els.push(link)
-
-
         }
 
 

assets/pop-out.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><path d="M485,379.5l130.6,130.6l245.8-245.8l126.9,126.9l0.2-379L607.1,10l123.8,123.7L485,379.5L485,379.5z M986.4,546.3l-94.1-95.4l1.7,441.3l-784.7,0.4l0.8-782.7l438.9-2l-98-98H108C53.9,10,10,54,10,108v784c0,54.1,43.9,98,98,98h784c54.1,0,98-43.9,98-98L986.4,546.3z"/></g></g>
+</svg>

index.css

@@ -4,6 +4,11 @@ html, body {
     padding: 0;
 }
 
+a {
+    text-decoration: unset;
+    color:unset;
+}
+
 body {
     font-family: 'Helvetica Neue', Arial, sans-serif;
 }
@@ -1187,7 +1192,7 @@ form {
 
 /** Switch layout **/
 
-.switch-layout a{
+.subtle-button{
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
@@ -1201,7 +1206,7 @@ form {
 
 }
 
-.switch-layout a img{
+.subtle-button img{
     width: 3em;
     max-height: 3em;
     margin-right: 0.5em;

index.ts

@@ -320,8 +320,9 @@ InitUiElements.OnlyIf(featureSwitchWelcomeMessage, () => {
     InitUiElements.InitWelcomeMessage(layoutToUse, osmConnection, bm, fullScreenMessage)
 });
 
-if (window != window.top || featureSwitchIframe.data !== "false") {
-    new FixedUiElement(`<a href='${window.location}' target='_blank'><span class='iframe-escape'><img src='assets/pencil.svg'></span></a>`).AttachTo("top-right")
+if ((window != window.top && featureSwitchWelcomeMessage.data === "false") || featureSwitchIframe.data !== "false") {
+    console.log("WELCOME? ",featureSwitchWelcomeMessage.data)
+    new FixedUiElement(`<a href='${window.location}' target='_blank'><span class='iframe-escape'><img src='assets/pop-out.svg'></span></a>`).AttachTo("top-right")
 }