Cleaning away fullscreenmessage

UI/Base/ScrollableFullScreen.ts

@@ -11,22 +11,23 @@ export default class ScrollableFullScreen extends UIElement {
     private _component: Combine;
 
 
-    constructor(title: UIElement, content: UIElement) {
+    constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
         super();
         const returnToTheMap = Svg.back_svg().onClick(() => {
-            State.state.fullScreenMessage.setData(undefined);
-            State.state.selectedElement.setData(undefined);
-        }).SetClass("only-on-mobile")
+            onClose();
+        }).SetClass("sm:hidden")
             .SetClass("featureinfobox-back-to-the-map")
         title.SetStyle("width: 100%; display: block;")
-        const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
+        const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
+            .SetClass("block sm:hidden")
 
         this._component = new Combine([
-            new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
-            new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
-            // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
+            new Combine([returnToTheMap, title])
+                .SetClass("text-xl break-words"),
+            new Combine([content, ornament])
+                
         ])
-        this.SetClass("featureinfobox");
+        this.SetClass("fixed h-screen w-screen fixed sm:relative");
 
     }
 

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -15,8 +15,7 @@ import {TabbedComponent} from "../Base/TabbedComponent";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
 import UserDetails from "../../Logic/Osm/OsmConnection";
-import {FixedUiElement} from "../Base/FixedUiElement";
-import CombinedInputElement from "../Input/CombinedInputElement";
+import ScrollableFullScreen from "../Base/ScrollableFullScreen";
 
 export default class FullWelcomePaneWithTabs extends UIElement {
     private readonly _layoutToUse: UIEventSource<LayoutConfig>;
@@ -24,7 +23,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
 
     private readonly _component: UIElement;
 
-    constructor() {
+    constructor(onClose: () => void) {
         super(State.state.layoutToUse);
         this._layoutToUse = State.state.layoutToUse;
         this._userDetails = State.state.osmConnection.userDetails;
@@ -71,14 +70,13 @@ export default class FullWelcomePaneWithTabs extends UIElement {
         const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
             .ListenTo(this._userDetails);
 
-        const backButton = new Combine([
-            new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
-                .SetClass("to-the-map-inner")
-                
-        ]).SetClass("only-on-mobile")
-            .onClick(() => State.state.fullScreenMessage.setData(undefined));
+       
 
-        this._component = new Combine([tabbedPart, backButton]).SetStyle("width:100%;");
+        this._component = new ScrollableFullScreen(
+            layoutToUse.title,
+            tabbedPart,
+            onClose
+        )
     }
 
     InnerRender(): string {

UI/BigComponents/LayerControlPanel.ts

@@ -11,7 +11,7 @@ export default class LayerControlPanel extends UIElement {
     private readonly _panel: UIElement;
 
 
-    constructor() {
+    constructor(onClose: () => void) {
         super();
         let layerControlPanel: UIElement = new FixedUiElement("");
         if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
@@ -31,7 +31,9 @@ export default class LayerControlPanel extends UIElement {
 
         const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title")
 
-        this._panel = new ScrollableFullScreen(title, layerControlPanel);
+        this._panel = new ScrollableFullScreen(title, layerControlPanel, () => {
+            onClose
+        });
     }
 
     InnerRender(): string {

UI/BigComponents/SimpleAddUI.ts

@@ -37,7 +37,7 @@ export default class SimpleAddUI extends UIElement {
     private readonly goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(),
         Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false});
 
-    constructor() {
+    constructor(onClose: () => void) {
         super(State.state.locationControl.map(loc => loc.zoom));
         const self = this;
         this.ListenTo(Locale.language);
@@ -61,17 +61,17 @@ export default class SimpleAddUI extends UIElement {
         this.openLayerControl = new SubtleButton(Svg.layers_ui(),
             Translations.t.general.add.openLayerControl
         ).onClick(() => {
-            State.state.fullScreenMessage.setData(undefined);
             State.state.layerControlIsOpened.setData(true);
         })
+        
+        this._component = new ScrollableFullScreen(
+            Translations.t.general.add.title,
+            this.CreateContent(),
+            onClose
+        );
     }
 
     InnerRender(): string {
-
-        this._component = new ScrollableFullScreen(
-            Translations.t.general.add.title,
-            this.CreateContent()
-        )
         return this._component.Render();
 
     }

UI/CustomGenerator/AllLayersPanel.ts

@@ -68,7 +68,7 @@ export default class AllLayersPanel extends UIElement {
                     const layer = config.layers[i];
                     if (typeof layer !== "string") {
                         try {
-                            const iconTagRendering = new TagRenderingConfig(layer.icon, undefined, "icon")
+                            const iconTagRendering = new TagRenderingConfig(layer["icon"], undefined, "icon")
                             const icon = iconTagRendering.GetRenderValue({"id": "node/-1"}).txt;
                             return `<img src='${icon}'>`
                         } catch (e) {

UI/Popup/FeatureInfoBox.ts

@@ -16,7 +16,8 @@ export default class FeatureInfoBox extends UIElement {
     
     constructor(
         tags: UIEventSource<any>,
-        layerConfig: LayerConfig
+        layerConfig: LayerConfig,
+        onClose: () => {}
     ) {
         super();
         if (layerConfig === undefined) {
@@ -60,7 +61,7 @@ export default class FeatureInfoBox extends UIElement {
             new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title")
         ])
 
-        this._component = new ScrollableFullScreen(titleBar, content)
+        this._component = new ScrollableFullScreen(titleBar, content, onClose)
     }
 
     InnerRender(): string {

UI/ShowDataLayer.ts

@@ -126,7 +126,7 @@ export default class ShowDataLayer {
 
 
         const tags = State.state.allElements.getEventSourceFor(feature);
-        const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer),
+        const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer, () => popup.closePopup()),
             "<div style='height: 90vh'>Rendering</div>");
         popup.setContent(uiElement.Render());
         popup.on('remove', () => {