From bcb7d8fb02eec968238b17ef75092c192b9afa6d Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 12:16:35 +0200
Subject: [PATCH] Add top bar for tools

---
 public/css/index-tailwind-output.css | 51 +++++++++++------
 src/UI/ThemeViewGUI.svelte           | 83 ++++++++++++++++------------
 src/index.css                        |  4 ++
 3 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 94b9781aa..ab88a5b96 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -863,14 +863,14 @@ video {
   margin: 0.5rem;
 }
 
-.m-1 {
-  margin: 0.25rem;
-}
-
 .m-0\.5 {
   margin: 0.125rem;
 }
 
+.m-1 {
+  margin: 0.25rem;
+}
+
 .m-11 {
   margin: 2.75rem;
 }
@@ -1009,10 +1009,6 @@ video {
   margin-bottom: 4rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mr-0\.5 {
   margin-right: 0.125rem;
 }
@@ -1025,6 +1021,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -3353,6 +3353,11 @@ video {
   padding-right: 0.25rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -3403,11 +3408,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .py-2\.5 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
@@ -4818,6 +4818,10 @@ code {
   background-color: #00000088;
 }
 
+.bg-black-light-transparent {
+  background-color: #00000044;
+}
+
 .block-ruby {
   display: block ruby;
 }
@@ -7180,14 +7184,18 @@ svg.apply-fill path {
     margin-right: 0.5rem;
   }
 
-  .sm\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
   .sm\:mr-1 {
     margin-right: 0.25rem;
   }
 
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
@@ -7236,6 +7244,10 @@ svg.apply-fill path {
     width: 50%;
   }
 
+  .sm\:w-64 {
+    width: 16rem;
+  }
+
   .sm\:w-11 {
     width: 2.75rem;
   }
@@ -7663,6 +7675,11 @@ svg.apply-fill path {
   .lg\:flex-row {
     flex-direction: row;
   }
+
+  .lg\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
 }
 
 @media (min-width: 1280px) {
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 6f9514dce..b28d89f8c 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -46,7 +46,7 @@
   import SelectedElementPanel from "./Base/SelectedElementPanel.svelte"
   import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
   import DrawerLeft from "./Base/DrawerLeft.svelte"
-
+  import { ariaLabel, ariaLabelStore } from "../Utils/ariaLabel"
   export let state: ThemeViewState
   let layout = state.layout
   let maplibremap: UIEventSource<MlMap> = state.map
@@ -146,7 +146,6 @@
   let debug = state.featureSwitches.featureSwitchIsDebugging
 
 
-
   debug.addCallbackAndRun((dbg) => {
     if (dbg) {
       document.body.classList.add("debug")
@@ -167,7 +166,6 @@
     animation?.cameraAnimation(mlmap)
   }
 
-
 </script>
 
 <main>
@@ -190,28 +188,18 @@
   <div class="pointer-events-none absolute top-0 left-0 w-full">
     <!-- Top components -->
 
-    <div class="pointer-events-auto float-right mt-1 flex flex-col px-1 max-[480px]:w-full sm:m-2">
-      <If condition={state.visualFeedback}>
-        {#if $selectedElement === undefined}
-          <div class="w-fit">
-            <VisualFeedbackPanel {state} />
-          </div>
-        {/if}
-      </If>
-      <If condition={state.featureSwitches.featureSwitchSearch}>
-        <Geosearch
-          bounds={state.mapProperties.bounds}
-          on:searchCompleted={() => {
-            state.map?.data?.getCanvas()?.focus()
-          }}
-          perLayer={state.perLayer}
-          selectedElement={state.selectedElement}
-          geolocationState={state.geolocation.geolocationState}
-        />
-      </If>
-    </div>
-    <div class="float-left m-1 flex flex-col sm:mt-2">
-      <If condition={state.featureSwitches.featureSwitchWelcomeMessage}>
+    <div class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-2 flex-wrap-reverse">
+      <!-- Top bar with tools -->
+      <div class="flex items-center">
+
+        <MapControlButton
+         arialabel={Translations.t.general.labels.menu}
+          on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
+          on:keydown={forwardEventToMap}
+        >
+          <MenuIcon class="h-8 w-8 cursor-pointer" />
+        </MapControlButton>
+
         <MapControlButton
           on:click={() => state.guistate.pageStates.about_theme.set(true)}
           on:keydown={forwardEventToMap}
@@ -225,14 +213,40 @@
             </b>
           </div>
         </MapControlButton>
+      </div>
+
+
+      <If condition={state.featureSwitches.featureSwitchSearch}>
+        <div class="w-full sm:w-64 my-2 sm:mt-0">
+
+          <Geosearch
+            bounds={state.mapProperties.bounds}
+            on:searchCompleted={() => {
+            state.map?.data?.getCanvas()?.focus()
+          }}
+            perLayer={state.perLayer}
+            selectedElement={state.selectedElement}
+            geolocationState={state.geolocation.geolocationState}
+          />
+        </div>
+      </If>
+
+    </div>
+
+    <div class="pointer-events-auto float-right mt-1 flex flex-col px-1 max-[480px]:w-full sm:m-2">
+      <If condition={state.visualFeedback}>
+        {#if $selectedElement === undefined}
+          <div class="w-fit">
+            <VisualFeedbackPanel {state} />
+          </div>
+        {/if}
+      </If>
+
+    </div>
+    <div class="float-left m-1 flex flex-col sm:mt-2">
+      <If condition={state.featureSwitches.featureSwitchWelcomeMessage}>
+
 
-        <MapControlButton
-          arialabel={Translations.t.general.labels.menu}
-          on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
-          on:keydown={forwardEventToMap}
-        >
-          <MenuIcon class="h-8 w-8 cursor-pointer" />
-        </MapControlButton>
       </If>
       {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
         <MapControlButton
@@ -310,7 +324,8 @@
             />
           </If>
           <button
-            class="as-link bg-black-transparent pointer-events-auto ml-1 h-fit max-h-12 cursor-pointer self-end self-center overflow-hidden rounded-2xl px-1 text-white opacity-50 hover:opacity-100"
+            class="unstyled bg-black-transparent pointer-events-auto ml-1 h-fit max-h-12 cursor-pointer overflow-hidden rounded-2xl px-1 text-white opacity-50 hover:opacity-100"
+            style="background: #00000088; padding: 0.25rem; border-radius: 2rem;"
             on:click={() => {state.guistate.pageStates.copyright.set(true)}}
           >
             © <span class="hidden sm:inline sm:pr-2">
@@ -387,7 +402,7 @@
     <svelte:fragment slot="error" />
   </LoginToggle>
 
-  <DrawerLeft shown={state.guistate.menuIsOpened} >
+  <DrawerLeft shown={state.guistate.menuIsOpened}>
     <MenuDrawer onlyLink={true} {state} />
   </DrawerLeft>
   <MenuDrawer onlyLink={false} {state} />
diff --git a/src/index.css b/src/index.css
index 806c59d3a..92c8281f5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -469,6 +469,10 @@ code {
   background-color: #00000088;
 }
 
+.bg-black-light-transparent {
+    background-color: #00000044;
+}
+
 .block-ruby {
   display: block ruby;
 }