From a1e1b30df73b8138e77961f00c40797478e68763 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 17:14:17 +1100
Subject: Simplify transition code

---
 src/components/Settings.vue      | 10 ++++------
 src/components/TileInfoModal.vue | 31 +++++--------------------------
 src/components/TileTree.vue      | 13 ++++++++++++-
 3 files changed, 21 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index e596e46..0c7f360 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -41,7 +41,7 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full overflow-hidden invisible"
 	@click="closeClicked">
 	<!-- outer div prevents overflow from transitioning to/from off-screen -->
-	<Transition name="slide-bottom-right">
+	<transition name="slide-bottom-right">
 		<div v-if="isOpen"
 			class="absolute bottom-4 right-4 min-w-[5cm] p-3 bg-stone-50 visible rounded-md shadow shadow-black">
 			<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
@@ -114,10 +114,8 @@ export default defineComponent({
 					v-model.number="componentOptions.transitionDuration"/></label>
 			</div>
 		</div>
-	</Transition>
-	<Transition name="slide-bottom-right">
-		<!-- outer div prevents transition interference with inner rotate -->
-		<div v-if="!isOpen" class="absolute bottom-0 right-0 w-[100px] h-[100px]">
+		<div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px]">
+			<!-- outer div prevents transition interference with inner rotate -->
 			<div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45
 				bg-black text-white hover:cursor-pointer" @click="openClicked">
 				<svg class="w-[24px] h-[24px] mx-auto mt-[9px]"
@@ -138,7 +136,7 @@ export default defineComponent({
 				</svg>
 			</div>
 		</div>
-	</Transition>
+	</transition>
 </div>
 </template>
 
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 367546d..fedd933 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -4,34 +4,13 @@ import {TolNode} from '../lib';
 
 export default defineComponent({
 	props: {
-		tolNode: {type: Object as PropType<TolNode | null>}, // The node to display, or null to hide
+		tolNode: {type: Object as PropType<TolNode>},
 		options: {type: Object, required: true},
 	},
-	data(){
-		return {
-			lastNode: null as TolNode | null, // Caches tolNode to prevent content-change during fade-out
-		};
-	},
-	watch: {
-		tolNode(newNode){
-			if (newNode != null){
-				this.lastNode = newNode;
-			}
-		},
-	},
 	computed: {
-		transitionStyles(): Record<string,string> {
-			return {
-				visibility: this.tolNode != null ? 'visible' : 'hidden',
-				opacity: this.tolNode != null ? '1' : '0',
-				transition: 'visibility, opacity',
-				transitionDuration: this.options.transitionDuration + 'ms',
-			};
-		},
 		imgStyles(): Record<string,string> {
 			return {
-				backgroundImage: this.lastNode == null ? 'none' :
-					'url(\'/img/' + this.lastNode.name.replaceAll('\'', '\\\'') + '.png\')',
+				backgroundImage: 'url(\'/img/' + this.tolNode.name.replaceAll('\'', '\\\'') + '.png\')',
 				width: this.options.infoModalImgSz + 'px',
 				height: this.options.infoModalImgSz + 'px',
 				backgroundSize: 'cover',
@@ -46,18 +25,18 @@ export default defineComponent({
 			}
 		},
 	},
-	emits: ['info-modal-close']
+	emits: ['info-modal-close'],
 });
 </script>
 
 <template>
-<div :style="transitionStyles" class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
 		<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
 				font-bold hover:cursor-pointer"
 			@click="closeClicked" ref="closeIcon">&times;</div>
-		<h1 class="text-center text-xl font-bold mb-2">{{lastNode != null ? lastNode.name : 'NULL'}}</h1>
+		<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div :style="imgStyles" class="float-left mr-4" alt="an image"></div>
 		<div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 10a437d..1c08085 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -251,7 +251,10 @@ export default defineComponent({
 	<parent-bar v-if="sepdParents != null"
 		:pos="[0,0]" :dims="parentBarDims" :nodes="sepdParents" :options="componentOptions"
 		@sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
-	<tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/>
+	<transition name="fade">
+		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions"
+			@info-modal-close="onInfoModalClose"/>
+	</transition>
 	<settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
 		@settings-open="onSettingsOpen" @settings-close="onSettingsClose"
 		@layout-option-change="onLayoutOptionChange"/>
@@ -293,4 +296,12 @@ export default defineComponent({
 		transform: translate3d(0,0,0) scale(1, 1);
 	}
 }
+.fade-enter-from, .fade-leave-to {
+	opacity: 0;
+}
+.fade-enter-active, .fade-leave-active {
+	transition-property: opacity;
+	transition-duration: 300ms;
+	transition-timing-function: ease-out;
+}
 </style>
-- 
cgit v1.2.3