From 1b99be524f548f9f83fa5126fe70a4dfbc9ac4a0 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 15 Jun 2023 16:11:36 +0200
Subject: [PATCH] Usertest: add 'back to theme overview'-button on theme intro
 page, fix #1457

---
 UI/Base/TabbedGroup.svelte              |  25 ++--
 UI/BigComponents/ThemeIntroPanel.svelte | 162 +++++++++++++-----------
 UI/ThemeViewGUI.svelte                  |   2 +-
 3 files changed, 107 insertions(+), 82 deletions(-)

diff --git a/UI/Base/TabbedGroup.svelte b/UI/Base/TabbedGroup.svelte
index 4bfd908076..d58f7cf767 100644
--- a/UI/Base/TabbedGroup.svelte
+++ b/UI/Base/TabbedGroup.svelte
@@ -17,7 +17,7 @@
   }
 </script>
 
-<div class="tabbedgroup h-full w-full">
+<div class="tabbedgroup h-full flex w-full">
   <TabGroup
     class="flex h-full w-full flex-col"
     defaultIndex={1}
@@ -67,23 +67,23 @@
       </TabList>
       <slot name="post-tablist" />
     </div>
-    <div class="normal-background overflow-y-auto">
-      <TabPanels defaultIndex={$tab}>
-        <TabPanel>
+    <div class="normal-background overflow-y-auto h-full">
+      <TabPanels class="tabpanels" defaultIndex={$tab}>
+        <TabPanel class="tabpanel">
           <slot name="content0">
             <div>Empty</div>
           </slot>
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content1" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content2" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content3" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content4" />
         </TabPanel>
       </TabPanels>
@@ -96,6 +96,15 @@
     max-height: 100vh;
     height: 100%;
   }
