From 570eb4a5ddcde37d8d394db6ecb760b749366556 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 2 Jul 2021 17:32:20 +0200
Subject: [PATCH] keep drawer open

---
 packages/editor-ui/src/components/Modal.vue         | 10 +++++++---
 packages/editor-ui/src/components/ModalRoot.vue     |  6 +++---
 packages/editor-ui/src/components/Modals.vue        |  5 +++--
 packages/editor-ui/src/components/VersionsModal.vue |  4 +++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index c8c6a6f0d4..84576db4bb 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -3,7 +3,7 @@
 		<el-drawer
 			v-if="drawer"
 			:direction="drawerDirection"
-			:visible="visibleDrawer"
+			:visible="visible && visibleDrawer"
 			:size="drawerWidth"
 			:before-close="closeDrawer"
 			>
@@ -47,7 +47,7 @@ const sizeMap: {[size: string]: string} = {
 
 export default Vue.extend({
 	name: "Modal",
-	props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth'],
+	props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth', 'visible'],
 	data() {
 		return {
 			visibleDrawer: this.drawer,
@@ -85,13 +85,17 @@ export default Vue.extend({
 				this.$emit('enter');
 			}
 		},
-		closeDialog() {
+		closeDialog(done?: () => void) {
 			this.$store.commit('ui/closeTopModal');
+			if (done) {
+				done();
+			}
 		},
 		closeDrawer() {
 			this.visibleDrawer = false;
 			setTimeout(() =>{
 				this.$store.commit('ui/closeTopModal');
+				this.visibleDrawer = true;
 			}, 300); // delayed for closing animation to take effect
 		},
 	},
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index aeae24e2fb..287e086d7a 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
-			v-if="isOpen(name)"
+			v-if="isOpen(name) || keepAlive"
 	>
-		<slot :modalName="name" :active="isActive(name)"></slot>	
+		<slot :modalName="name" :active="isActive(name)" :open="isOpen(name)"></slot>	
 	</div>
 </template>
 
@@ -11,7 +11,7 @@ import Vue from "vue";
 
 export default Vue.extend({
 	name: "ModalRoot",
-	props: ["name"],
+	props: ["name", "keepAlive"],
 	methods: {
 		isActive(name: string) {
 			return this.$store.getters['ui/isModalActive'](name);
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 5ace38c78a..2f0cf38f82 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -24,10 +24,11 @@
 				/>
 			</template>
 		</ModalRoot>
-		<ModalRoot :name="VERSIONS_MODAL_KEY">
-			<template v-slot="{ modalName }">
+		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
+			<template v-slot="{ modalName, open }">
 				<VersionsModal
 					:modalName="modalName"
+					:visible="open"
 				/>
 			</template>
 		</ModalRoot>
diff --git a/packages/editor-ui/src/components/VersionsModal.vue b/packages/editor-ui/src/components/VersionsModal.vue
index 4b6b662eea..2e3cd7e69c 100644
--- a/packages/editor-ui/src/components/VersionsModal.vue
+++ b/packages/editor-ui/src/components/VersionsModal.vue
@@ -1,7 +1,9 @@
 <template>
 	<Modal
+		v-if="currentVersion"
 		:name="modalName"
 		:drawer="true"
+		:visible="visible"
 		drawerDirection="ltr"
 		drawerWidth="480px"
 	>
@@ -44,7 +46,7 @@ export default Vue.extend({
 		Modal,
 		VersionCard,
 	},
-	props: ['modalName'],
+	props: ['modalName', 'visible'],
 	data() {
 		return {
 			UPDATE_INFO_URL,