From 66e031d2414b8c3f2c5c4f6b51dfa4789c3623c8 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 23 Mar 2022 16:39:29 +1100 Subject: Add scrollBarOffset in ParentBar --- src/components/ParentBar.vue | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/ParentBar.vue b/src/components/ParentBar.vue index cee8bea..242f715 100644 --- a/src/components/ParentBar.vue +++ b/src/components/ParentBar.vue @@ -12,6 +12,7 @@ export default defineComponent({ data(){ return { tileMargin: 5, //px (gap between separated-parent tiles) + scrollBarOffset: 10, //px (gap for scrollbar, used to prevent overlap with tiles) }; }, computed: { @@ -19,15 +20,21 @@ export default defineComponent({ return this.dims[0] >= this.dims[1]; }, tileSz(){ - return (this.wideArea ? this.dims[1] : this.dims[0]) - (this.tileMargin * 2); + return (this.wideArea ? this.dims[1] : this.dims[0]) - (this.tileMargin * 2) - this.scrollBarOffset; + }, + hasOverflow(){ + let len = this.tileMargin + (this.tileSz + this.tileMargin) * this.nodes.length; + return len > (this.wideArea ? this.dims[0] : this.dims[1]); }, styles(): Record { return { position: 'absolute', left: this.pos[0] + 'px', top: this.pos[1] + 'px', - width: this.dims[0] + 'px', - height: this.dims[1] + 'px', + width: (this.dims[0] + (this.wideArea || this.hasOverflow ? 0 : -this.scrollBarOffset)) + 'px', + height: (this.dims[1] + (!this.wideArea || this.hasOverflow ? 0 : -this.scrollBarOffset)) + 'px', + paddingRight: (this.hasOverflow && !this.wideArea ? this.scrollBarOffset : 0) + 'px', + paddingBottom: (this.hasOverflow && this.wideArea ? this.scrollBarOffset : 0) + 'px', overflowX: this.wideArea ? 'auto' : 'hidden', overflowY: this.wideArea ? 'hidden' : 'auto', display: 'flex', -- cgit v1.2.3