From 39792d870ed213b45b43d2cc38cf78f6ae94b137 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 24 Mar 2022 16:39:33 +1100
Subject: Propagate options to TileInfoModal

---
 src/components/TileInfoModal.vue | 11 ++++++-----
 src/components/TileTree.vue      |  4 +++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index c7e0d64..8b96ebb 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -5,6 +5,7 @@ import {TolNode} from '../lib';
 export default defineComponent({
 	props: {
 		tolNode: {type: Object as PropType<TolNode | null>}, // The node to display, or null to hide
+		options: {type: Object, required: true},
 	},
 	data(){
 		return {
@@ -24,17 +25,17 @@ export default defineComponent({
 				visibility: this.tolNode != null ? 'visible' : 'hidden',
 				opacity: this.tolNode != null ? '1' : '0',
 				transition: 'visibility, opacity',
-				transitionDuration: '300ms',
+				transitionDuration: this.options.transitionDuration + 'ms',
 			};
 		},
 		imgStyles(): Record<string,string> {
 			return {
 				backgroundImage: this.lastNode == null ? 'none' :
 					'url(\'/img/' + this.lastNode.name.replaceAll('\'', '\\\'') + '.png\')',
-				width: '200px',
-				height: '200px',
+				width: this.options.infoModalImgSz + 'px',
+				height: this.options.infoModalImgSz + 'px',
 				backgroundSize: 'cover',
-				borderRadius: '5px',
+				borderRadius: this.options.borderRadius + 'px',
 			}
 		},
 	},
@@ -51,7 +52,7 @@ export default defineComponent({
 
 <template>
 <div :style="transitionStyles" class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeIconClicked">
-	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/3 p-4 bg-stone-50 rounded-md">
+	<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">
 		<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="closeIconClicked" ref="closeIcon">&times;</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 0b1cc58..99ea9e3 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -51,6 +51,8 @@ const defaultComponentOptions = {
 	nonLeafHeaderFontSz: 15, //px
 	nonLeafHeaderColor: '#fafaf9',
 	nonLeafHeaderBgColor: '#1c1917',
+	// For tile-info modal
+	infoModalImgSz: 200,
 	// Timing related
 	transitionDuration: 300, //ms
 	dblClickWait: 200, //ms
@@ -235,7 +237,7 @@ 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" @info-modal-close="onInfoModalClose"/>
+	<tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/>
 </div>
 </template>
 
-- 
cgit v1.2.3