diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-04-25 02:22:41 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-04-25 02:22:41 +1000 |
| commit | e8fab23fe92230c2cb42412bb9ea6040ff14f072 (patch) | |
| tree | fdb9db8342ec271cd1657463c516df9645474506 /src | |
| parent | 2ab48497797441164e7f57fca2660097d93398ca (diff) | |
Add tile visual indicators for many-tiles and phylogenetic-support
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/Tile.vue | 8 |
2 files changed, 11 insertions, 3 deletions
diff --git a/src/App.vue b/src/App.vue index e00072b..cb2b1f4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -64,11 +64,13 @@ const defaultUiOpts = { shadowFocused: '0 0 1px 2px orange', infoIconSz: 18, //px infoIconMargin: 2, //px + highTipsVal: 50, + headerColor: '#fafaf9', + headerColor2: 'greenyellow', + headerColor3: 'orange', // For leaf tiles leafTilePadding: 4, //px leafHeaderFontSz: 15, //px - leafHeaderColor: '#fafaf9', - leafHeaderExColor: 'greenyellow', //yellow, greenyellow, turquoise, // For non-leaf tiles nonleafBgColors: ['#44403c', '#57534e'], //tiles at depth N use the Nth color, repeating from the start as needed nonleafHeaderFontSz: 15, //px diff --git a/src/components/Tile.vue b/src/components/Tile.vue index a0c0f0f..c5c261d 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -105,7 +105,12 @@ export default defineComponent({ padding: this.uiOpts.leafTilePadding + 'px', lineHeight: this.uiOpts.leafHeaderFontSz + 'px', fontSize: this.uiOpts.leafHeaderFontSz + 'px', - color: !this.isExpandableLeaf ? this.uiOpts.leafHeaderColor : this.uiOpts.leafHeaderExColor, + 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, // For ellipsis overflow: 'hidden', textOverflow: 'ellipsis', @@ -132,6 +137,7 @@ export default defineComponent({ height: this.lytOpts.headerSz + 'px', borderRadius: borderR, backgroundColor: this.uiOpts.nonleafHeaderBgColor, + fontStyle: this.tolNode.pSupport ? 'normal' : 'italic', }; }, nonleafHeaderTextStyles(): Record<string,string> { |