Refactoring: use Drawer instead of modalright, see #2106

src/UI/Base/ModalRight.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte"
-  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
-
-  /**
-   * The slotted element will be shown on the right side
-   */
-  const dispatch = createEventDispatcher<{ close }>()
-</script>
-
-<div
-  aria-modal="true"
-  autofocus
-  class="normal-background absolute top-0 right-0 flex h-screen w-full flex-col overflow-y-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
-  role="dialog"
-  style="max-width: 100vw; max-height: 100vh"
-  tabindex="-1"
-  id="modal-right"
->
-  <slot name="close-button">
-    <button
-      class="absolute right-10 top-10 h-8 w-8 cursor-pointer rounded-full"
-      on:click={() => dispatch("close")}
-    >
-      <XCircleIcon />
-    </button>
-  </slot>
-  <div role="document">
-    <slot />
-  </div>
-</div>
-
-<!-- Experimental support for foldable devices -->
-<style lang="scss">
-  @media (horizontal-viewport-segments: 2) {
-    #modal-right {
-      width: 50%;
-    }
-  }
-</style>

src/UI/ThemeViewGUI.svelte

@@ -20,7 +20,6 @@
   import FloatOver from "./Base/FloatOver.svelte"
   import Constants from "../Models/Constants"
   import LoginToggle from "./Base/LoginToggle.svelte"
-  import ModalRight from "./Base/ModalRight.svelte"
   import LevelSelector from "./BigComponents/LevelSelector.svelte"
   import type { RasterLayerPolygon } from "../Models/RasterLayers"
   import { AvailableRasterLayers } from "../Models/RasterLayers"
@@ -47,6 +46,8 @@
   import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
   import DrawerLeft from "./Base/DrawerLeft.svelte"
   import Hash from "../Logic/Web/Hash"
+  import { Drawer } from "flowbite-svelte"
+  import { sineIn } from "svelte/easing"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -422,14 +423,27 @@
 
   {#if $selectedElement !== undefined && $selectedLayer !== undefined && !$selectedLayer.popupInFloatover}
     <!-- right modal with the selected element view -->
-    <ModalRight
-      on:close={() => {
-        state.selectedElement.setData(undefined)
-      }}
-    >
+    <Drawer
+      placement="right"
+      transitionType="fly"
+      activateClickOutside={false}
+      backdrop={false}
+      id="drawer-right"
+      width="w-full md:w-6/12 lg:w-5/12 xl:w-4/12"
+      rightOffset="inset-y-0 right-0"
+      transitionParams={ {
+    x: 640,
+    duration: 200,
+    easing: sineIn
+  }}
+      divClass="overflow-y-auto z-50 "
+      hidden={$selectedElement === undefined}
+      on:close={() => {      state.selectedElement.setData(undefined)
+    }}
+      >
       <div slot="close-button" />
       <SelectedElementPanel {state} selected={$state_selectedElement} />
-    </ModalRight>
+    </Drawer>
   {/if}
 
   {#if $selectedElement !== undefined && $selectedLayer !== undefined && $selectedLayer.popupInFloatover}