+  
+  :global(.tabpanel) {
+    height:100%;
+  }
+
+  :global(.tabpanels) {
+    height: calc( 100% - 2rem );
+  }
+
 
   :global(.tab) {
     margin: 0.25rem;
diff --git a/UI/BigComponents/ThemeIntroPanel.svelte b/UI/BigComponents/ThemeIntroPanel.svelte
index ef822f9412..7cd32c128d 100644
--- a/UI/BigComponents/ThemeIntroPanel.svelte
+++ b/UI/BigComponents/ThemeIntroPanel.svelte
@@ -1,88 +1,104 @@
 <script lang="ts">
-  import Translations from "../i18n/Translations"
-  import Svg from "../../Svg"
-  import Tr from "../Base/Tr.svelte"
-  import NextButton from "../Base/NextButton.svelte"
-  import Geosearch from "./Geosearch.svelte"
-  import IfNot from "../Base/IfNot.svelte"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import ThemeViewState from "../../Models/ThemeViewState"
-  import If from "../Base/If.svelte"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { twJoin } from "tailwind-merge"
+    import Translations from "../i18n/Translations"
+    import Svg from "../../Svg"
+    import Tr from "../Base/Tr.svelte"
+    import NextButton from "../Base/NextButton.svelte"
+    import Geosearch from "./Geosearch.svelte"
+    import IfNot from "../Base/IfNot.svelte"
+    import ToSvelte from "../Base/ToSvelte.svelte"
+    import ThemeViewState from "../../Models/ThemeViewState"
+    import If from "../Base/If.svelte"
+    import {UIEventSource} from "../../Logic/UIEventSource"
+    import {SearchIcon} from "@rgossiaux/svelte-heroicons/solid"
+    import {twJoin} from "tailwind-merge"
+    import {Utils} from "../../Utils";
 
-  /**
-   * The theme introduction panel
-   */
-  export let state: ThemeViewState
-  let layout = state.layout
-  let selectedElement = state.selectedElement
-  let selectedLayer = state.selectedLayer
+    /**
+     * The theme introduction panel
+     */
+    export let state: ThemeViewState
+    let layout = state.layout
+    let selectedElement = state.selectedElement
+    let selectedLayer = state.selectedLayer
 
-  let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
-  let searchEnabled = false
+    let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
+    let searchEnabled = false
 
-  function jumpToCurrentLocation() {
-    const glstate = state.geolocation.geolocationState
-    if (glstate.currentGPSLocation.data !== undefined) {
-      const c: GeolocationCoordinates = glstate.currentGPSLocation.data
-      state.guistate.themeIsOpened.setData(false)
-      const coor = { lon: c.longitude, lat: c.latitude }
-      state.mapProperties.location.setData(coor)
+    function jumpToCurrentLocation() {
+        const glstate = state.geolocation.geolocationState
+        if (glstate.currentGPSLocation.data !== undefined) {
+            const c: GeolocationCoordinates = glstate.currentGPSLocation.data
+            state.guistate.themeIsOpened.setData(false)
+            const coor = {lon: c.longitude, lat: c.latitude}
+            state.mapProperties.location.setData(coor)
+        }
+        if (glstate.permission.data !== "granted") {
+            glstate.requestPermission()
+            return
+        }
     }
-    if (glstate.permission.data !== "granted") {
-      glstate.requestPermission()
-      return
-    }
-  }
 </script>
 
-<Tr t={layout.description} />
-<Tr t={Translations.t.general.welcomeExplanation.general} />
-{#if layout.layers.some((l) => l.presets?.length > 0)}
-  <If condition={state.featureSwitches.featureSwitchAddNew}>
-    <Tr t={Translations.t.general.welcomeExplanation.addNew} />
-  </If>
-{/if}
+<div class="flex flex-col justify-between h-full">
 
-<!--toTheMap,
-loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"),
--->
-<Tr t={layout.descriptionTail} />
-<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
-  <div class="flex w-full justify-center text-2xl">
-    <Tr t={Translations.t.general.openTheMap} />
-  </div>
-</NextButton>
+    <div>
 
-<div class="flex w-full flex-wrap sm:flex-nowrap">
-  <IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
-    <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
-      <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
-      <Tr t={Translations.t.general.openTheMapAtGeolocation} />
-    </button>
-  </IfNot>
+        <!-- Intro, description, ... -->
+        <Tr t={layout.description}/>
+        <Tr t={Translations.t.general.welcomeExplanation.general}/>
+        {#if layout.layers.some((l) => l.presets?.length > 0)}
+            <If condition={state.featureSwitches.featureSwitchAddNew}>
+                <Tr t={Translations.t.general.welcomeExplanation.addNew}/>
+            </If>
+        {/if}
 
-  <div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
-    <div class="w-full">
-      <Geosearch
-        bounds={state.mapProperties.bounds}
-        on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
-        on:searchIsValid={(isValid) => {
+        <Tr t={layout.descriptionTail}/>
+      
+      
+        <!-- Buttons: open map, go to location, search -->
+        <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
+            <div class="flex w-full justify-center text-2xl">
+                <Tr t={Translations.t.general.openTheMap}/>
+            </div>
+        </NextButton>
+
+        <div class="flex w-full flex-wrap sm:flex-nowrap">
+            <IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
+                <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
+                    <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")}/>
+                    <Tr t={Translations.t.general.openTheMapAtGeolocation}/>
+                </button>
+            </IfNot>
+
+            <div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
+                <div class="w-full">
+                    <Geosearch
+                            bounds={state.mapProperties.bounds}
+                            on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
+                            on:searchIsValid={(isValid) => {
           searchEnabled = isValid
         }}
-        perLayer={state.perLayer}
-        {selectedElement}
-        {selectedLayer}
-        {triggerSearch}
-      />
+                            perLayer={state.perLayer}
+                            {selectedElement}
+                            {selectedLayer}
+                            {triggerSearch}
+                    />
+                </div>
+                <button
+                        class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
+                        on:click={() => triggerSearch.ping()}>
+                    <Tr t={Translations.t.general.search.searchShort}/>
+                    <SearchIcon class="h-6 w-6"/>
+                </button>
+            </div>
+        </div>
     </div>
-    <button
-      class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
-      on:click={() => triggerSearch.ping()}>
-      <Tr t={Translations.t.general.search.searchShort} />
-      <SearchIcon class="h-6 w-6" />
-    </button>
+  
+    <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
+    <!-- bottom buttons, a bit hidden away: switch layout -->
+    <a class="flex" href={Utils.HomepageLink()}>
+      <img class="h-6 w-6" src="./assets/svg/add.svg"/>
+      <Tr t={Translations.t.general.backToIndex}/>
+    </a>
   </div>
 </div>
diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte
index a05b7e8c20..32e7c78308 100644
--- a/UI/ThemeViewGUI.svelte
+++ b/UI/ThemeViewGUI.svelte
@@ -269,7 +269,7 @@
                 <Tr t={layout.title}/>
             </div>
 
-            <div class="m-4" slot="content0">
+            <div class="m-4 h-full" slot="content0">
                 <ThemeIntroPanel {state}/>
             </div>