diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 8 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 6 |
2 files changed, 9 insertions, 5 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 7af5583..8121608 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -45,7 +45,8 @@ export default { class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick" /> <div v-else> - <div v-if="tree.headerSz > 0" :style="{height: tree.headerSz+'px'}" + <div v-if="(tree.headerSz && !tree.sideArea) || (tree.sideArea && tree.sideArea.sweptLeft)" + :style="{height: tree.headerSz+'px'}" class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick"> {{tree.tolNode.name}} </div> @@ -53,10 +54,13 @@ export default { :style="{position: 'absolute', left: tree.sideArea.x+'px', top: tree.sideArea.y+'px', width: (tree.sideArea.w + (tree.sideArea.sweptLeft ? tree.sideArea.extraSz : 0))+'px', height: (tree.sideArea.h + (tree.sideArea.sweptLeft ? 0 : tree.sideArea.extraSz))+'px', - borderWidth: tree.sideArea.w > 0 ? '1px' : '0', borderRightColor: (tree.sideArea.sweptLeft ? 'white' : 'currentColor'), borderBottomColor: (tree.sideArea.sweptLeft ? 'currentColor' : 'white')}" class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white"> + <div v-if="!tree.sideArea.sweptLeft" :style="{height: tree.headerSz+'px'}" + class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick"> + {{tree.tolNode.name}} + </div> <tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked" ></tile> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index a772594..4ce3f28 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -27,14 +27,14 @@ export default { let tree = { tolNode:tol, children:[], x:0, y:0, w:0, h:0, headerSz:0, - sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0}, + sideArea:null, }; function initTreeRec(tree, lvl){ if (lvl > 0) tree.children = tree.tolNode.children.map(tNode => initTreeRec({ tolNode: tNode, children: [], x:0, y:0, w:0, h:0, headerSz:0, - sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0}, + sideArea:null, }, lvl-1)); return tree; } @@ -97,7 +97,7 @@ export default { n.y += layout.sideArea.y; }); } else { - tree.sideArea = {x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0}; + tree.sideArea = null; } } }, |
