From 5e3aafa82d1984abc3f8908c325dfa7c18f26437 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 19 Mar 2022 10:29:36 +1100
Subject: Test putting image labels in box

---
 src/components/Tile.vue | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 9cf36d3..3ff4353 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -17,7 +17,7 @@ export default defineComponent({
 		return {
 			borderRadius: '5px',
 			leafHeaderHorzSpc: 4,
-			leafHeaderVertSpc: 2,
+			leafHeaderVertSpc: 4,
 			leafHeaderColor: 'white',
 			expandableLeafHeaderColor: 'greenyellow', //yellow, turquoise,
 			// Used during transitions and to emulate/show an apparently-joined div
@@ -68,9 +68,12 @@ export default defineComponent({
 				position: 'absolute',
 				left: this.leafHeaderHorzSpc + 'px',
 				top: this.leafHeaderVertSpc + 'px',
+				padding: '2px',
 				maxWidth: (this.layoutNode.dims[0] - this.leafHeaderHorzSpc*2) + 'px',
-				height: this.headerSz + 'px',
+				height: (this.headerSz + 4) + 'px',
 				lineHeight: this.headerSz + 'px',
+				backgroundColor: 'rgba(0,0,0,0.4)',
+				borderRadius: this.borderRadius,
 				color: this.isExpandable ? this.expandableLeafHeaderColor : this.leafHeaderColor,
 				// For ellipsis
 				overflow: 'hidden',
@@ -167,7 +170,6 @@ export default defineComponent({
 <template>
 <div :style="tileStyles">
 	<div v-if="isLeaf" :style="leafStyles" :class="isExpandable ? 'hover:cursor-pointer' : ''" @click="onLeafClick">
-		<div :style="{borderRadius: this.borderRadius}" class="upper-scrim"/>
 		<div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div>
 	</div>
 	<div v-else :style="nonLeafStyles">
@@ -207,11 +209,4 @@ export default defineComponent({
 	width: 101%;
 	height: 1px;
 }
-.upper-scrim {
-	position: absolute;
-	top: 0;
-	height: 50%;
-	width: 100%;
-	background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.4));
-}
 </style>
-- 
cgit v1.2.3