Add modal transitions

garraflavatra · Dec 23, 2023 · b04d0b3 · b04d0b3
1 parent 4e68bf3
commit b04d0b3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/components/modal.svelte b/frontend/src/components/modal.svelte
@@ -3,8 +3,9 @@
 </script>
 
 <script>
-  import { Beep } from '$wails/go/ui/UI.js';
   import { createEventDispatcher } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import { Beep } from '$wails/go/ui/UI.js';
   import Icon from './icon.svelte';
 
   export let show = true;
@@ -35,15 +36,16 @@
   }
 
   function close() {
+    show = false;
     dispatch('close');
   }
 </script>
 
 <svelte:window on:keydown={keydown} />
 
 {#if show}
-  <div class="modal outer" on:pointerdown|self={Beep}>
-    <div class="inner" style:max-width={width || '80vw'}>
+  <div class="modal outer" on:pointerdown|self={Beep} transition:fade={{ duration: 200 }}>
+    <div class="inner" style:max-width={width || '80vw'} transition:fly={{ y: 20, duration: 200 }}>
       {#if title}
         <header>
           <div class="title">{title}</div>

diff --git a/frontend/src/lib/dialogs.js b/frontend/src/lib/dialogs.js
@@ -6,11 +6,17 @@ function newDialog(dialogComponent, data = {}) {
   outlet.className = 'dialogoutlet';
   document.getElementById('dialogoutlets').appendChild(outlet);
 
-  const instance = new dialogComponent({ target: outlet, props: data });
+  const instance = new dialogComponent({
+    target: outlet,
+    intro: true,
+    props: data,
+  });
 
   instance.$close = function() {
-    instance.$destroy();
-    outlet.remove();
+    setTimeout(() => {
+      instance.$destroy();
+      outlet.remove();
+    }, 200);
   };
 
   instance.$on('close', instance.$close);