From 79924e66ffede17987368fca55320431949577f3 Mon Sep 17 00:00:00 2001 From: Jeff Galbraith Date: Sat, 2 Nov 2019 11:27:23 -0600 Subject: [PATCH] fix(ui): range-type and DateTime have issue recalculating body height --- ui/src/component/QDateRangeScroller.js | 6 ++++-- ui/src/component/QDateTimeScroller.js | 6 ++++-- ui/src/component/QTimeRangeScroller.js | 6 ++++-- ui/src/component/mixins/common.js | 19 ++++++++++++------- ui/src/component/utils/props.js | 3 ++- 5 files changed, 26 insertions(+), 14 deletions(-) diff --git a/ui/src/component/QDateRangeScroller.js b/ui/src/component/QDateRangeScroller.js index 4503f12..2c2cc73 100644 --- a/ui/src/component/QDateRangeScroller.js +++ b/ui/src/component/QDateRangeScroller.js @@ -275,7 +275,8 @@ export default { noMonths: this.startNoMonths, noYears: this.startNoYears, yearBegin: this.startYearBegin, - yearStop: this.startYearStop + yearStop: this.startYearStop, + childHeight: this.bodyHeight }, class: { 'q-scroller__vertical-bar': this.verticalBar === true @@ -319,7 +320,8 @@ export default { noMonths: this.endNoMonths, noYears: this.endNoYears, yearBegin: this.endYearBegin, - yearStop: this.endYearStop + yearStop: this.endYearStop, + childHeight: this.bodyHeight }, on: { input: v => { this.endDate = v } diff --git a/ui/src/component/QDateTimeScroller.js b/ui/src/component/QDateTimeScroller.js index 34b8fc0..3c52fa7 100644 --- a/ui/src/component/QDateTimeScroller.js +++ b/ui/src/component/QDateTimeScroller.js @@ -221,7 +221,8 @@ export default { showWeekdayLabel: this.showWeekdayLabel, noDays: this.noDays, noMonths: this.noMonths, - noYears: this.noYears + noYears: this.noYears, + childHeight: this.bodyHeight }, class: { 'q-scroller__vertical-bar': this.verticalBar === true @@ -258,7 +259,8 @@ export default { disabledHours: this.disabledHours, disabledMinutes: this.disabledMinutes, noMinutes: this.noMinutes, - noHours: this.noHours + noHours: this.noHours, + childHeight: this.bodyHeight }, on: { input: v => { this.time = v } diff --git a/ui/src/component/QTimeRangeScroller.js b/ui/src/component/QTimeRangeScroller.js index 03f8342..79cc6d5 100644 --- a/ui/src/component/QTimeRangeScroller.js +++ b/ui/src/component/QTimeRangeScroller.js @@ -264,7 +264,8 @@ export default { disabledHours: this.startDisabledHours, disabledMinutes: this.startDisabledMinutes, noMinutes: this.startNoMinutes, - noHours: this.startNoHours + noHours: this.startNoHours, + childHeight: this.bodyHeight }, class: { 'q-scroller__vertical-bar': this.verticalBar === true @@ -302,7 +303,8 @@ export default { disabledHours: this.endDisabledHours, disabledMinutes: this.endDisabledMinutes, noMinutes: this.endNoMinutes, - noHours: this.endNoHours + noHours: this.endNoHours, + childHeight: this.bodyHeight }, on: { input: v => { this.endTime = v } diff --git a/ui/src/component/mixins/common.js b/ui/src/component/mixins/common.js index 517ebe4..bb77978 100644 --- a/ui/src/component/mixins/common.js +++ b/ui/src/component/mixins/common.js @@ -9,6 +9,7 @@ export default { let style = {} style['--scroller-border-color'] = this.calculateColor(this.borderColor) style['--scroller-bar-color'] = this.calculateColor(this.barColor) + style.height = this.bodyHeight return style } }, @@ -44,12 +45,16 @@ export default { let self = this // this.$nextTick(() => { setTimeout(() => { - self.headerHeight = self.noHeader === true ? 0 : self.dense === true ? 25 : 50 - self.footerHeight = self.noFooter === true ? 0 : self.dense === true ? 25 : 50 - self.height = self.$el.getBoundingClientRect().height - self.bodyHeight = self.height - self.headerHeight - self.footerHeight - if (self.noHeader !== true && self.noFooter !== true && self.noBorder !== true) { - self.bodyHeight -= 2 + if (this.childHeight === void 0) { + self.headerHeight = self.noHeader === true ? 0 : self.dense === true ? 25 : 50 + self.footerHeight = self.noFooter === true ? 0 : self.dense === true ? 25 : 50 + self.height = self.$el.getBoundingClientRect().height + self.bodyHeight = self.height - self.headerHeight - self.footerHeight + if (self.noHeader !== true && self.noFooter !== true && self.noBorder !== true) { + self.bodyHeight -= 2 + } + } else { + self.bodyHeight = this.childHeight } }, 200) }, @@ -65,7 +70,7 @@ export default { 'q-scroller__overflow-hidden': this.$q.platform.is.mobile !== true }, style: { - height: this.bodyHeight + 'px' + height: (this.childHeight === void 0 ? this.bodyHeight : this.childHeight) + 'px' } }), [ this.__renderScrollers(h) diff --git a/ui/src/component/utils/props.js b/ui/src/component/utils/props.js index 33047ca..65cf884 100644 --- a/ui/src/component/utils/props.js +++ b/ui/src/component/utils/props.js @@ -27,7 +27,8 @@ export default { disabledTextColor: { type: String, default: 'grey-7' - } + }, + childHeight: [Number, String] }, base: { value: null, // [Number, String, Object, Array, Date, Function],