diff options
| -rw-r--r-- | src/App.vue | 4 | ||||
| -rw-r--r-- | src/components/Tile.vue | 48 |
2 files changed, 16 insertions, 36 deletions
diff --git a/src/App.vue b/src/App.vue index 380a814..eb00856 100644 --- a/src/App.vue +++ b/src/App.vue @@ -47,10 +47,6 @@ const defaultUiOpts = { imgTileFontSz: 15, //px imgTileColor: '#fafaf9', expandableImgTileColor: 'greenyellow', //yellow, greenyellow, turquoise, - infoIconSz: 18, //px - infoIconPadding: 2, //px - infoIconColor: 'rgba(250,250,250,0.3)', - infoIconHoverColor: 'white', // For non-leaf tile-group components 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 4dedda8..26ece88 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -15,7 +15,6 @@ export default defineComponent({ data(){ return { highlight: false, - infoMouseOver: false, clickHoldTimer: 0, // Used to recognise a click-and-hold event animating: false, // Used to prevent content overlap and overflow during transitions } @@ -87,17 +86,6 @@ export default defineComponent({ whiteSpace: 'nowrap', }; }, - infoIconStyles(): Record<string,string> { - return { - width: this.uiOpts.infoIconSz + 'px', - height: this.uiOpts.infoIconSz + 'px', - marginTop: 'auto', - marginBottom: this.uiOpts.infoIconPadding + 'px', - marginRight: this.uiOpts.infoIconPadding + 'px', - alignSelf: 'flex-end', - color: this.infoMouseOver ? this.uiOpts.infoIconHoverColor : this.uiOpts.infoIconColor, - }; - }, nonLeafStyles(): Record<string,string> { let temp = { width: '100%', @@ -188,18 +176,6 @@ export default defineComponent({ this.onClickHold(); }, this.uiOpts.clickHoldDuration); }, - onClickHold(){ - if (this.isLeaf && !this.isExpandable){ - console.log('Ignored click-hold on non-expandable node'); - return; - } - this.prepForTransition(); - if (this.isLeaf){ - this.$emit('leaf-click-held', this.layoutNode); - } else { - this.$emit('header-click-held', this.layoutNode); - } - }, onMouseUp(){ if (this.clickHoldTimer > 0){ clearTimeout(this.clickHoldTimer); @@ -219,6 +195,18 @@ export default defineComponent({ this.$emit('header-clicked', this.layoutNode); } }, + onClickHold(){ + if (this.isLeaf && !this.isExpandable){ + console.log('Ignored click-hold on non-expandable node'); + return; + } + this.prepForTransition(); + if (this.isLeaf){ + this.$emit('leaf-click-held', this.layoutNode); + } else { + this.$emit('header-click-held', this.layoutNode); + } + }, prepForTransition(){ this.animating = true; setTimeout(() => {this.animating = false}, this.uiOpts.transitionDuration); @@ -226,7 +214,7 @@ export default defineComponent({ onInfoClick(evt: Event){ this.$emit('info-icon-clicked', this.layoutNode); }, - // For coloured-outlines on hovered-over leaf-tiles or non-leaf-headers + // For coloured outlines on hover onMouseEnter(evt: Event){ if (!this.isLeaf || this.isExpandable){ this.highlight = true; @@ -237,12 +225,6 @@ export default defineComponent({ this.highlight = false; } }, - onInfoMouseEnter(evt: Event){ - this.infoMouseOver = true; - }, - onInfoMouseLeave(evt: Event){ - this.infoMouseOver = false; - }, // Child event propagation onInnerLeafClicked(data: LayoutNode){ this.$emit('leaf-clicked', data); @@ -278,7 +260,9 @@ export default defineComponent({ @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> <h1 :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</h1> - <info-icon :style="infoIconStyles" class="hover:cursor-pointer" + <info-icon + class="w-[18px] h-[18px] mt-auto mb-[2px] mr-[2px] self-end + text-white/30 hover:text-white hover:cursor-pointer" @mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave" @click.stop="onInfoClick" @mousedown.stop @mouseup.stop/> </div> |