diff options
| -rw-r--r-- | src/App.vue | 8 | ||||
| -rw-r--r-- | src/components/Tile.vue | 23 |
2 files changed, 19 insertions, 12 deletions
diff --git a/src/App.vue b/src/App.vue index eb00856..b28531a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -489,12 +489,12 @@ export default defineComponent({ :lytOpts="lytOpts" :uiOpts="uiOpts" @detached-ancestor-clicked="onDetachedAncestorClicked" @info-icon-clicked="onInnerInfoIconClicked"/> <!-- Icons --> + <help-icon @click="onHelpIconClick" + class="absolute bottom-[6px] left-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> <search-icon @click="onSearchIconClick" - class="absolute top-[6px] right-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> + class="absolute bottom-[6px] left-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> <play-icon @click="onPlayIconClick" - class="absolute top-[6px] right-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> - <help-icon @click="onHelpIconClick" - class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> + class="absolute bottom-[6px] left-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> <!-- Modals --> <transition name="fade"> <tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :uiOpts="uiOpts" diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 26ece88..9e10615 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -263,23 +263,30 @@ export default defineComponent({ <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> <div v-else :style="nonLeafStyles" ref="nonLeaf"> - <h1 v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" + <div v-if="showHeader" :style="nonLeafHeaderStyles" class="flex hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - {{layoutNode.tolNode.name}} - </h1> + <h1 class="grow">{{layoutNode.tolNode.name}}</h1> + <info-icon + class="w-[18px] h-[18px] mr-[2px] + text-white/20 hover:text-white hover:cursor-pointer" + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop/> + </div> <div :style="sepSweptAreaStyles" ref="sepSweptArea" :class="layoutNode?.sepSweptArea?.sweptLeft ? 'hide-right-edge' : 'hide-top-edge'"> - <h1 v-if="layoutNode?.sepSweptArea?.sweptLeft === false" - :style="nonLeafHeaderStyles" class="hover:cursor-pointer" + <div v-if="layoutNode?.sepSweptArea?.sweptLeft === false" + :style="nonLeafHeaderStyles" class="flex hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> - {{layoutNode.tolNode.name}} - </h1> + <h1 class="grow">{{layoutNode.tolNode.name}}</h1> + <info-icon + class="w-[18px] h-[18px] mr-[2px] + text-white/20 hover:text-white hover:cursor-pointer" + @click.stop="onInfoClick" @mousedown.stop @mouseup.stop/> + </div> </div> <tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child" :lytOpts="lytOpts" :uiOpts="uiOpts" |