Merge develop

src/UI/Base/CloseAnimation.svelte

@@ -1,48 +0,0 @@
-<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
-    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(() => requestAnimationFrame(() => animate(isOpened.data)))
-</script>
-
-<div class={"pointer-events-none invisible absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"}>
-  <div class="content h-full" bind:this={targetOuter} style="background: red" />
-</div>
-
-<div
-  bind:this={elem}
-  class="low-interaction pointer-events-none absolute bottom-0 right-0 rounded-2xl"
-  style="transition: all 0.5s ease-out, background-color 1.4s ease-out; background: var(--background-color);"
->
-  <!-- Classes should be the same as the 'floatoaver' -->
-</div>

src/UI/Base/DrawerLeft.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Drawer } from "flowbite-svelte"
+  import { sineIn } from "svelte/easing"
+  import { UIEventSource } from "../../Logic/UIEventSource.js"
+
+  export let shown: UIEventSource<boolean>;
+  let transitionParams = {
+    x: -320,
+    duration: 200,
+    easing: sineIn
+  };
+  let hidden = !shown.data
+  $: {
+    shown.setData(!hidden)
+  }
+  shown.addCallback(sh => {
+    hidden = !sh
+  })
+</script>
+
+
+<Drawer placement="left"
+        transitionType="fly" {transitionParams}
+        divClass = "overflow-y-auto z-50 "
+        bind:hidden={hidden}>
+  <slot>
+    CONTENTS
+  </slot>
+</Drawer>
+

src/UI/Base/Link.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <a
-  href={Utils.prepareHref(href)}
+  href={Utils.prepareHref(href) }
   aria-label={ariaLabel}
   title={ariaLabel}
   target={newTab ? "_blank" : undefined}

src/UI/Base/LogoutButton.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
-  import Logout from "../../assets/svg/Logout.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "./Tr.svelte"
   import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
 
   export let osmConnection: OsmConnection
+  export let clss = ""
 </script>
 
 <button
+  class={clss}
   on:click={() => {
     osmConnection.LogOut()
   }}
 >
-  <ArrowRightOnRectangle class="h-6 w-6" />
+  <ArrowRightOnRectangle class="h-6 w-6 max-h-full" />
   <Tr t={Translations.t.general.logout} />
 </button>

src/UI/Base/MapControlButton.svelte

@@ -14,15 +14,10 @@
   export let arialabel: Translation = undefined
   export let arialabelDynamic: Store<Translation> = new ImmutableStore(arialabel)
   let arialabelString = arialabelDynamic.bind((tr) => tr?.current)
-  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:ariaLabelStore={arialabelString}

src/UI/Base/OpenJosm.svelte

@@ -35,8 +35,8 @@
 
 {#if $showButton}
   <div class="flex flex-col">
-    <button class="as-link" on:click={openJosm}>
-      <Josm_logo class="h-6 w-6 pr-2" />
+    <button class="as-link sidebar-button" on:click={openJosm}>
+      <Josm_logo class="h-6 w-6" />
       <Tr t={t.editJosm} />
     </button>
 

src/UI/Base/Page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  // A fake 'page' which can be shown; kind of a modal
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Modal } from "flowbite-svelte"
+
+  export let shown: UIEventSource<boolean>
+  let _shown = false
+  export let onlyLink: boolean = false
+  shown.addCallbackAndRun(sh => {
+    _shown = sh
+  })
+  export let fullscreen: boolean = false
+
+  const shared = "in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
+  let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared
+  if (fullscreen) {
+    defaultClass = shared
+  }
+  let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 z-50 w-full p-4 flex"
+  if (fullscreen) {
+    dialogClass += " h-full-child"
+  }
+  let bodyClass = "h-full p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain"
+  let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg";
+</script>
+
+{#if !onlyLink}
+  <Modal open={_shown} on:close={() => shown.set(false)} outsideclose
+         size="xl"
+         {defaultClass} {bodyClass} {dialogClass} {headerClass}
+         color="none">
+    <h1 slot="header" class="w-full">
+      <slot name="header" />
+    </h1>
+    <slot />
+    {#if $$slots.footer}
+      <slot name="footer" />
+    {/if}
+  </Modal>
+{:else}
+  <button class="as-link sidebar-button" on:click={() => shown.setData(true)}>
+    <slot name="link">
+    <slot name="header" />
+    </slot>
+  </button>
+{/if}

src/UI/Base/TitledPanel.svelte

@@ -6,4 +6,7 @@
   <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
     <slot />
   </div>
+
+
+  <slot class="border-t-gray-300 mt-1" name="footer" />
 </div>