Android: add inset spacers (experimental)

src/Logic/Web/AndroidPolyfill.ts

@@ -94,6 +94,37 @@ export class AndroidPolyfill {
         return token
     }
 
+    /**
+     * Gets how much padding we should add on top and at the bottom; in pixels
+     */
+    private static insets: { top: Store<number>, bottom: Store<number> } = undefined
+
+    public static getInsetSizes(): Readonly<{ top: Store<number>, bottom: Store<number> }> {
+        if (AndroidPolyfill.insets) {
+            return AndroidPolyfill.insets
+        }
+        const insets = {
+            top: new UIEventSource(0),
+            bottom: new UIEventSource(0),
+        }
+        AndroidPolyfill.insets = insets
+
+        console.log("Web: requesting inset sizes")
+        DatabridgePluginSingleton.request<{ top: number, bottom: number }>({
+            key: "insets",
+        }).then((result) => {
+            let v = result.value
+            if(typeof v === "string"){
+                v = JSON.parse(v)
+            }
+            console.log("Got inset sizes:", result)
+            insets.bottom.set(v.bottom)
+            insets.top.set(v.top)
+        })
+
+        return insets
+    }
+
     public static onBackButton(
         callback: () => boolean,
         options: {

src/UI/AllThemesGui.svelte

@@ -25,6 +25,7 @@
   import { MenuIcon } from "@rgossiaux/svelte-heroicons/solid"
   import AccordionSingle from "./Flowbite/AccordionSingle.svelte"
   import MenuDrawerIndex from "./BigComponents/MenuDrawerIndex.svelte"
+  import InsetSpacer from "./Base/InsetSpacer.svelte"
 
   AndroidPolyfill.init().then(() => console.log("Android polyfill setup completed"))
   const featureSwitches = new OsmConnectionFeatureSwitches()
@@ -133,6 +134,9 @@
     { returnToIndex: new ImmutableStore(false) }
   )
 
+  const topSPace = AndroidPolyfill.getInsetSizes().top
+  const bottom = AndroidPolyfill.getInsetSizes().bottom
+
   /**
    * Opens the first search candidate
    */
@@ -155,8 +159,8 @@
   <DrawerLeft shown={guistate.pageStates.menu}>
     <MenuDrawerIndex onlyLink={true} state={menuDrawerState} />
   </DrawerLeft>
-
   <div class="flex w-screen flex-col p-2 sm:p-4">
+  <InsetSpacer height={AndroidPolyfill.getInsetSizes().top}/>
     <div class="flex w-full justify-between overflow-hidden">
       <button on:click={() => guistate.pageStates.menu.set(true)} class="m-0 rounded-full p-2">
         <MenuIcon class="h-6 w-6 cursor-pointer" />
@@ -170,6 +174,9 @@
       />
     </div>
 
+    Inset sizes:
+    {$topSPace} {$bottom}
+
     <div class="mt-4 flex overflow-hidden break-words">
       <div class="m-3 hidden flex-none md:block">
         <Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" />
@@ -267,6 +274,9 @@
     v{Constants.vNumber}
   </div>
 
+  <InsetSpacer height={AndroidPolyfill.getInsetSizes().bottom}/>
+
+
   <div class="absolute top-0 h-0 w-0" style="margin-left: -10em">
     <MenuDrawer onlyLink={false} state={menuDrawerState} />
   </div>

src/UI/Base/InsetSpacer.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  /**
+   * in pixels
+   */
+  export let height: Store<number>
+</script>
+
+<div style={"height: "+$height+"px; background: red;"} />

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -59,6 +59,7 @@
   import { PhotoIcon } from "@babeard/svelte-heroicons/outline"
   import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
   import QueuedImagesView from "../Image/QueuedImagesView.svelte"
+  import InsetSpacer from "../Base/InsetSpacer.svelte"
 
   export let state: {
     favourites: FavouritesFeatureSource
@@ -102,6 +103,9 @@
 </script>
 
 <div class="low-interaction flex h-full flex-col overflow-hidden" class:hidden={!$shown}>
+  {#if onlyLink}
+    <InsetSpacer height={AndroidPolyfill.getInsetSizes().top} />
+  {/if}
   <div class="flex justify-between border-b border-black p-2">
     <h2>
       <Tr t={t.title} />
@@ -330,4 +334,7 @@
       {/if}
     </div>
   </div>
+  {#if onlyLink}
+    <InsetSpacer height={AndroidPolyfill.getInsetSizes().bottom} />
+  {/if}
 </div>

src/UI/ThemeViewGUI.svelte

@@ -54,6 +54,8 @@
   import GpsElementHelper from "./BigComponents/GpsElementHelper.svelte"
   import { dragDetection } from "../Utils/dragDetection"
   import WelcomeBack from "./BigComponents/WelcomeBack.svelte"
+  import InsetSpacer from "./Base/InsetSpacer.svelte"
+  import { AndroidPolyfill } from "../Logic/Web/AndroidPolyfill"
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
 
@@ -332,6 +334,7 @@
         </If>
       </div>
     </div>
+    <InsetSpacer height={AndroidPolyfill.getInsetSizes().bottom}/>
   </div>
 
   <DrawerRight shown={state.searchState.showSearchDrawer}>
@@ -340,6 +343,7 @@
 
   <!-- Top components -->
   <div class="z-4 pointer-events-none absolute left-0 top-0 w-full">
+    <InsetSpacer height={AndroidPolyfill.getInsetSizes().top}/>
     <div
       id="top-bar"
       class="bg-black-light-transparent pointer-events-auto flex flex-wrap items-center justify-between px-4 py-1"