diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-05-10 15:30:28 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-05-10 15:40:27 +1000 |
| commit | 81124cde7b1838248c41f8fbfce83db9e935e5b4 (patch) | |
| tree | b2467e9042ed90434db6e103f79b8aa57b36eeb0 /src | |
| parent | 2efedbfdfad405c3e76d8bbadec5afcd808991ad (diff) | |
Add multiple header-color thresholds
Also add tips count in info modal
Diffstat (limited to 'src')
| -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> |