From ae1467d2ab35a03eb2d7bf3e5ca1cf4634b23443 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 21 Jun 2022 15:34:16 +1000
Subject: Add tutorial-pane transition

---
 src/App.vue | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2916ea8..c7d6149 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -149,6 +149,14 @@ export default defineComponent({
 			}
 			return ancestors.reverse();
 		},
+		tutPaneContainerStyles(): Record<string,string> {
+			return {
+				maxHeight: (this.tutorialOpen ? this.uiOpts.tutorialPaneSz : 0) + 'px',
+				transitionDuration: this.uiOpts.tileChgDuration + 'ms',
+				transitionProperty: 'max-height',
+				overflow: 'hidden',
+			};
+		},
 	},
 	methods: {
 		// For tile expand/collapse events
@@ -578,14 +586,26 @@ export default defineComponent({
 		onStartTutorial(){
 			if (this.tutorialOpen == false){
 				this.tutorialOpen = true;
-				this.updateAreaDims().then(() => this.relayoutWithCollapse());
+				// Repeatedly relayout tiles during tutorial-pane transition
+				let timerId = setInterval(() => {
+					this.updateAreaDims().then(() => this.relayoutWithCollapse());
+				}, 100);
+				setTimeout(() => {
+					clearTimeout(timerId)
+				}, this.uiOpts.tileChgDuration);
 			}
 		},
 		onTutorialClose(){
 			this.tutorialOpen = false;
 			this.welcomeOpen = false;
 			this.disabledActions.clear();
-			this.updateAreaDims().then(() => this.relayoutWithCollapse());
+			// Repeatedly relayout tiles during tutorial-pane transition
+			let timerId = setInterval(() => {
+				this.updateAreaDims().then(() => this.relayoutWithCollapse());
+			}, 100);
+			setTimeout(() => {
+				clearTimeout(timerId)
+			}, this.uiOpts.tileChgDuration);
 		},
 		onTutStageChg(disabledActions: Set<Action>, triggerAction: Action | null){
 			this.welcomeOpen = false;
@@ -774,9 +794,13 @@ export default defineComponent({
 		<help-icon @click="onHelpIconClick"
 			class="mr-[6px] my-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
 	</div>
-	<tutorial-pane v-if="tutorialOpen" :height="uiOpts.tutorialPaneSz + 'px'" class="grow-0 shrink-0"
-		:uiOpts="uiOpts" :triggerFlag="tutTriggerFlag" :skipWelcome="!welcomeOpen"
-		@tutorial-close="onTutorialClose" @tutorial-stage-chg="onTutStageChg"/>
+	<div :style="tutPaneContainerStyles"> <!-- Used to slide-in/out the tutorial pane -->
+		<transition name="fade">
+			<tutorial-pane v-if="tutorialOpen" :height="uiOpts.tutorialPaneSz + 'px'"
+				:uiOpts="uiOpts" :triggerFlag="tutTriggerFlag" :skipWelcome="!welcomeOpen"
+				@tutorial-close="onTutorialClose" @tutorial-stage-chg="onTutStageChg"/>
+		</transition>
+	</div>
 	<div :class="['flex', mainAreaDims[0] > mainAreaDims[1] ? 'flex-row' : 'flex-col', 'grow', 'min-h-0']" ref="mainArea">
 		<ancestry-bar v-if="detachedAncestors != null"
 			:nodes="detachedAncestors" :vert="mainAreaDims[0] > mainAreaDims[1]"
-- 
cgit v1.2.3