From 304274b1380f955b6e1913428f6dbbc9efcf0bcf Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 28 Mar 2022 21:40:13 +1100
Subject: Add info-icon to non-leaf tiles

---
 src/App.vue             |  8 ++++----
 src/components/Tile.vue | 23 +++++++++++++++--------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index eb00856..b28531a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -489,12 +489,12 @@ export default defineComponent({
 		:lytOpts="lytOpts" :uiOpts="uiOpts"
 		@detached-ancestor-clicked="onDetachedAncestorClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
 	<!-- Icons -->
+	<help-icon @click="onHelpIconClick"
+		class="absolute bottom-[6px] left-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
 	<search-icon @click="onSearchIconClick"
-		class="absolute top-[6px] right-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+		class="absolute bottom-[6px] left-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
 	<play-icon @click="onPlayIconClick"
-		class="absolute top-[6px] right-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
-	<help-icon @click="onHelpIconClick"
-		class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+		class="absolute bottom-[6px] left-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :uiOpts="uiOpts"
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 26ece88..9e10615 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -263,23 +263,30 @@ export default defineComponent({
 		<info-icon
 			class="w-[18px] h-[18px] mt-auto mb-[2px] mr-[2px] self-end
 				text-white/30 hover:text-white hover:cursor-pointer"
-			@mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave"
 			@click.stop="onInfoClick" @mousedown.stop @mouseup.stop/>
 	</div>
 	<div v-else :style="nonLeafStyles" ref="nonLeaf">
-		<h1 v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer"
+		<div v-if="showHeader" :style="nonLeafHeaderStyles" class="flex hover:cursor-pointer"
 			@mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
 			@mousedown="onMouseDown" @mouseup="onMouseUp">
-			{{layoutNode.tolNode.name}}
-		</h1>
+			<h1 class="grow">{{layoutNode.tolNode.name}}</h1>
+			<info-icon
+				class="w-[18px] h-[18px] mr-[2px]
+					text-white/20 hover:text-white hover:cursor-pointer"
+				@click.stop="onInfoClick" @mousedown.stop @mouseup.stop/>
+		</div>
 		<div :style="sepSweptAreaStyles" ref="sepSweptArea"
 			:class="layoutNode?.sepSweptArea?.sweptLeft ? 'hide-right-edge' : 'hide-top-edge'">
-			<h1 v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
-				:style="nonLeafHeaderStyles" class="hover:cursor-pointer"
+			<div v-if="layoutNode?.sepSweptArea?.sweptLeft === false"
+				:style="nonLeafHeaderStyles" class="flex hover:cursor-pointer"
 				@mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
 				@mousedown="onMouseDown" @mouseup="onMouseUp">
-				{{layoutNode.tolNode.name}}
-			</h1>
+				<h1 class="grow">{{layoutNode.tolNode.name}}</h1>
+				<info-icon
+					class="w-[18px] h-[18px] mr-[2px]
+						text-white/20 hover:text-white hover:cursor-pointer"
+					@click.stop="onInfoClick" @mousedown.stop @mouseup.stop/>
+			</div>
 		</div>
 		<tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child"
 			:lytOpts="lytOpts" :uiOpts="uiOpts"
-- 
cgit v1.2.3