mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add closing animation

Browse source
This commit is contained in:
Mutasem 2021-07-02 17:18:08 +02:00
parent 6e424e15f4
commit cf67e94b84
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/editor-ui/src/components/Modal.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div v-if="dialogVisible"> <div>
<el-drawer <el-drawer
v-if="drawer" v-if="drawer"
:direction="drawerDirection" :direction="drawerDirection"
:before-close="closeDialog" :visible="visibleDrawer"
:visible="true"
:size="drawerWidth" :size="drawerWidth"
:before-close="closeDrawer"
> >
<template v-slot:title> <template v-slot:title>
<slot name="header" /> <slot name="header" />
@ -48,6 +48,11 @@ const sizeMap: {[size: string]: string} = {
export default Vue.extend({ export default Vue.extend({
name: "Modal", name: "Modal",
props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth'], props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth'],
data() {
return {
visibleDrawer: this.drawer,
};
},
mounted() { mounted() {
window.addEventListener('keydown', this.onWindowKeydown); window.addEventListener('keydown', this.onWindowKeydown);
@ -83,6 +88,12 @@ export default Vue.extend({
closeDialog() { closeDialog() {
this.$store.commit('ui/closeTopModal'); this.$store.commit('ui/closeTopModal');
}, },
closeDrawer() {
this.visibleDrawer = false;
setTimeout(() =>{
this.$store.commit('ui/closeTopModal');
}, 300); // delayed for closing animation to take effect
},
}, },
computed: { computed: {
width(): string { width(): string {