diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-09 19:00:53 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-09 19:15:31 +1100 |
| commit | 28d98f54ffe42f0b10971789214e765f2fae098c (patch) | |
| tree | 2c42d26e0142341c3da05120a219bccbd768a498 /src/components/Tile.vue | |
| parent | 97f30117298686cb0b49df2e6633ba017b3e2547 (diff) | |
Add divs enclosing parent-area-using tiles
Diffstat (limited to 'src/components/Tile.vue')
| -rw-r--r-- | src/components/Tile.vue | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 50f43ce..7af5583 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -49,6 +49,18 @@ export default { class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick"> {{tree.tolNode.name}} </div> + <div v-if="tree.sideArea" + :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"> + <tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child" + @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked" + ></tile> + </div> <tile v-for="child in tree.children" :key="child.tolNode.name" :tree="child" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked" ></tile> |