feat: QToolbarTitle enhancements

Author: rstoenescu

dev/components/test-layout/layout.vue

@@ -9,6 +9,7 @@
       </q-btn>
       <q-toolbar-title>
         Quasar Layout
+        <span slot="subtitle">The Subtiiiitleeee</span>
       </q-toolbar-title>
       <q-btn flat @click="sides.right = !sides.right">
         <q-icon name="menu" />
@@ -19,6 +20,14 @@
       <q-checkbox color="white" v-model="todo" />
       <q-checkbox color="white" v-model="right" />
     </q-toolbar>
+    <q-toolbar slot="header">
+      <q-btn flat round small>
+        <q-icon name="mail" />
+      </q-btn>
+      <q-toolbar-title>
+        Quasar Layout
+      </q-toolbar-title>
+    </q-toolbar>
 
     <q-toolbar v-if="todo" slot="header" color="secondary">
       <q-search inverted v-model="search" color="none"></q-search>

src/components/toolbar/QToolbar.js

@@ -15,7 +15,7 @@ export default {
       classes += ` ${prop.inverted ? 'text' : 'bg'}-${prop.color}`
     }
 
-    ctx.data.staticClass = `q-toolbar row items-center relative-position ${classes}${cls ? ` ${cls}` : ''}`
+    ctx.data.staticClass = `q-toolbar row no-wrap items-center relative-position ${classes}${cls ? ` ${cls}` : ''}`
 
     return h(
       'div',

src/components/toolbar/QToolbarTitle.js

@@ -4,13 +4,15 @@ export default {
   render (h, ctx) {
     const
       data = ctx.data,
-      cls = data.staticClass
+      cls = data.staticClass,
+      slots = ctx.slots(),
+      children = [slots.default]
 
+    if (slots.subtitle) {
+      children.push(h('div', { staticClass: 'q-toolbar-subtitle' }, slots.subtitle))
+    }
     data.staticClass = `q-toolbar-title${cls ? ` ${cls}` : ''}`
-    return h(
-      'div',
-      ctx.data,
-      ctx.children
-    )
+
+    return h('div', data, children)
   }
 }

src/components/toolbar/toolbar.ios.styl

@@ -1,7 +1,8 @@
-$toolbar-padding           ?= 4px 10px
-$toolbar-title-font-size   ?= .95rem
-$toolbar-title-font-weight ?= 600
-$toolbar-title-padding     ?= 0 5px
+$toolbar-padding            ?= 4px 10px
+$toolbar-title-font-size    ?= 16px
+$toolbar-subtitle-font-size ?= 12px
+$toolbar-title-font-weight  ?= 600
+$toolbar-title-padding      ?= 0 5px
 
 .q-toolbar
   padding $toolbar-padding
@@ -25,13 +26,19 @@ $toolbar-title-padding     ?= 0 5px
 
 .q-toolbar-title
   flex 1
-  min-width 0
+  min-width 1px
   max-width 100%
   align-items center
   font-size $toolbar-title-font-size
   font-weight $toolbar-title-font-weight
   padding $toolbar-title-padding
+  text-align center
+
+.q-toolbar-subtitle
+  font-size $toolbar-subtitle-font-size
+  opacity .7
+
+.q-toolbar-title, .q-toolbar-subtitle
   text-overflow ellipsis
   white-space nowrap
   overflow hidden
-  text-align center

src/components/toolbar/toolbar.mat.styl

@@ -1,7 +1,8 @@
-$toolbar-padding           ?= 4px 12px
-$toolbar-title-font-size   ?= 1.15rem
-$toolbar-title-font-weight ?= 500
-$toolbar-title-padding     ?= 0 12px
+$toolbar-padding            ?= 4px 12px
+$toolbar-title-font-size    ?= 18px
+$toolbar-subtitle-font-size ?= 12px
+$toolbar-title-font-weight  ?= 500
+$toolbar-title-padding      ?= 0 12px
 
 .q-toolbar
   padding $toolbar-padding
@@ -25,12 +26,17 @@ $toolbar-title-padding     ?= 0 12px
 
 .q-toolbar-title
   flex 1
-  min-width 0
+  min-width 1px
   max-width 100%
-  align-items center
   font-size $toolbar-title-font-size
   font-weight $toolbar-title-font-weight
+  padding $toolbar-title-padding
+
+.q-toolbar-subtitle
+  font-size $toolbar-subtitle-font-size
+  opacity .7
+
+.q-toolbar-title, .q-toolbar-subtitle
   text-overflow ellipsis
   white-space nowrap
   overflow hidden
-  padding $toolbar-title-padding