fix(QBtn): improve stretch #7381 (#7387)

- 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
quasarframework · Jul 10, 2020 · 4e2c448 · 4e2c448
1 parent 42bffa9
commit 4e2c448
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 24 deletions.
diff --git a/ui/dev/src/pages/components/button-dropdown.vue b/ui/dev/src/pages/components/button-dropdown.vue
@@ -359,6 +359,176 @@
         </q-item>
       </q-list>
     </q-btn-dropdown>
+
+    <div class="row q-gutter-x-md q-my-md">
+      <q-toggle v-model="fullWidth" label="Full width" />
+      <q-toggle v-model="stretch" label="Stretch" />
+    </div>
+    <div class="column q-gutter-y-md" :class="fullWidth ? 'items-stretch' : 'items-start'">
+      <q-btn-dropdown :stretch="stretch" persistent v-model="toggle" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
+        <q-list>
+          <q-item clickable v-for="n in 2" :key="`1.${n}`" v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="folder" color="primary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Photos</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+          <q-separator inset="item" spaced />
+          <q-item-label header inset>
+            Files
+          </q-item-label>
+          <q-item clickable v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="assignment" color="secondary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vacation</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+
+      <q-btn-dropdown :stretch="stretch" no-caps @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy style="margin: 15px">
+        <template v-slot:label>
+          <div class="row items-center col-grow justify-center no-wrap">
+            <q-icon left name="map" />
+            <div class="text-center">
+              Custom<br>Content
+            </div>
+          </div>
+        </template>
+        <q-list>
+          <q-item clickable v-for="n in 2" :key="`1.${n}`" v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="folder" color="primary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Photos</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+          <q-separator inset="item" spaced />
+          <q-item-label header inset>
+            Files
+          </q-item-label>
+          <q-item clickable v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="assignment" color="secondary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vacation</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+
+      <q-btn-dropdown :stretch="stretch" split no-caps @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy style="margin: 15px">
+        <template v-slot:label>
+          <div class="col row items-center no-wrap">
+            <q-icon left name="map" />
+            <div class="text-center">
+              Custom<br>Content
+            </div>
+          </div>
+        </template>
+        <q-list>
+          <q-item clickable v-for="n in 2" :key="`1.${n}`" v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="folder" color="primary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Photos</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+          <q-separator inset="item" spaced />
+          <q-item-label header inset>
+            Files
+          </q-item-label>
+          <q-item clickable v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="assignment" color="secondary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vacation</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+
+      <q-btn-dropdown :stretch="stretch" dropdown-icon="change_history" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Custom Dropdown Icon" style="margin: 15px">
+        <q-list>
+          <q-item clickable v-for="n in 2" :key="`1.${n}`" v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="folder" color="primary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Photos</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+          <q-separator inset="item" spaced />
+          <q-item-label header inset>
+            Files
+          </q-item-label>
+          <q-item clickable v-close-popup @click="showNotification">
+            <q-item-section avatar>
+              <q-avatar icon="assignment" color="secondary" text-color="white" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>Vacation</q-item-label>
+              <q-item-label caption>
+                February 22, 2016
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="info" color="amber" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </div>
   </div>
 </template>
 
@@ -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
@@ -23,6 +23,29 @@
       :options="optionsO1"
     />
 
+    <div class="row">
+      <q-btn-toggle
+        class="col"
+        v-model="model"
+        toggle-color="primary"
+        push
+        rounded
+        stretch
+        :options="optionsO1"
+      />
+    </div>
+
+    <div class="row">
+      <q-btn-toggle
+        class="col"
+        v-model="model"
+        toggle-color="primary"
+        push
+        rounded
+        :options="optionsO3"
+      />
+    </div>
+
     <q-btn-toggle
       v-model="model"
       toggle-color="primary"
@@ -104,13 +127,18 @@ export default {
       options: [true, false],
       optionsO1: [
         { label: 'One', value: 'one' },
-        { label: 'Two', value: 'two' },
+        { label: 'Two - this one has a longer label', value: 'two' },
         { label: 'Three', value: 'three' }
       ],
       optionsO2: [
         { label: 'One Clearable', value: 'one' },
         { label: 'Two', value: 'two' }
       ],
+      optionsO3: [
+        { label: 'One', value: 'one', color: 'green-2', textColor: 'black', stretch: true },
+        { label: 'Two - this one has a longer label', value: 'two', color: 'red-2', textColor: 'black' },
+        { label: 'Three', value: 'three', color: 'blue-2', textColor: 'black', stretch: true }
+      ],
       optionsS1: [
         { label: 'One tooltip', value: 'one', slot: 'one' },
         { label: 'Two tooltip', value: 'two', slot: 'two' },

diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.sass b/ui/src/components/btn-dropdown/QBtnDropdown.sass
@@ -1,10 +1,14 @@
-.q-btn-dropdown--split .q-btn-dropdown__arrow-container
-  border-left: 1px solid rgba(255,255,255,.3)
+.q-btn-dropdown
+  &--split .q-btn-dropdown__arrow-container
+    border-left: 1px solid rgba(255,255,255,.3)
 
-  .q-btn__wrapper
-    padding: 0 4px
+    .q-btn__wrapper
+      padding: 0 4px
 
-.q-btn-dropdown--simple .q-btn-dropdown__arrow
-  margin-left: 8px
-.q-btn-dropdown__arrow
-  transition: transform .28s
+  &--simple .q-btn-dropdown__arrow
+    margin-left: 8px
+  &__arrow
+    transition: transform .28s
+
+  &--current
+    flex-grow: 1
diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.styl b/ui/src/components/btn-dropdown/QBtnDropdown.styl
@@ -1,10 +1,14 @@
-.q-btn-dropdown--split .q-btn-dropdown__arrow-container
-  border-left: 1px solid rgba(255,255,255,.3)
+.q-btn-dropdown
+  &--split .q-btn-dropdown__arrow-container
+    border-left: 1px solid rgba(255,255,255,.3)
 
-  .q-btn__wrapper
-    padding: 0 4px
+    .q-btn__wrapper
+      padding: 0 4px
 
-.q-btn-dropdown--simple .q-btn-dropdown__arrow
-  margin-left: 8px
-.q-btn-dropdown__arrow
-  transition: transform .28s
+  &--simple .q-btn-dropdown__arrow
+    margin-left: 8px
+  &__arrow
+    transition: transform .28s
+
+  &--current
+    flex-grow: 1
diff --git a/ui/src/components/btn-group/QBtnGroup.sass b/ui/src/components/btn-group/QBtnGroup.sass
@@ -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-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
@@ -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,19 +109,19 @@ 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,
           push: this.push,
           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
@@ -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
@@ -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
@@ -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
@@ -154,7 +154,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' : '')
     },