From 51a72b8c30b1173578b0a2a7bbfadcaa8e719e04 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 18 Mar 2022 23:10:42 +1100
Subject: Slightly reorganise CSS. Add basic image names.

---
 src/components/Tile.vue     | 35 ++++++++++++++++++++++++++---------
 src/components/TileTree.vue |  2 +-
 src/genTestImgs.sh          |  2 +-
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 9b74fee..5c98daf 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -39,8 +39,6 @@ export default defineComponent({
 				zIndex: String(this.zIdx),
 				overflow: String(this.overflow),
 				// Static styles
-				outline: 'black solid 1px',
-				backgroundColor: 'white',
 				transitionProperty: 'left, top, width, height',
 				transitionTimingFunction: 'ease-out',
 			};
@@ -49,12 +47,30 @@ export default defineComponent({
 			return {
 				width: '100%',
 				height: '100%',
-				backgroundImage: 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.jpg\')',
+				backgroundImage: 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.png\')',
 				backgroundSize: 'cover',
+				outline: 'black solid 1px',
 				opacity: (this.layoutNode.tolNode.children.length > 0) ? '1' : '0.7',
 			};
 		},
-		headerStyles(): Record<string,string> {
+		leafHeaderStyles(): Record<string,string> {
+			return {
+				height: this.headerSz + 'px',
+				textAlign: 'center',
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+			};
+		},
+		nonLeafStyles(): Record<string,string> {
+			return {
+				width: '100%',
+				height: '100%',
+				backgroundColor: 'white',
+				outline: 'black solid 1px',
+			};
+		},
+		nonLeafHeaderStyles(): Record<string,string> {
 			return {
 				height: this.headerSz + 'px',
 				backgroundColor: 'lightgray',
@@ -124,15 +140,16 @@ export default defineComponent({
 
 <template>
 <div :style="tileStyles">
-	<div v-if="layoutNode.children.length == 0"
-		:style="leafStyles" class="hover:cursor-pointer" @click="onLeafClick"/>
-	<div v-else>
-		<div v-if="showHeader" :style="headerStyles" class="hover:cursor-pointer" @click="onHeaderClick">
+	<div v-if="layoutNode.children.length == 0" :style="leafStyles" class="hover:cursor-pointer" @click="onLeafClick">
+		<div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div>
+	</div>
+	<div v-else :style="nonLeafStyles">
+		<div v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick">
 			{{layoutNode.tolNode.name}}
 		</div>
 		<div :style="sepSweptAreaStyles" :class="sepSweptAreaOutlineClasses">
 			<div v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
-				:style="headerStyles" class="hover:cursor-pointer" @click="onHeaderClick">
+				:style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick">
 				{{layoutNode.tolNode.name}}
 			</div>
 		</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index b2019ea..acb2134 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -21,7 +21,7 @@ const tol: TolNode = preprocessTol(tolRaw);
 // Configurable settings
 let layoutOptions: LayoutOptions = {
 	// Integer values specify pixels
-	tileSpacing: 5,
+	tileSpacing: 8,
 	headerSz: 20,
 	minTileSz: 50,
 	maxTileSz: 200,
diff --git a/src/genTestImgs.sh b/src/genTestImgs.sh
index a1dea28..1198a60 100755
--- a/src/genTestImgs.sh
+++ b/src/genTestImgs.sh
@@ -11,6 +11,6 @@ cat tol.json | \
 		convert -size 200x200 xc:khaki +repage \
 			-size 150x150  -fill black -background None  \
 			-font Ubuntu-Mono -gravity center caption:"$REPLY" +repage \
-			-gravity Center  -composite -strip ../public/img/"$REPLY".jpg
+			-gravity Center  -composite -strip ../public/img/"$REPLY".png
 	done
 
-- 
cgit v1.2.3