From 5424932f1a445d878292a6c2eeed6c34865f21b8 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 12 Apr 2024 15:03:45 +0200
Subject: [PATCH] Feature: add possibility to have a title when opening the
 popup as FloatOver

---
 .../ThemeConfig/Json/LayerConfigJson.ts       |  5 +++--
 src/Models/ThemeConfig/LayerConfig.ts         |  2 +-
 .../BigComponents/SelectedElementTitle.svelte |  3 +++
 src/UI/ThemeViewGUI.svelte                    | 22 ++++++++++++-------
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/Models/ThemeConfig/Json/LayerConfigJson.ts b/src/Models/ThemeConfig/Json/LayerConfigJson.ts
index aab3799fd..fdcc794f4 100644
--- a/src/Models/ThemeConfig/Json/LayerConfigJson.ts
+++ b/src/Models/ThemeConfig/Json/LayerConfigJson.ts
@@ -219,12 +219,13 @@ export interface LayerConfigJson {
      *
      * If set, open the selectedElementView in a floatOver instead of on the right.
      *
-     * iftrue: show the infobox in the splashscreen floating over the entire UI
+     * iftrue: show the infobox in the splashscreen floating over the entire UI; hide the title bar
      * iffalse: show the infobox in a sidebar on the right
+     * suggestions: return [{if: "value=title", then: "Show in a floatover and show the title bar"}]
      * group: advanced
      * default: sidebar
      */
-    popupInFloatover?: boolean
+    popupInFloatover?: boolean | "title" | string
 
     /**
      * Small icons shown next to the title.
diff --git a/src/Models/ThemeConfig/LayerConfig.ts b/src/Models/ThemeConfig/LayerConfig.ts
index 8e6a70d08..b72658cf8 100644
--- a/src/Models/ThemeConfig/LayerConfig.ts
+++ b/src/Models/ThemeConfig/LayerConfig.ts
@@ -66,7 +66,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: boolean
-    public readonly popupInFloatover
+    public readonly popupInFloatover: boolean | string
 
     constructor(json: LayerConfigJson, context?: string, official: boolean = true) {
         context = context + "." + json.id
diff --git a/src/UI/BigComponents/SelectedElementTitle.svelte b/src/UI/BigComponents/SelectedElementTitle.svelte
index a00e58a72..44987328e 100644
--- a/src/UI/BigComponents/SelectedElementTitle.svelte
+++ b/src/UI/BigComponents/SelectedElementTitle.svelte
@@ -65,6 +65,8 @@
       </div>
     {/if}
   </div>
+  <slot name="close-button">
+
   <button
     class="mt-2 h-fit shrink-0 rounded-full border-none p-0"
     on:click={() => state.selectedElement.setData(undefined)}
@@ -73,6 +75,7 @@
   >
     <XCircleIcon aria-hidden={true} class="h-8 w-8" />
   </button>
+  </slot>
 </div>
 
 <style>
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index f6d5670b9..5626ca226 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -18,7 +18,7 @@
     EyeIcon,
     HeartIcon,
     MenuIcon,
-    XCircleIcon,
+    XCircleIcon
   } from "@rgossiaux/svelte-heroicons/solid"
   import Tr from "./Base/Tr.svelte"
   import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@@ -102,14 +102,14 @@
       if (element.properties.id.startsWith("current_view")) {
         return currentViewLayer
       }
-      if(element.properties.id === "new_point_dialog"){
+      if (element.properties.id === "new_point_dialog") {
         return layout.layers.find(l => l.id === "last_click")
       }
-      if(element.properties.id === "location_track"){
+      if (element.properties.id === "location_track") {
         return layout.layers.find(l => l.id === "gps_track")
       }
       return state.layout.getMatchingLayer(element.properties)
-    },
+    }
   )
   let currentZoom = state.mapProperties.zoom
   let showCrosshair = state.userRelatedState.showCrosshair
@@ -117,8 +117,9 @@
   let viewport: UIEventSource<HTMLDivElement> = new UIEventSource<HTMLDivElement>(undefined)
   let mapproperties: MapProperties = state.mapProperties
   state.mapProperties.installCustomKeyboardHandler(viewport)
-  let canZoomIn = mapproperties.maxzoom.map(mz => mapproperties.zoom.data < mz, [mapproperties.zoom] )
-  let canZoomOut = mapproperties.minzoom.map(mz => mapproperties.zoom.data > mz, [mapproperties.zoom] )
+  let canZoomIn = mapproperties.maxzoom.map(mz => mapproperties.zoom.data < mz, [mapproperties.zoom])
+  let canZoomOut = mapproperties.minzoom.map(mz => mapproperties.zoom.data > mz, [mapproperties.zoom])
+
   function updateViewport() {
     const rect = viewport.data?.getBoundingClientRect()
     if (!rect) {
@@ -132,7 +133,7 @@
     const bottomRight = mlmap.unproject([rect.right, rect.bottom])
     const bbox = new BBox([
       [topLeft.lng, topLeft.lat],
-      [bottomRight.lng, bottomRight.lat],
+      [bottomRight.lng, bottomRight.lat]
     ])
     state.visualFeedbackViewportBounds.setData(bbox)
   }
@@ -419,7 +420,12 @@
       state.selectedElement.setData(undefined)
     }}
   >
-    <div class="flex h-full w-full">
+    <div class="flex flex-col h-full w-full">
+      {#if $selectedLayer.popupInFloatover === "title"}
+        <SelectedElementTitle {state} layer={$selectedLayer} selectedElement={$selectedElement} >
+          <span slot="close-button"/>
+        </SelectedElementTitle>
+      {/if}
       <SelectedElementView {state} layer={$selectedLayer} selectedElement={$selectedElement} />
     </div>
   </FloatOver>