Merge develop

src/UI/Base/DrawerLeft.svelte

@@ -3,28 +3,27 @@
   import { sineIn } from "svelte/easing"
   import { UIEventSource } from "../../Logic/UIEventSource.js"
 
-  export let shown: UIEventSource<boolean>;
+  export let shown: UIEventSource<boolean>
   let transitionParams = {
     x: -320,
     duration: 200,
-    easing: sineIn
-  };
+    easing: sineIn,
+  }
   let hidden = !shown.data
   $: {
     shown.setData(!hidden)
   }
-  shown.addCallback(sh => {
+  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
+  placement="left"
+  transitionType="fly"
+  {transitionParams}
+  divClass="overflow-y-auto z-50 "
+  bind:hidden
+>
+  <slot>CONTENTS</slot>
 </Drawer>
-

src/UI/Base/FloatOver.svelte

@@ -30,7 +30,7 @@
   }}
 >
   <div
-    class="content relative normal-background pointer-events-auto h-full"
+    class="content normal-background pointer-events-auto relative h-full"
     on:click|stopPropagation={() => {}}
   >
     <div class="h-full rounded-xl">
@@ -39,20 +39,16 @@
     <slot name="close-button">
       <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
       <div class="absolute top-0 right-0">
-
-        <CloseButton class="normal-background mt-2 mr-2"
-                     on:click={() => dispatch("close")}
-        />
+        <CloseButton class="normal-background mt-2 mr-2" on:click={() => dispatch("close")} />
       </div>
-
     </slot>
   </div>
 </div>
 
 <style>
-    .content {
-        border-radius: 0.5rem;
-        overflow-x: hidden;
-        box-shadow: 0 0 1rem #00000088;
-    }
+  .content {
+    border-radius: 0.5rem;
+    overflow-x: hidden;
+    box-shadow: 0 0 1rem #00000088;
+  }
 </style>

src/UI/Base/Link.svelte

@@ -4,7 +4,6 @@
   export let text: string
   export let href: string
 
-
   export let classnames: string = undefined
   export let download: string = undefined
   export let ariaLabel: string = undefined
@@ -13,7 +12,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

@@ -14,6 +14,6 @@
     osmConnection.LogOut()
   }}
 >
-  <ArrowRightOnRectangle class="h-6 w-6 max-h-full" />
+  <ArrowRightOnRectangle class="h-6 max-h-full w-6" />
   <Tr t={Translations.t.general.logout} />
 </button>

src/UI/Base/MapControlButton.svelte

@@ -14,7 +14,6 @@
   export let arialabel: Translation = undefined
   export let arialabelDynamic: Store<Translation> = new ImmutableStore(arialabel)
   let arialabelString = arialabelDynamic.bind((tr) => tr?.current)
-
 </script>
 
 <button

src/UI/Base/Page.svelte

@@ -1,59 +1,39 @@
 <script lang="ts">
   // A fake 'page' which can be shown; kind of a modal
   import { UIEventSource } from "../../Logic/UIEventSource"
-  import { Modal } from "flowbite-svelte"
+  import Popup from "./Popup.svelte"
+
 
-  export let shown: UIEventSource<boolean>
-  let _shown = false
   export let onlyLink: boolean = false
-  shown.addCallbackAndRun(sh => {
-    _shown = sh
-  })
+  export let bodyPadding = "p-4 md:p-5 "
   export let fullscreen: boolean = false
+  export let shown: UIEventSource<boolean>
 
-  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="page-header w-full">
-      <slot name="header" />
-    </h1>
+  <Popup {shown} {bodyPadding} {fullscreen}>
+    <slot name="header" slot="header" />
     <slot />
-    {#if $$slots.footer}
-      <slot name="footer" />
-    {/if}
-  </Modal>
+    <slot name="footer" slot="footer" />
+  </Popup>
 {:else}
   <button class="as-link sidebar-button" on:click={() => shown.setData(true)}>
     <slot name="link">
-    <slot name="header" />
+      <slot name="header" />
     </slot>
   </button>
 {/if}
 
 <style>
-    :global(.page-header) {
-        display: flex;
-        align-items: center;
-    }
+  :global(.page-header) {
+    display: flex;
+    align-items: center;
+  }
 
   :global(.page-header svg) {
-      width: 2rem;
-      height: 2rem;
-      margin-right: 0.75rem;
+    width: 2rem;
+    height: 2rem;
+    margin-right: 0.75rem;
   }
 </style>

src/UI/Base/Popup.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Modal } from "flowbite-svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+
+  /**
+   * Basically a flowbite-svelte modal made more ergonomical
+   */
+
+  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"
+  }
+  export let bodyPadding = "p-4 md:p-5 "
+  let bodyClass = bodyPadding + " h-full 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"
+  if (!$$slots.header) {
+    headerClass = "hidden"
+  }
+  export let shown: UIEventSource<boolean>
+  export let dismissable = true
+  let _shown = false
+  shown.addCallbackAndRun(sh => {
+    _shown = sh
+  })
+
+
+</script>
+
+
+<Modal open={_shown} on:close={() => shown.set(false)} outsideclose
+       size="xl"
+       {dismissable}
+       {defaultClass} {bodyClass} {dialogClass} {headerClass}
+       color="none">
+
+  <svelte:fragment slot="header">
+    {#if $$slots.header}
+      <h1 class="page-header w-full">
+        <slot name="header" />
+      </h1>
+    {/if}
+  </svelte:fragment>
+  <slot />
+  {#if $$slots.footer}
+    <slot name="footer" />
+  {/if}
+</Modal>

src/UI/Base/TitledPanel.svelte

@@ -7,6 +7,5 @@
     <slot />
   </div>
 
-
-  <slot class="border-t-gray-300 mt-1" name="footer" />
+  <slot class="mt-1 border-t-gray-300" name="footer" />
 </div>