Add icon property to timeline dot (quasarframework#1197)

* Add icon property to timeline dot

* Small tweaks for icon in dot in timeline

* Center align title and subtitle with the large dots

* Update QTimelineEntry.js

* Update QTimelineEntry.js

* Update QTimelineEntry.js

* Update QTimelineEntry.js

* Small tweaks on icons

* Update QTimelineEntry.js

Author: pdanpdan

dev/components/components/timeline.vue

@@ -15,8 +15,9 @@
 
       <q-timeline-entry
         title="Event Title Event Title Event Title Event Title Event Title Event Title Event Title Event Title "
-        subtitle="February 22, 1986"
+        subtitle="February 21, 1986"
         side="right"
+        icon="delete"
       >
         <div>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -50,6 +51,7 @@
         subtitle="February 22, 1986"
         side="left"
         color="orange"
+        icon="done_all"
       >
         <div>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -124,6 +126,7 @@
         title="Event Title"
         subtitle="February 22, 1986"
         side="right"
+        icon="account_balance"
       >
         <div>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

src/components/timeline/QTimelineEntry.js

@@ -1,3 +1,5 @@
+import { QIcon } from '../icon'
+
 export default {
   name: 'q-timeline-entry',
   inject: {
@@ -18,13 +20,20 @@ export default {
       default: 'right',
       validator: v => ['left', 'right'].includes(v)
     },
+    icon: String,
     color: String,
     title: String,
     subtitle: String
   },
   computed: {
     colorClass () {
       return `text-${this.color || this.__timeline.color}`
+    },
+    classes () {
+      return [
+        `q-timeline-entry-${this.side === 'left' ? 'left' : 'right'}`,
+        this.icon ? 'q-timeline-entry-with-icon' : ''
+      ]
     }
   },
   render (h) {
@@ -39,16 +48,22 @@ export default {
     }
 
     return h('li', {
-      staticClass: 'q-timeline-entry',
-      'class': this.side === 'left' ? 'q-timeline-entry-left' : 'q-timeline-entry-right'
+      staticClass: `q-timeline-entry`,
+      'class': this.classes
     }, [
       h('div', { staticClass: 'q-timeline-subtitle' }, [
         h('span', this.subtitle)
       ]),
+ 
       h('div', {
         staticClass: 'q-timeline-dot',
         'class': this.colorClass
-      }),
+      }, [
+        this.icon
+          ? h(QIcon, { props: { name: this.icon } })
+          : null
+      ],
+ 
       h('div', { staticClass: 'q-timeline-content' }, [
         h('h6', { staticClass: 'q-timeline-title' }, [ this.title ]),
         this.$slots.default

src/components/timeline/timeline.ios.styl

@@ -20,7 +20,6 @@
   bottom 0
   left 0
   width 15px
-
   &:before, &:after
     content ''
     background currentColor
@@ -41,6 +40,26 @@
     bottom 0
     left 6px
 
+.q-timeline-entry-with-icon
+  .q-timeline-dot
+    width 31px
+    left -8px
+    &:before
+      height 31px
+      width 31px
+    &:after
+      top 41px
+      left 14px
+    .q-icon
+      position absolute
+      top 8px
+      left 4px
+      font-size 23px
+      color white
+      transition color .3s ease-in-out
+  .q-timeline-subtitle
+    padding-top 8px
+
 .q-timeline-dark
   color white
   .q-timeline-subtitle
@@ -54,9 +73,12 @@
     padding-bottom 0
     .q-timeline-dot:after
       content none
-  &:hover .q-timeline-dot:before
-    background transparent
-    border 3px solid currentColor
+  &:hover
+    .q-timeline-dot:before
+      background transparent
+      border 3px solid currentColor
+  &.q-timeline-entry-with-icon:hover .q-timeline-dot .q-icon
+    color currentColor
 
 .q-timeline-content
   padding-bottom 24px
@@ -94,6 +116,8 @@
     position relative
   .q-timeline-content
     padding-left 30px
+  .q-timeline-entry-with-icon .q-timeline-content
+    padding-top 8px
   .q-timeline-subtitle
     padding-right 30px
 
@@ -109,6 +133,9 @@
     position absolute
     left 50%
     margin-left -7.15px
+  .q-timeline-entry-with-icon .q-timeline-dot
+    left 50%
+    margin-left -15px
   .q-timeline-subtitle, .q-timeline-content
     width 50%
   .q-timeline-entry-left .q-timeline-content,
@@ -121,6 +148,8 @@
     float right
     text-align left
     padding-left 30px
+  .q-timeline-entry-with-icon .q-timeline-content
+    padding-top 8px
   .q-timeline-entry
     padding-bottom 24px
     overflow hidden

src/components/timeline/timeline.mat.styl

@@ -20,7 +20,6 @@
   bottom 0
   left 0
   width 15px
-
   &:before, &:after
     content ''
     background currentColor
@@ -41,6 +40,26 @@
     bottom 0
     left 6px
 
+.q-timeline-entry-with-icon
+  .q-timeline-dot
+    width 31px
+    left -8px
+    &:before
+      height 31px
+      width 31px
+    &:after
+      top 41px
+      left 14px
+    .q-icon
+      position absolute
+      top 8px
+      left 4px
+      font-size 23px
+      color white
+      transition color .3s ease-in-out
+  .q-timeline-subtitle
+    padding-top 8px
+
 .q-timeline-dark
   color white
   .q-timeline-subtitle
@@ -54,9 +73,12 @@
     padding-bottom 0
     .q-timeline-dot:after
       content none
-  &:hover .q-timeline-dot:before
-    background transparent
-    border 3px solid currentColor
+  &:hover
+    .q-timeline-dot:before
+      background transparent
+      border 3px solid currentColor
+  &.q-timeline-entry-with-icon:hover .q-timeline-dot .q-icon
+    color currentColor
 
 .q-timeline-content
   padding-bottom 24px
@@ -94,6 +116,8 @@
     position relative
   .q-timeline-content
     padding-left 30px
+  .q-timeline-entry-with-icon .q-timeline-content
+    padding-top 8px
   .q-timeline-subtitle
     padding-right 30px
 
@@ -109,6 +133,9 @@
     position absolute
     left 50%
     margin-left -7.15px
+  .q-timeline-entry-with-icon .q-timeline-dot
+    left 50%
+    margin-left -15px
   .q-timeline-subtitle, .q-timeline-content
     width 50%
   .q-timeline-entry-left .q-timeline-content,
@@ -121,6 +148,8 @@
     float right
     text-align left
     padding-left 30px
+  .q-timeline-entry-with-icon .q-timeline-content
+    padding-top 8px
   .q-timeline-entry
     padding-bottom 24px
     overflow hidden