diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-05-05 13:17:13 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-05-05 13:19:02 +1000 |
| commit | 6bb1d2e369512bec91ecc0c63238f4ad4c54c528 (patch) | |
| tree | 1ff7b085fb518ec69c4d1cc82879d4f588a43991 /src/components/Tile.vue | |
| parent | 975638afe73b3aec4617987800fc6871e6134469 (diff) | |
Display common names
Also add capitalizeWords() in util.ts, for more capitalization control
Diffstat (limited to 'src/components/Tile.vue')
| -rw-r--r-- | src/components/Tile.vue | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 744adc3..f656b09 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -5,6 +5,7 @@ import {LayoutNode} from '../layout'; import type {LayoutOptions} from '../layout'; import type {TolMap} from '../tol'; import {TolNode} from '../tol'; +import {capitalizeWords} from '../util'; // Displays one, or a hierarchy of, tree-of-life nodes, as a 'tile' export default defineComponent({ @@ -42,6 +43,9 @@ export default defineComponent({ return (this.layoutNode.showHeader && this.layoutNode.sepSweptArea == null) || (this.layoutNode.sepSweptArea != null && this.layoutNode.sepSweptArea.sweptLeft); }, + displayName(): string { + return capitalizeWords(this.tolNode.commonName || this.layoutNode.name); + }, // Style related nonleafBgColor(): string { let colorArray = this.uiOpts.nonleafBgColors; @@ -316,7 +320,7 @@ export default defineComponent({ <div v-if="isLeaf" :style="leafStyles" class="w-full h-full flex flex-col overflow-hidden" :class="{'hover:cursor-pointer': isExpandableLeaf}" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - <h1 :style="leafHeaderStyles" class="capitalize">{{layoutNode.name}}</h1> + <h1 :style="leafHeaderStyles">{{displayName}}</h1> <info-icon :style="[infoIconStyles, {marginTop: 'auto'}]" class="self-end text-white/10 hover:text-white hover:cursor-pointer" @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> @@ -324,7 +328,7 @@ export default defineComponent({ <div v-else :style="nonleafStyles" class="w-full h-full" ref="nonleaf"> <div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - <h1 :style="nonleafHeaderTextStyles" class="grow capitalize">{{layoutNode.name}}</h1> + <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1> <info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer" @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> </div> @@ -333,7 +337,7 @@ export default defineComponent({ <div v-if="layoutNode?.sepSweptArea?.sweptLeft === false" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - <h1 :style="nonleafHeaderTextStyles" class="grow capitalize">{{layoutNode.name}}</h1> + <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1> <info-icon :style="infoIconStyles" class="text-white/10 hover:text-white hover:cursor-pointer" @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> </div> |