From 28d98f54ffe42f0b10971789214e765f2fae098c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 9 Mar 2022 19:00:53 +1100
Subject: Add divs enclosing parent-area-using tiles

---
 src/components/Tile.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/components/Tile.vue')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 50f43ce..7af5583 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -49,6 +49,18 @@ export default {
 			class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
 			{{tree.tolNode.name}}
 		</div>
+		<div v-if="tree.sideArea"
+			: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">
+			<tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child"
+				@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
+				></tile>
+		</div>
 		<tile v-for="child in tree.children" :key="child.tolNode.name" :tree="child"
 			@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
 			></tile>
-- 
cgit v1.2.3