fix: QEditor toolbar btns + fix scroll on iOS; Button sizes, padding, dense, btn groups and dropdown alignment

Author: rstoenescu

dev/components/components/button-dropdown.vue

@@ -3,6 +3,8 @@
     <div v-for="(cfg, index1) in conf" :key="`${cfg.split}-${cfg.dense}`">
       <div v-for="(size, index2) in sizes" :key="size">
         <p class="caption">{{ label(cfg) }} - {{ size }}</p>
+        text
+        <q-btn :size="size" color="primary" glossy :dense="cfg.dense" label="Test" />
         <q-btn-dropdown ref="first" :size="size" :split="cfg.split" :dense="cfg.dense" @show="log('open')" @hide="log('close')" @click="log('click')" color="primary" glossy label="Dropdown Button" style="margin: 15px">
           <q-list link>
             <q-list-header inset>Folders X</q-list-header>

dev/components/components/button.vue

@@ -3,13 +3,22 @@
     <div class="layout-padding buttons-test">
       <p class="group">
         <template v-for="n in ['xs', 'sm', 'md', 'lg', 'xl']">
-          <span>{{n}}</span>
           <q-btn :size="n" dense icon="android" color="primary" />
           <q-btn :size="n" icon="android" color="primary" />
+          <q-btn :size="n" label="Test" color="primary" />
           <q-btn :size="n" icon="android" color="primary" label="Test"/>
           <q-btn :size="n" round icon="android" color="primary" />
           <q-btn :size="n" round icon="android" color="primary" dense />
           <q-btn :size="n" label="Test" color="primary" />
+          <span>{{n}}</span>
+          <br><br>
+        </template>
+        <template v-for="n in ['xs', 'sm', 'md', 'lg', 'xl']">
+          <q-btn :size="n" dense label="Test" color="primary" />
+          <q-btn :size="n" dense icon="android" color="primary" />
+          <q-btn :size="n" dense icon="android" color="primary" label="Test"/>
+          <q-btn :size="n" dense round icon="android" color="primary" />
+          <span>{{n}}</span>
           <br><br>
         </template>
       </p>
@@ -27,7 +36,7 @@
       <q-toolbar color="black" style="width: 500px">
         <q-btn flat round icon="menu" />
         <q-btn flat round icon="android" />
-        <q-btn flat round icon="assignment_ind" />
+        <q-btn flat dense icon="assignment_ind" />
         <q-btn flat round icon="android" />
         <q-toolbar-title>
           Toolbar

dev/components/form/editor.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="layout-padding">
     <q-editor
-      style="margin-right: 8em"
       ref="editor"
       v-model="model"
       :toolbar="[
@@ -71,8 +70,8 @@
         gogu: {tip: 'Custom', icon: 'account_balance', handler: vm => vm.runCmd('print')}
       }"
     >
-      <q-btn dense size="sm" color="yellow" slot="custom_btn">Wow</q-btn>
-      <q-btn-dropdown size="sm" dense no-caps ref="token" no-wrap slot="token" color="green" label="Token">
+      <q-btn dense color="yellow" slot="custom_btn">Wow</q-btn>
+      <q-btn-dropdown dense no-caps ref="token" no-wrap slot="token" color="green" label="Token">
         <q-list link separator>
           <q-item tag="label" @click.native="add('email')">
             <q-item-side icon="mail" />

src/components/btn/btn-default.ios.styl

@@ -5,7 +5,6 @@
   outline 0
   border 0
   vertical-align middle
-  vertical-align -webkit-baseline-middle
   cursor pointer
   -webkit-appearance button
   padding $button-padding
@@ -58,8 +57,8 @@
   width 3em
 
 .q-btn-dense
-  padding $button-dense-padding
-  min-height 0
+  padding .285em
+  min-height 2em
   &.q-btn-round
     padding 0
     height 2.4em

src/components/btn/btn-default.mat.styl

@@ -5,7 +5,6 @@
   outline 0
   border 0
   vertical-align middle
-  vertical-align -webkit-baseline-middle
   cursor pointer
   -webkit-appearance button
   padding $button-padding
@@ -73,8 +72,8 @@
     box-shadow $shadow-8
 
 .q-btn-dense
-  padding $button-dense-padding
-  min-height 0
+  padding .285em
+  min-height 2em
   &.q-btn-round
     padding 0
     height 2.4em

src/components/btn/btn-dropdown.ios.styl

@@ -1,6 +1,3 @@
-.q-btn-dropdown-simple .q-btn-dropdown-arrow
-  width 10px
-  font-size 24px
 .q-btn-dropdown-split .q-btn-dropdown-arrow
   padding 0 4px
   border-left 1px solid rgba(255, 255, 255, .3)

src/components/btn/btn-dropdown.mat.styl

@@ -1,6 +1,3 @@
-.q-btn-dropdown-simple .q-btn-dropdown-arrow
-  width 10px
-  font-size 24px
 .q-btn-dropdown-split .q-btn-dropdown-arrow
   padding 0 4px
   border-left 1px solid rgba(255, 255, 255, .3)

src/components/btn/btn-group.ios.styl

@@ -1,6 +1,6 @@
 .q-btn-group
   border-radius $button-border-radius
-  vertical-align text-bottom
+  vertical-align middle
   .q-btn:not(:last-child)
     border-top-right-radius 0
     border-bottom-right-radius 0

src/components/btn/btn-group.mat.styl

@@ -1,7 +1,7 @@
 .q-btn-group
   border-radius $button-border-radius
   box-shadow $button-shadow
-  vertical-align text-bottom
+  vertical-align middle
   > .q-btn-group
     box-shadow none
   .q-btn

src/components/editor/QEditor.js

@@ -59,7 +59,6 @@ export default {
         outline: this.outline,
         flat: this.flat,
         push: this.push,
-        size: 'sm',
         dense: true
       }
     },
@@ -259,14 +258,18 @@ export default {
     const toolbars = []
     if (!this.readonly) {
       const toolbarConfig = {
-        staticClass: `q-editor-toolbar q-editor-toolbar-padding overflow-auto row no-wrap bg-${this.toolbarColor}`,
+        staticClass: `q-editor-toolbar row no-wrap scroll bg-${this.toolbarColor}`,
         'class': {
           'q-editor-toolbar-separator': !this.outline && !this.push
         }
       }
-      toolbars.push(h('div', extend({key: 'qedt_top'}, toolbarConfig), getToolbar(h, this)))
+      toolbars.push(h('div', extend({key: 'qedt_top'}, toolbarConfig), [
+        h('div', { staticClass: 'row no-wrap q-editor-toolbar-padding fit items-center' }, getToolbar(h, this))
+      ]))
       if (this.editLinkUrl !== null) {
-        toolbars.push(h('div', extend({key: 'qedt_btm'}, toolbarConfig), getLinkEditor(h, this)))
+        toolbars.push(h('div', extend({key: 'qedt_btm'}, toolbarConfig), [
+          h('div', { staticClass: 'row no-wrap q-editor-toolbar-padding fit items-center' }, getLinkEditor(h, this))
+        ]))
       }
     }
     return h(