romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

Add modal transitions

Browse Source
This commit is contained in:
Romein van Buren 2023-12-23 14:17:39 +01:00
parent 4e68bf324c
commit b04d0b324a
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/modal.svelte
View File

@ -3,8 +3,9 @@
</script> </script>
<script> <script>
import { Beep } from '$wails/go/ui/UI.js';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { fade, fly } from 'svelte/transition';
import { Beep } from '$wails/go/ui/UI.js';
import Icon from './icon.svelte'; import Icon from './icon.svelte';
export let show = true; export let show = true;
@ -35,6 +36,7 @@
} }
function close() { function close() {
show = false;
dispatch('close'); dispatch('close');
} }
</script> </script>
@ -42,8 +44,8 @@
<svelte:window on:keydown={keydown} /> <svelte:window on:keydown={keydown} />
{#if show} {#if show}
<div class="modal outer" on:pointerdown|self={Beep}> <div class="modal outer" on:pointerdown|self={Beep} transition:fade={{ duration: 200 }}>
<div class="inner" style:max-width={width || '80vw'}> <div class="inner" style:max-width={width || '80vw'} transition:fly={{ y: 20, duration: 200 }}>
{#if title} {#if title}
<header> <header>
<div class="title">{title}</div> <div class="title">{title}</div>

12
frontend/src/lib/dialogs.js
View File

@ -6,11 +6,17 @@ function newDialog(dialogComponent, data = {}) {
outlet.className = 'dialogoutlet'; outlet.className = 'dialogoutlet';
document.getElementById('dialogoutlets').appendChild(outlet); 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.$close = function() {
instance.$destroy(); setTimeout(() => {
outlet.remove(); instance.$destroy();
outlet.remove();
}, 200);
}; };
instance.$on('close', instance.$close); instance.$on('close', instance.$close);