UX: add fade-out animation to menus to show where they can be found again

src/UI/Base/CloseAnimation.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Store } from "../../Logic/UIEventSource"
+  import { onDestroy, onMount } from "svelte"
+
+  let elem: HTMLElement
+  let targetOuter: HTMLElement
+  export let isOpened: Store<boolean>
+  export let moveTo: Store<HTMLElement>
+
+  export let debug : string
+  function copySizeOf(htmlElem: HTMLElement) {
+    const target = htmlElem.getBoundingClientRect()
+    elem.style.left = target.x + "px"
+    elem.style.top = target.y + "px"
+    elem.style.width = target.width + "px"
+    elem.style.height = target.height + "px"
+  }
+
+  function animate(opened: boolean) {
+    const moveToElem = moveTo.data
+console.log("Animating", debug," to", opened)
+    if (opened) {
+      copySizeOf(targetOuter)
+      elem.style.background = "var(--background-color)"
+    } else if (moveToElem !== undefined) {
+      copySizeOf(moveToElem)
+      elem.style.background = "#ffffff00"
+    } else {
+      elem.style.left = "0px"
+      elem.style.top = "0px"
+      elem.style.background = "#ffffff00"
+    }
+  }
+
+  onDestroy(isOpened.addCallback(opened => animate(opened)))
+  onMount(() => animate(isOpened.data))
+
+
+</script>
+<div class={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6 pointer-events-none invisible"}>
+  <div class="content h-full" bind:this={targetOuter} style="background: red" />
+</div>
+
+<div bind:this={elem} class="pointer-events-none absolute bottom-0 right-0 low-interaction rounded-2xl"
+     style="transition: all 0.65s ease-out, background-color 1.8s ease-out; background: var(--background-color);">
+  <!-- Classes should be the same as the 'floatoaver' -->
+</div>
+
+

src/UI/Base/FloatOver.svelte

@@ -11,7 +11,6 @@
    */
   const dispatch = createEventDispatcher<{ close }>()
 
-  export let extraClasses = "p-4 md:p-6"
 </script>
 
 <!-- Draw the background over the total screen -->
@@ -24,7 +23,7 @@
 />
 <!-- draw a _second_ absolute div, placed using 'bottom' which will be above the navigation bar on mobile browsers -->
 <div
-  class={twMerge("absolute bottom-0 right-0 h-full w-screen", extraClasses)}
+  class={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"}
   style="z-index: 21"
   use:trapFocus
 >

src/UI/Base/MapControlButton.svelte

@@ -3,7 +3,7 @@
   import { twJoin } from "tailwind-merge"
   import { Translation } from "../i18n/Translation"
   import { ariaLabel } from "../../Utils/ariaLabel"
-  import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 
   /**
    * A round button with an icon and possible a small text, which hovers above the map
@@ -12,9 +12,15 @@
   export let cls = "m-0.5 p-0.5 sm:p-1 md:m-1"
   export let enabled: Store<boolean> = new ImmutableStore(true)
   export let arialabel: Translation = undefined
+  export let htmlElem: UIEventSource<HTMLElement> = undefined
+  let _htmlElem : HTMLElement
+  $: {
+    htmlElem?.setData(_htmlElem)
+  }
 </script>
 
 <button
+  bind:this={_htmlElem}
   on:click={(e) => dispatch("click", e)}
   on:keydown
   use:ariaLabel={arialabel}