From 65a4303dd67218a5f08df127b2813e377b4a8f10 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 5 May 2023 01:00:15 +0200
Subject: [PATCH] Style: Allow a layer to open the popup-view in a floatover

---
 Models/ThemeConfig/Json/LayerConfigJson.ts | 5 +++++
 Models/ThemeConfig/LayerConfig.ts          | 3 +++
 UI/ThemeViewGUI.svelte                     | 8 +++++++-
 assets/layers/last_click/last_click.json   | 1 +
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/Models/ThemeConfig/Json/LayerConfigJson.ts b/Models/ThemeConfig/Json/LayerConfigJson.ts
index 2d6744967b..de2c24aa6a 100644
--- a/Models/ThemeConfig/Json/LayerConfigJson.ts
+++ b/Models/ThemeConfig/Json/LayerConfigJson.ts
@@ -399,4 +399,9 @@ export interface LayerConfigJson {
      * no-question-hint-check: disables a check in MiscTagRenderingChecks which complains about 'div', 'span' or 'class=subtle'-HTML elements in the tagRendering
      */
     "#"?: string | "no-question-hint-check"
+
+    /**
+     * If set, open the selectedElementView in a floatOver instead of on the right
+     */
+    popupInFloatover?: boolean
 }
diff --git a/Models/ThemeConfig/LayerConfig.ts b/Models/ThemeConfig/LayerConfig.ts
index b81bf244d6..2cc58b5d57 100644
--- a/Models/ThemeConfig/LayerConfig.ts
+++ b/Models/ThemeConfig/LayerConfig.ts
@@ -69,6 +69,7 @@ export default class LayerConfig extends WithContextLoader {
     public readonly syncSelection: typeof LayerConfig.syncSelectionAllowed[number] // this is a trick to conver a constant array of strings into a type union of these values
 
     public readonly _needsFullNodeDatabase = false
+    public readonly popupInFloatover
 
     constructor(json: LayerConfigJson, context?: string, official: boolean = true) {
         context = context + "." + json.id
@@ -414,6 +415,8 @@ export default class LayerConfig extends WithContextLoader {
                 ": showIf. Did you mean 'isShown' instead?"
             )
         }
+        this.popupInFloatover = json.popupInFloatover ?? false
+
     }
 
     public defaultIcon(): BaseUIElement | undefined {
diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte
index 77c72ddab1..daea207412 100644
--- a/UI/ThemeViewGUI.svelte
+++ b/UI/ThemeViewGUI.svelte
@@ -121,12 +121,18 @@
   </If>
 </div>
 
-<If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined,[ selectedLayer] )}>
+<If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
   <ModalRight on:close={() => {selectedElement.setData(undefined)}}>
     <ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
   </ModalRight>
 </If>
 
+<If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined && selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
+  <FloatOver on:close={() => {selectedElement.setData(undefined)}}>
+    <ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
+  </FloatOver>
+</If>
+
 <If condition={state.guistate.themeIsOpened}>
   <!-- Theme page -->
   <FloatOver on:close={() => state.guistate.themeIsOpened.setData(false)}>
diff --git a/assets/layers/last_click/last_click.json b/assets/layers/last_click/last_click.json
index c74fe83704..4ba8033cf1 100644
--- a/assets/layers/last_click/last_click.json
+++ b/assets/layers/last_click/last_click.json
@@ -10,6 +10,7 @@
   },
   "name": null,
   "titleIcons": [],
+  "popupInFloatover": true,
   "title": {
     "mappings": [
       {