diff options
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/Tile.vue | 60 |
2 files changed, 23 insertions, 39 deletions
diff --git a/src/App.vue b/src/App.vue index 0c9a96c..8eb42f5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -64,8 +64,6 @@ const defaultUiOpts = { shadowNormal: '0 0 2px black', shadowHighlight: '0 0 1px 2px greenyellow', shadowFocused: '0 0 1px 2px orange', - infoIconSz: 18, //px - infoIconMargin: 2, //px childThresholds: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']], headerColor: '#fafaf9', // For leaf tiles diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 7b412b2..a190106 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -152,23 +152,19 @@ export default defineComponent({ return { // Image (and scrims) backgroundImage: this.tolNode.imgName != null ? - 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + + 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' + 'url(\'/img/' + (this.tolNode.imgName as string).replaceAll('\'', '\\\'') + '\')' : 'none', backgroundColor: '#1c1917', backgroundSize: 'cover', - // Child layout - display: 'flex', - flexDirection: 'column', // Other + display: 'block', borderRadius: 'inherit', }; } else { return { - // Child layout display: 'grid', - gridTemplateColumns: '1fr', - // Other + gridTemplateColumns: 'minmax(0,1fr)', borderRadius: 'inherit', }; } @@ -248,18 +244,6 @@ export default defineComponent({ whiteSpace: 'nowrap', }; }, - infoIconStyles(): Record<string,string> { - let size = this.uiOpts.infoIconSz + 'px'; - return { - width: size, - height: size, - minWidth: size, - minHeight: size, - margin: this.uiOpts.infoIconMargin + 'px', - marginTop: 'auto', - marginLeft: 'auto', - }; - }, sepSweptAreaStyles(): Record<string,string> { let borderR = this.uiOpts.borderRadius + 'px'; let styles = { @@ -391,7 +375,7 @@ export default defineComponent({ } this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode); }, - onInfoIconClick(evt: Event){ + onInfoClick(evt: Event){ this.$emit('info-click', this.layoutNode.name); }, // Mouse hover handling @@ -437,7 +421,7 @@ export default defineComponent({ height: '100%', // Image (and scrims) backgroundImage: (this.tolNode.imgName![idx]! != null) ? - 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + + 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%),' + 'url(\'/img/' + this.tolNode.imgName![idx]!.replaceAll('\'', '\\\'') + '\')' : 'none', backgroundColor: '#1c1917', @@ -471,34 +455,36 @@ export default defineComponent({ <div v-if="isLeaf" :style="leafStyles" class="w-full h-full" :class="{'hover:cursor-pointer': isExpandableLeaf}" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> <template v-if="!hasCompoundImage"> - <h1 :style="leafHeaderStyles">{{displayName}}</h1> - <info-icon :style="infoIconStyles" - class="text-white/10 hover:text-white hover:cursor-pointer" - @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> + <h1 :style="leafHeaderStyles" class="hover:underline hover:cursor-pointer max-w-full w-min" + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop> + {{displayName}} + </h1> </template> <template v-else> <div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div> <div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div> - <h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1> - <info-icon :style="infoIconStyles" - class="col-start-1 row-start-1 z-10 text-white/10 hover:text-white hover:cursor-pointer" - @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> + <h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10 hover:underline hover:cursor-pointer max-w-full w-min" + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop> + {{displayName}} + </h1> </template> </div> <div v-else :style="nonleafStyles" ref="nonleaf"> - <div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer" + <div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - <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/> + <h1 :style="nonleafHeaderTextStyles" class="grow hover:underline hover:cursor-pointer max-w-[80%] w-min mx-auto" + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop> + {{displayName}} + </h1> </div> <div :style="sepSweptAreaStyles" ref="sepSweptArea" :class="sepSweptAreaHideEdgeClass"> <div v-if="layoutNode?.sepSweptArea?.sweptLeft === false" - :style="nonleafHeaderStyles" class="flex hover:cursor-pointer" + :style="nonleafHeaderStyles" class="hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - <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/> + <h1 :style="nonleafHeaderTextStyles" class="grow hover:underline hover:cursor-pointer max-w-[80%] w-min mx-auto" + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop> + {{displayName}} + </h1> </div> </div> <tile v-for="child in visibleChildren" :key="child.name" |