From f88356170eba031ad73296b73609ac7b7161510b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 19 Mar 2022 20:16:33 +1100
Subject: Attempt adding colored-outline for hovered-over tile-groups using
 dummy divs

---
 src/components/Tile.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 411ba76..b5995bf 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -193,15 +193,17 @@ export default defineComponent({
 		<div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div>
 	</div>
 	<div v-else :style="nonLeafStyles" class="shadow-normal">
-		<div v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick">
+		<h1 v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick">
 			{{layoutNode.tolNode.name}}
-		</div>
+		</h1>
+		<div class="dummy"/>
 		<div :style="sepSweptAreaStyles"
 			:class="[layoutNode?.sepSweptArea?.sweptLeft ? 'hide-right-edge' : 'hide-top-edge', 'shadow-normal']">
-			<div v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
+			<h1 v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
 				:style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick">
 				{{layoutNode.tolNode.name}}
-			</div>
+			</h1>
+			<div class="dummy"/>
 		</div>
 		<tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child"
 			:headerSz="headerSz" :tileSpacing="tileSpacing" :transitionDuration="transitionDuration"
@@ -245,4 +247,15 @@ export default defineComponent({
 .shadow-normal {
 	box-shadow: var(--shadowNormal);
 }
+.dummy {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 5px;
+	z-index: -1;
+}
+h1:hover ~ .dummy, h1:hover ~ div > .dummy {
+	box-shadow: var(--shadowWithHover);
+}
 </style>
-- 
cgit v1.2.3