diff options
| -rw-r--r-- | src/App.vue | 4 | ||||
| -rw-r--r-- | src/components/Tile.vue | 15 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 5 |
3 files changed, 15 insertions, 9 deletions
diff --git a/src/App.vue b/src/App.vue index 534b2df..caf5aa9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -64,10 +64,8 @@ const defaultUiOpts = { shadowFocused: '0 0 1px 2px orange', infoIconSz: 18, //px infoIconMargin: 2, //px - highTipsVal: 50, + tipThresholds: [[1, 'greenyellow'], [100, 'orange'], [1000, 'red']], headerColor: '#fafaf9', - headerColor2: 'greenyellow', - headerColor3: 'orange', // For leaf tiles leafTilePadding: 4, //px leafHeaderFontSz: 15, //px 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> |