diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Tile.vue | 62 |
1 files changed, 30 insertions, 32 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 5c98daf..4292735 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -15,6 +15,7 @@ export default defineComponent({ }, data(){ return { + borderRadius: '5px', // Used during transitions and to emulate/show an apparently-joined div zIdx: 0, overflow: this.isRoot ? 'hidden' : 'visible', @@ -49,7 +50,7 @@ export default defineComponent({ height: '100%', backgroundImage: 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.png\')', backgroundSize: 'cover', - outline: 'black solid 1px', + borderRadius: this.borderRadius, opacity: (this.layoutNode.tolNode.children.length > 0) ? '1' : '0.7', }; }, @@ -63,17 +64,25 @@ export default defineComponent({ }; }, nonLeafStyles(): Record<string,string> { - return { + let temp = { width: '100%', height: '100%', backgroundColor: 'white', outline: 'black solid 1px', + borderRadius: this.borderRadius, }; + if (this.layoutNode.sepSweptArea != null){ + temp = this.layoutNode.sepSweptArea.sweptLeft ? + {...temp, borderRadius: `${this.borderRadius} ${this.borderRadius} ${this.borderRadius} 0`} : + {...temp, borderRadius: `${this.borderRadius} 0 ${this.borderRadius} ${this.borderRadius}`}; + } + return temp; }, nonLeafHeaderStyles(): Record<string,string> { return { height: this.headerSz + 'px', backgroundColor: 'lightgray', + borderRadius: `${this.borderRadius} ${this.borderRadius} 0 0`, textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', @@ -84,6 +93,7 @@ export default defineComponent({ let commonStyles = { position: 'absolute', backgroundColor: 'white', + outline: 'black solid 1px', transitionDuration: this.transitionDuration + 'ms', transitionProperty: 'left, top, width, height', transitionTimingFunction: 'ease-out', @@ -103,15 +113,14 @@ export default defineComponent({ ...commonStyles, left: area.pos[0] + 'px', top: area.pos[1] + 'px', - width: (area.dims[0] + (area.sweptLeft ? 1 : 0)) + 'px', - height: (area.dims[1] + (area.sweptLeft ? 0 : 1)) + 'px', + width: area.dims[0] + 'px', + height: area.dims[1] + 'px', + borderRadius: area.sweptLeft ? + `${this.borderRadius} 0 0 ${this.borderRadius}` : + `${this.borderRadius} ${this.borderRadius} 0 0`, }; } }, - sepSweptAreaOutlineClasses(){ - let area = this.layoutNode.sepSweptArea; - return ['outline-top-left', (area && area.sweptLeft) ? 'outline-bottom-left' : 'outline-top-right']; - }, }, methods: { onLeafClick(){ @@ -147,7 +156,8 @@ export default defineComponent({ <div v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> {{layoutNode.tolNode.name}} </div> - <div :style="sepSweptAreaStyles" :class="sepSweptAreaOutlineClasses"> + <div :style="sepSweptAreaStyles" + :class="layoutNode?.sepSweptArea?.sweptLeft ? 'hide-right-edge' : 'hide-top-edge'"> <div v-if="layoutNode?.sepSweptArea?.sweptLeft === false" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> {{layoutNode.tolNode.name}} @@ -161,34 +171,22 @@ export default defineComponent({ </template> <style> -.outline-top-left::before { +.hide-right-edge::before { content: ''; position: absolute; - background-color: black; - left: -1px; - top: -1px; - width: 100%; - height: 100%; - z-index: -10; + background-color: white; + right: -1px; + bottom: 0; + width: 1px; + height: 101%; } -.outline-bottom-left::after { +.hide-top-edge::before { content: ''; position: absolute; - background-color: black; - left: -1px; + background-color: white; bottom: -1px; - width: 100%; - height: 100%; - z-index: -10; -} -.outline-top-right::after { - content: ''; - position: absolute; - background-color: black; - right: -1px; - top: -1px; - width: 100%; - height: 100%; - z-index: -10; + right: 0; + width: 101%; + height: 1px; } </style> |