From 23436a9ad4c2a710c7f0d49a07a720e0153d8225 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 24 Apr 2022 16:58:31 +1000
Subject: Fix z-index not being higher for tiles being expanded/collapsed

---
 src/components/SettingsPane.vue | 2 +-
 src/components/Tile.vue         | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue
index 990d1f7..13a7f26 100644
--- a/src/components/SettingsPane.vue
+++ b/src/components/SettingsPane.vue
@@ -112,7 +112,7 @@ export default defineComponent({
 	</div>
 	<hr class="border-stone-400"/>
 	<div>
-		<label>Animation Duration <input type="range" min="0" max="1000" class="mx-2 w-[3cm]"
+		<label>Animation Duration <input type="range" min="0" max="3000" class="mx-2 w-[3cm]"
 			v-model.number="uiOpts.tileChgDuration"/></label>
 	</div>
 </div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 6860491..1a506d6 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -19,6 +19,7 @@ export default defineComponent({
 		return {
 			highlight: false, // Used to draw a colored outline on mouse hover
 			inTransition: false, // Used to prevent content overlap and overflow during transitions
+			wasClicked: false, // Used to increase z-index during transition after this tile (or a child) is clicked
 			hasExpanded: false, // Set to true after an expansion transition ends, and false upon collapse
 				// Used to hide overflow on tile expansion, but not hide a sepSweptArea on subsequent transitions
 			clickHoldTimer: 0, // Used to recognise click-and-hold events
@@ -72,7 +73,7 @@ export default defineComponent({
 				transitionDuration: this.uiOpts.tileChgDuration + 'ms',
 				transitionProperty: 'left, top, width, height, visibility',
 				transitionTimingFunction: 'ease-out',
-				zIndex: this.inTransition ? '1' : '0',
+				zIndex: this.inTransition && this.wasClicked ? '1' : '0',
 				overflow: this.inTransition && !this.isLeaf && !this.hasExpanded ? 'hidden' : 'visible',
 				// CSS variables
 				'--nonleafBgColor': this.nonleafBgColor,
@@ -239,6 +240,8 @@ export default defineComponent({
 				console.log('Ignored click on non-expandable node');
 				return;
 			}
+			this.wasClicked = true;
+			setTimeout(() => {this.wasClicked = false}, this.uiOpts.tileChgDuration);
 			this.$emit(this.isLeaf ? 'leaf-click' : 'nonleaf-click', this.layoutNode);
 		},
 		onClickHold(){
@@ -262,9 +265,13 @@ export default defineComponent({
 		},
 		// Child event propagation
 		onInnerLeafClick(node: LayoutNode){
+			this.wasClicked = true;
+			setTimeout(() => {this.wasClicked = false}, this.uiOpts.tileChgDuration);
 			this.$emit('leaf-click', node);
 		},
 		onInnerNonleafClick(node: LayoutNode){
+			this.wasClicked = true;
+			setTimeout(() => {this.wasClicked = false}, this.uiOpts.tileChgDuration);
 			this.$emit('nonleaf-click', node);
 		},
 		onInnerLeafClickHeld(node: LayoutNode){
-- 
cgit v1.2.3