mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-01-18 13:07:58 +00:00
Add modal transitions
This commit is contained in:
parent
4e68bf324c
commit
b04d0b324a
@ -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,6 +36,7 @@
|
||||
}
|
||||
|
||||
function close() {
|
||||
show = false;
|
||||
dispatch('close');
|
||||
}
|
||||
</script>
|
||||
@ -42,8 +44,8 @@
|
||||
<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>
|
||||
|
@ -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() {
|
||||
setTimeout(() => {
|
||||
instance.$destroy();
|
||||
outlet.remove();
|
||||
}, 200);
|
||||
};
|
||||
|
||||
instance.$on('close', instance.$close);
|
||||
|
Loading…
Reference in New Issue
Block a user