From 143fc4b59d68ac145563c5a95fefd960a0afc250 Mon Sep 17 00:00:00 2001 From: Dan Popescu Date: Thu, 9 Jul 2020 16:12:36 +0300 Subject: [PATCH] fix(QBtn): improve stretch #7381 - QBtnDropdown - allow main button to grow to fill the space - QBrnGroup - fix missing specific border radius for push - QBtnToggle - option settings have priority over global settings and add class and style - QBtn - use specific class for stretch to allow easy customization and to allow button to grow --- .../src/pages/components/button-dropdown.vue | 174 ++++++++++++++++++ ui/dev/src/pages/components/button-toggle.vue | 30 ++- .../components/btn-dropdown/QBtnDropdown.sass | 20 +- .../components/btn-dropdown/QBtnDropdown.styl | 20 +- ui/src/components/btn-group/QBtnGroup.sass | 2 + ui/src/components/btn-group/QBtnGroup.styl | 2 + ui/src/components/btn-toggle/QBtnToggle.js | 12 +- ui/src/components/btn-toggle/QBtnToggle.json | 2 +- ui/src/components/btn/QBtn.sass | 5 + ui/src/components/btn/QBtn.styl | 5 + ui/src/mixins/btn.js | 2 +- 11 files changed, 250 insertions(+), 24 deletions(-) diff --git a/ui/dev/src/pages/components/button-dropdown.vue b/ui/dev/src/pages/components/button-dropdown.vue index aeb720a4e6a9..c5ca4584c0a0 100644 --- a/ui/dev/src/pages/components/button-dropdown.vue +++ b/ui/dev/src/pages/components/button-dropdown.vue @@ -359,6 +359,176 @@ + +
+ + +
+
+ + + + + + + + Photos + + February 22, 2016 + + + + + + + + + Files + + + + + + + Vacation + + February 22, 2016 + + + + + + + + + + + + + + + + + + Photos + + February 22, 2016 + + + + + + + + + Files + + + + + + + Vacation + + February 22, 2016 + + + + + + + + + + + + + + + + + + Photos + + February 22, 2016 + + + + + + + + + Files + + + + + + + Vacation + + February 22, 2016 + + + + + + + + + + + + + + + + + Photos + + February 22, 2016 + + + + + + + + + Files + + + + + + + Vacation + + February 22, 2016 + + + + + + + + +
@@ -367,6 +537,10 @@ export default { data () { return { toggle: false, + + fullWidth: true, + stretch: false, + conf: [ { split: false, dense: false, disable: false }, { split: false, dense: true, disable: false }, diff --git a/ui/dev/src/pages/components/button-toggle.vue b/ui/dev/src/pages/components/button-toggle.vue index 04dc0b42912c..993fe7b4bbba 100644 --- a/ui/dev/src/pages/components/button-toggle.vue +++ b/ui/dev/src/pages/components/button-toggle.vue @@ -23,6 +23,29 @@ :options="optionsO1" /> +
+ +
+ +
+ +
+ .q-btn--push &.q-btn--actionable transform: none diff --git a/ui/src/components/btn-group/QBtnGroup.styl b/ui/src/components/btn-group/QBtnGroup.styl index e2994b04d1d8..e0b7c948e925 100644 --- a/ui/src/components/btn-group/QBtnGroup.styl +++ b/ui/src/components/btn-group/QBtnGroup.styl @@ -41,6 +41,8 @@ z-index: -1 &--push + border-radius: $button-push-border-radius + > .q-btn--push &.q-btn--actionable transform: none diff --git a/ui/src/components/btn-toggle/QBtnToggle.js b/ui/src/components/btn-toggle/QBtnToggle.js index 9af23308e7fb..18296c87ed72 100644 --- a/ui/src/components/btn-toggle/QBtnToggle.js +++ b/ui/src/components/btn-toggle/QBtnToggle.js @@ -95,6 +95,8 @@ export default Vue.extend({ const child = this.options.map((opt, i) => { return h(QBtn, { key: i, + class: opt.class, + style: opt.style, on: { ...this.qListeners, click: e => this.__set(opt.value, opt, e) @@ -107,8 +109,8 @@ export default Vue.extend({ textColor: opt.value === this.value ? opt.toggleTextColor || this.toggleTextColor : opt.textColor || this.textColor, icon: opt.icon, iconRight: opt.iconRight, - noCaps: this.noCaps === true || opt.noCaps === true, - noWrap: this.noWrap === true || opt.noWrap === true, + noCaps: opt.noCaps === void 0 ? this.noCaps : opt.noCaps === true, + noWrap: opt.noWrap === void 0 ? this.noWrap : opt.noWrap === true, outline: this.outline, flat: this.flat, rounded: this.rounded, @@ -116,10 +118,10 @@ export default Vue.extend({ unelevated: this.unelevated, size: this.size, dense: this.dense, - ripple: this.ripple !== void 0 ? this.ripple : opt.ripple, - stack: this.stack === true || opt.stack === true, + ripple: opt.ripple === void 0 ? this.ripple : opt.ripple, + stack: opt.stack === void 0 ? this.stack : opt.stack === true, tabindex: opt.tabindex, - stretch: this.stretch + stretch: opt.stretch === void 0 ? this.stretch : opt.stretch === true } }, opt.slot !== void 0 ? slot(this, opt.slot) : void 0) }) diff --git a/ui/src/components/btn-toggle/QBtnToggle.json b/ui/src/components/btn-toggle/QBtnToggle.json index 079cc4b39c8e..1bee26168d5c 100644 --- a/ui/src/components/btn-toggle/QBtnToggle.json +++ b/ui/src/components/btn-toggle/QBtnToggle.json @@ -44,7 +44,7 @@ }, "...props": { "type": "Any", - "desc": "Any other QBtn props", + "desc": "Any other QBtn props (including class and style)", "__exemption": [ "examples" ] } }, diff --git a/ui/src/components/btn/QBtn.sass b/ui/src/components/btn/QBtn.sass index 425bf2bd54cb..984cce1b32fd 100644 --- a/ui/src/components/btn/QBtn.sass +++ b/ui/src/components/btn/QBtn.sass @@ -92,6 +92,11 @@ &--rounded border-radius: $button-rounded-border-radius + &--stretch + border-radius: 0 + align-self: stretch + flex-grow: 1 + &--round border-radius: 50% diff --git a/ui/src/components/btn/QBtn.styl b/ui/src/components/btn/QBtn.styl index 425bf2bd54cb..984cce1b32fd 100644 --- a/ui/src/components/btn/QBtn.styl +++ b/ui/src/components/btn/QBtn.styl @@ -92,6 +92,11 @@ &--rounded border-radius: $button-rounded-border-radius + &--stretch + border-radius: 0 + align-self: stretch + flex-grow: 1 + &--round border-radius: 50% diff --git a/ui/src/mixins/btn.js b/ui/src/mixins/btn.js index f31f9dcbddb5..3674c9aaac1c 100644 --- a/ui/src/mixins/btn.js +++ b/ui/src/mixins/btn.js @@ -156,7 +156,7 @@ export default { (this.noCaps === true ? ' q-btn--no-uppercase' : '') + (this.noWrap === true ? '' : ' q-btn--wrap') + // this is for IE11 (this.dense === true ? ' q-btn--dense' : '') + - (this.stretch === true ? ' no-border-radius self-stretch' : '') + + (this.stretch === true ? ' q-btn--stretch' : '') + (this.glossy === true ? ' glossy' : '') },