diff options
Diffstat (limited to 'src/components/TileImg.vue')
| -rw-r--r-- | src/components/TileImg.vue | 41 |
1 files changed, 38 insertions, 3 deletions
diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue index be6704c..5a3a2f8 100644 --- a/src/components/TileImg.vue +++ b/src/components/TileImg.vue @@ -11,6 +11,7 @@ export default defineComponent({ data(){ return { highlight: false, + infoMouseOver: false, }; }, computed: { @@ -19,15 +20,20 @@ export default defineComponent({ }, styles(): Record<string,string> { return { - border: '1px black solid', + // Sizing width: this.tileSz + 'px', height: this.tileSz + 'px', minWidth: this.tileSz + 'px', minHeight: this.tileSz + 'px', + // Image backgroundImage: - 'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 40%),' + + 'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%),' + 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.png\')', backgroundSize: 'cover', + // Child layout + display: 'flex', + flexDirection: 'column', + // Other borderRadius: this.options.borderRadius + 'px', boxShadow: this.highlight ? this.options.shadowHighlight : this.options.shadowNormal, }; @@ -45,6 +51,17 @@ export default defineComponent({ whiteSpace: 'nowrap', }; }, + infoIconStyles(): Record<string,string> { + return { + width: this.options.infoIconSz + 'px', + height: this.options.infoIconSz + 'px', + marginTop: 'auto', + marginBottom: this.options.infoIconPadding + 'px', + marginRight: this.options.infoIconPadding + 'px', + alignSelf: 'flex-end', + color: this.infoMouseOver ? this.options.infoIconHoverColor : this.options.infoIconColor, + }; + }, }, methods: { onMouseEnter(evt: Event){ @@ -54,13 +71,23 @@ export default defineComponent({ }, onMouseLeave(evt: Event){ if (this.isExpandable){ - this.highlight = false; } + this.highlight = false; + } }, onClick(evt: Event){ if (this.isExpandable){ this.highlight = false; } }, + onInfoMouseEnter(evt: Event){ + this.infoMouseOver = true; + }, + onInfoMouseLeave(evt: Event){ + this.infoMouseOver = false; + }, + onInfoClick(evt: Event){ + console.log('Clicked on info icon: ' + this.layoutNode.tolNode.name); + }, }, }); </script> @@ -69,5 +96,13 @@ export default defineComponent({ <div :style="styles" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="onClick" :class="isExpandable ? ['hover:cursor-pointer'] : []"> <h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1> + <svg :style="infoIconStyles" class="hover:cursor-pointer" + @mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave" @click.stop="onInfoClick" + xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" + stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <circle cx="12" cy="12" r="10"/> + <line x1="12" y1="16" x2="12" y2="12"/> + <line x1="12" y1="8" x2="12.01" y2="8"/> + </svg> </div> </template> |