From d2443589d9c9e0e433d548b7ecd0ac7bcd7f32ad Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 19 Mar 2022 11:52:54 +1100
Subject: Add coloured-outline for hovered-over images

---
 src/components/Tile.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index e312892..9e4be03 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -19,7 +19,7 @@ export default defineComponent({
 			leafHeaderHorzSpc: 4,
 			leafHeaderVertSpc: 2,
 			leafHeaderColor: '#fafaf9',
-			expandableLeafHeaderColor: 'greenyellow', //yellow, turquoise,
+			expandableLeafHeaderColor: 'greenyellow', //yellow, greenyellow, turquoise,
 			nonLeafBgColor: '#44403c',
 			nonLeafHeaderColor: '#fafaf9',
 			nonLeafHeaderBgColor: '#78716c',
@@ -57,6 +57,7 @@ export default defineComponent({
 				transitionTimingFunction: 'ease-out',
 				// CSS variables
 				'--nonLeafBgColor': this.nonLeafBgColor,
+				'--expandableLeafHeaderColor': this.expandableLeafHeaderColor,
 			};
 		},
 		leafStyles(): Record<string,string> {
@@ -172,7 +173,8 @@ export default defineComponent({
 
 <template>
 <div :style="tileStyles">
-	<div v-if="isLeaf" :style="leafStyles" :class="isExpandable ? 'hover:cursor-pointer' : ''" @click="onLeafClick">
+	<div v-if="isLeaf" :style="leafStyles"
+		:class="isExpandable ? ['hover:cursor-pointer', 'shadow-on-hover'] : ''" @click="onLeafClick">
 		<div :style="{borderRadius: this.borderRadius}" class="upper-scrim"/>
 		<div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div>
 	</div>
@@ -220,4 +222,7 @@ export default defineComponent({
 	width: 100%;
 	background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.4));
 }
+.shadow-on-hover:hover {
+	box-shadow: 0 0 1px 2px var(--expandableLeafHeaderColor);
+}
 </style>
-- 
cgit v1.2.3