From 7cdd3ae45c2544b239d85174d536fa641f01cf38 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 9 Mar 2022 23:32:04 +1100
Subject: Re-position headers for parent-area-using tile-groups

---
 src/components/Tile.vue     | 8 ++++++--
 src/components/TileTree.vue | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 7af5583..8121608 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -45,7 +45,8 @@ export default {
 		class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick"
 		/>
 	<div v-else>
-		<div v-if="tree.headerSz > 0" :style="{height: tree.headerSz+'px'}"
+		<div v-if="(tree.headerSz && !tree.sideArea) || (tree.sideArea && tree.sideArea.sweptLeft)"
+			:style="{height: tree.headerSz+'px'}"
 			class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
 			{{tree.tolNode.name}}
 		</div>
@@ -53,10 +54,13 @@ export default {
 			:style="{position: 'absolute', left: tree.sideArea.x+'px', top: tree.sideArea.y+'px',
 				width: (tree.sideArea.w + (tree.sideArea.sweptLeft ? tree.sideArea.extraSz : 0))+'px',
 				height: (tree.sideArea.h + (tree.sideArea.sweptLeft ? 0 : tree.sideArea.extraSz))+'px',
-				borderWidth: tree.sideArea.w > 0 ? '1px' : '0',
 				borderRightColor: (tree.sideArea.sweptLeft ? 'white' : 'currentColor'),
 				borderBottomColor: (tree.sideArea.sweptLeft ? 'currentColor' : 'white')}"
 			class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white">
+			<div v-if="!tree.sideArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
+				class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
+				{{tree.tolNode.name}}
+			</div>
 			<tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child"
 				@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
 				></tile>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index a772594..4ce3f28 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -27,14 +27,14 @@ export default {
 			let tree = {
 				tolNode:tol, children:[],
 				x:0, y:0, w:0, h:0, headerSz:0,
-				sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0},
+				sideArea:null,
 			};
 			function initTreeRec(tree, lvl){
 				if (lvl > 0)
 					tree.children = tree.tolNode.children.map(tNode => initTreeRec({
 						tolNode: tNode, children: [],
 						x:0, y:0, w:0, h:0, headerSz:0,
-						sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0},
+						sideArea:null,
 					}, lvl-1));
 				return tree;
 			}
@@ -97,7 +97,7 @@ export default {
 					n.y += layout.sideArea.y;
 				});
 			} else {
-				tree.sideArea = {x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0};
+				tree.sideArea = null;
 			}
 		}
 	},
-- 
cgit v1.2.3