From 5d6d6e200c430c0240cbfc71325175f8d1151c54 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 23 Jun 2022 19:35:30 +1000
Subject: Remove Tile info icons.

---
 src/App.vue             |  2 --
 src/components/Tile.vue | 60 +++++++++++++++++++------------------------------
 2 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0c9a96c..8eb42f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,8 +64,6 @@ const defaultUiOpts = {
 	shadowNormal: '0 0 2px black',
 	shadowHighlight: '0 0 1px 2px greenyellow',
 	shadowFocused: '0 0 1px 2px orange',
-	infoIconSz: 18, //px
-	infoIconMargin: 2, //px
 	childThresholds: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
 	headerColor: '#fafaf9',
 	// For leaf tiles
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 7b412b2..a190106 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -152,23 +152,19 @@ export default defineComponent({
 				return {
 					// Image (and scrims)
 					backgroundImage: this.tolNode.imgName != null ?
-						'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
+						'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' +
 							'url(\'/img/' + (this.tolNode.imgName as string).replaceAll('\'', '\\\'') + '\')' :
 						'none',
 					backgroundColor: '#1c1917',
 					backgroundSize: 'cover',
-					// Child layout
-					display: 'flex',
-					flexDirection: 'column',
 					// Other
+					display: 'block',
 					borderRadius: 'inherit',
 				};
 			} else {
 				return {
-					// Child layout
 					display: 'grid',
-					gridTemplateColumns: '1fr',
-					// Other
+					gridTemplateColumns: 'minmax(0,1fr)',
 					borderRadius: 'inherit',
 				};
 			}
@@ -248,18 +244,6 @@ export default defineComponent({
 				whiteSpace: 'nowrap',
 			};
 		},
-		infoIconStyles(): Record<string,string> {
-			let size = this.uiOpts.infoIconSz + 'px';
-			return {
-				width: size,
-				height: size,
-				minWidth: size,
-				minHeight: size,
-				margin: this.uiOpts.infoIconMargin + 'px',
-				marginTop: 'auto',
-				marginLeft: 'auto',
-			};
-		},
 		sepSweptAreaStyles(): Record<string,string> {
 			let borderR = this.uiOpts.borderRadius + 'px';
 			let styles = {
@@ -391,7 +375,7 @@ export default defineComponent({
 			}
 			this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode);
 		},
-		onInfoIconClick(evt: Event){
+		onInfoClick(evt: Event){
 			this.$emit('info-click', this.layoutNode.name);
 		},
 		// Mouse hover handling
@@ -437,7 +421,7 @@ export default defineComponent({
 				height: '100%',
 				// Image (and scrims)
 				backgroundImage: (this.tolNode.imgName![idx]! != null) ?
-					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
+					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' +
 						'url(\'/img/' + this.tolNode.imgName![idx]!.replaceAll('\'', '\\\'') + '\')' :
 					'none',
 				backgroundColor: '#1c1917',
@@ -471,34 +455,36 @@ export default defineComponent({
 	<div v-if="isLeaf" :style="leafStyles" class="w-full h-full" :class="{'hover:cursor-pointer': isExpandableLeaf}"
 		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
 		<template v-if="!hasCompoundImage">
-			<h1 :style="leafHeaderStyles">{{displayName}}</h1>
-			<info-icon :style="infoIconStyles"
-				class="text-white/10 hover:text-white hover:cursor-pointer"
-				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+			<h1 :style="leafHeaderStyles" class="hover:underline hover:cursor-pointer max-w-full w-min"
+				@click.stop="onInfoClick" @mousedown.stop @mouseup.stop>
+				{{displayName}}
+			</h1>
 		</template>
 		<template v-else>
 			<div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div>
 			<div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div>
-			<h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1>
-			<info-icon :style="infoIconStyles"
-				class="col-start-1 row-start-1 z-10 text-white/10 hover:text-white hover:cursor-pointer"
-				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+			<h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10 hover:underline hover:cursor-pointer max-w-full w-min"
+				@click.stop="onInfoClick" @mousedown.stop @mouseup.stop>
+				{{displayName}}
+			</h1>
 		</template>
 	</div>
 	<div v-else :style="nonleafStyles" ref="nonleaf">
-		<div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
+		<div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="hover:cursor-pointer"
 			@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-			<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
-			<info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
-				@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+			<h1 :style="nonleafHeaderTextStyles" class="grow hover:underline hover:cursor-pointer max-w-[80%] w-min mx-auto"
+				@click.stop="onInfoClick" @mousedown.stop @mouseup.stop>
+				{{displayName}}
+			</h1>
 		</div>
 		<div :style="sepSweptAreaStyles" ref="sepSweptArea" :class="sepSweptAreaHideEdgeClass">
 			<div v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
-				:style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
+				:style="nonleafHeaderStyles" class="hover:cursor-pointer"
 				@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
-				<h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
-				<info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer"
-					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+				<h1 :style="nonleafHeaderTextStyles" class="grow hover:underline hover:cursor-pointer max-w-[80%] w-min mx-auto"
+					@click.stop="onInfoClick" @mousedown.stop @mouseup.stop>
+					{{displayName}}
+				</h1>
 			</div>
 		</div>
 		<tile v-for="child in visibleChildren" :key="child.name"
-- 
cgit v1.2.3