From 81124cde7b1838248c41f8fbfce83db9e935e5b4 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 10 May 2022 15:30:28 +1000
Subject: Add multiple header-color thresholds

Also add tips count in info modal
---
 src/components/Tile.vue          | 15 ++++++++++-----
 src/components/TileInfoModal.vue |  5 ++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 418c931..08f3c9b 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -122,17 +122,22 @@ export default defineComponent({
 			};
 		},
 		leafHeaderStyles(): Record<string,string> {
+			let numChildren = this.tolNode.children.length;
+			let headerColor = this.uiOpts.headerColor;
+			for (let [threshold, color] of this.uiOpts.tipThresholds){
+				if (numChildren >= threshold){
+					headerColor = color;
+				} else {
+					break;
+				}
+			}
 			return {
 				height: (this.uiOpts.leafHeaderFontSz + this.uiOpts.leafTilePadding * 2) + 'px',
 				padding: this.uiOpts.leafTilePadding + 'px',
 				lineHeight: this.uiOpts.leafHeaderFontSz + 'px',
 				fontSize: this.uiOpts.leafHeaderFontSz + 'px',
 				fontStyle: this.tolNode.pSupport ? 'normal' : 'italic',
-				color: this.tolNode.children.length == 0 ?
-					this.uiOpts.headerColor :
-					this.tolNode.children.length < this.uiOpts.highTipsVal ?
-						this.uiOpts.headerColor2 :
-						this.uiOpts.headerColor3,
+				color: headerColor,
 				// For ellipsis
 				overflow: 'hidden',
 				textOverflow: 'ellipsis',
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 275dd08..72515d3 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -79,7 +79,10 @@ export default defineComponent({
 		bg-stone-50 rounded-md shadow shadow-black">
 		<close-icon @click.stop="onCloseClick" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
-		<h1 class="text-center text-xl font-bold mb-2">{{displayName}}</h1>
+		<h1 class="text-center text-xl font-bold mb-2">
+			{{displayName}}
+			<div v-if="tolNode.children.length > 0">({{tolNode.children.length}} children)</div>
+		</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div class="flex">
 			<div>
-- 
cgit v1.2.3