Fix #691

UI/BigComponents/ExtraLinkButton.ts

@@ -2,46 +2,48 @@ import {UIElement} from "../UIElement";
 import BaseUIElement from "../BaseUIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig";
-import MapControlButton from "../MapControlButton";
-import Link from "../Base/Link";
 import Img from "../Base/Img";
 import {SubtleButton} from "../Base/SubtleButton";
 import Toggle from "../Input/Toggle";
 import Loc from "../../Models/Loc";
 import Locale from "../i18n/Locale";
 import {Utils} from "../../Utils";
+import Svg from "../../Svg";
+import Translations from "../i18n/Translations";
+import {Translation} from "../i18n/Translation";
 
-export default class ExtraLinkButton extends UIElement{
+export default class ExtraLinkButton extends UIElement {
     private readonly _config: ExtraLinkConfig;
     private readonly state: {
-        layoutToUse: {id: string};
-        featureSwitchWelcomeMessage: UIEventSource<boolean>, locationControl: UIEventSource<Loc>};
+        layoutToUse: { id: string, title: Translation };
+        featureSwitchWelcomeMessage: UIEventSource<boolean>, locationControl: UIEventSource<Loc>
+    };
 
-    constructor(state:  {featureSwitchWelcomeMessage: UIEventSource<boolean>, locationControl: UIEventSource<Loc>, layoutToUse: {id: string}}, 
+    constructor(state: { featureSwitchWelcomeMessage: UIEventSource<boolean>, locationControl: UIEventSource<Loc>, layoutToUse: { id: string, title: Translations } },
                 config: ExtraLinkConfig) {
         super();
         this.state = state;
         this._config = config;
     }
 
-    protected InnerRender():  BaseUIElement {
-        if(this._config === undefined){
+    protected InnerRender(): BaseUIElement {
+        if (this._config === undefined) {
             return undefined;
         }
-        
+
         const c = this._config;
 
         const isIframe = window !== window.top
 
-        if(c.requirements.has("iframe") && !isIframe){
+        if (c.requirements.has("iframe") && !isIframe) {
             return undefined
         }
 
-        if(c.requirements.has("no-iframe") && isIframe){
+        if (c.requirements.has("no-iframe") && isIframe) {
             return undefined
         }
 
-        let link : BaseUIElement
+        let link: BaseUIElement
         const theme = this.state.layoutToUse?.id ?? ""
         const href = this.state.locationControl.map(loc => {
             const subs = {
@@ -51,31 +53,35 @@ export default class ExtraLinkButton extends UIElement{
             }
             return Utils.SubstituteKeys(c.href, subs)
         })
-        
-        if(c.text === undefined){
-            link = new MapControlButton(
-                new Link(new Img(c.icon), href, c.newTab).SetClass("block w-full h-full p-1.5")
-            )
-        }else {
-            let img : BaseUIElement = undefined
-            if(c.icon !== undefined){
-                img = new Img(c.icon).SetClass("h-6")
-            }
-            
-            link = new SubtleButton(img,c.text, {url:
-                href,
-                newTab: c.newTab})
+
+
+        let img: BaseUIElement = Svg.pop_out_ui()
+        if (c.icon !== undefined) {
+            img = new Img(c.icon).SetClass("h-6")
         }
-        
-        if(c.requirements.has("no-welcome-message")){
+
+        let text: Translation
+        if (c.text === undefined) {
+            text = Translations.t.general.screenToSmall.Fuse(this.state.layoutToUse.title, "{theme}")
+        } else {
+            text = c.text.Clone()
+        }
+
+        link = new SubtleButton(img, text, {
+            url:
+            href,
+            newTab: c.newTab
+        })
+
+        if (c.requirements.has("no-welcome-message")) {
             link = new Toggle(undefined, link, this.state.featureSwitchWelcomeMessage)
         }
 
-        if(c.requirements.has("welcome-message")){
-            link = new Toggle(link, undefined,  this.state.featureSwitchWelcomeMessage)
+        if (c.requirements.has("welcome-message")) {
+            link = new Toggle(link, undefined, this.state.featureSwitchWelcomeMessage)
         }
-        
+
         return link;
     }
-    
+
 }

UI/DefaultGUI.ts

@@ -25,6 +25,7 @@ import Combine from "./Base/Combine";
 import AddNewMarker from "./BigComponents/AddNewMarker";
 import FilteredLayer from "../Models/FilteredLayer";
 import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
+import {SubtleButton} from "./Base/SubtleButton";
 
 
 /**
@@ -163,11 +164,22 @@ export default class DefaultGUI {
                 () => new UserBadge(state)
             ),
             Toggle.If(state.featureSwitchExtraLinkEnabled,
-                () => new ExtraLinkButton(state, state.layoutToUse.extraLink)
+                () => {
+                    if (state.layoutToUse.extraLink.text === undefined) {
+                        return Translations.t.general.screenToSmall
+                    }
+                    return new ExtraLinkButton(state, state.layoutToUse.extraLink);
+                }
             )
         ]).SetClass("flex flex-col")
             .AttachTo("userbadge")
 
+        const el = state.layoutToUse.extraLink
+        new Combine([
+            new ExtraLinkButton(state, {...state.layoutToUse.extraLink, newTab: true})
+        ]).SetClass("flex items-center justify-center normal-background h-full")
+            .AttachTo("on-small-screen")
+
         Toggle.If(state.featureSwitchSearch,
             () => new SearchAndGo(state))
             .AttachTo("searchbox");