feat: QDatetime coloring

Author: rstoenescu

dev/components/form/datetime.vue

@@ -155,7 +155,7 @@
       <q-inline-datetime v-model="model" type="time" format24h />
 
       <p class="caption">Date & Time</p>
-      <q-inline-datetime v-model="model" type="datetime" />
+      <q-inline-datetime color="secondary" v-model="model" type="datetime" />
 
       <p class="caption">Date - Monday as First</p>
       <q-inline-datetime v-model="model" monday-first type="date" />

src/components/datetime/InlineDatetimeIOS.vue

@@ -91,27 +91,27 @@
             </div>
           </div>
         </template>
-
       </div>
 
-      <div class="q-datetime-highlight"></div>
       <div class="q-datetime-mask"></div>
+      <div class="q-datetime-highlight"></div>
     </div>
   </div>
 </template>
 
 <script>
-import { between } from '../../utils/format'
+import { between, capitalize } from '../../utils/format'
 import { position } from '../../utils/event'
 import { css } from '../../utils/dom'
 import { isSameDate } from '../../utils/date'
-import mixin from './datetime-mixin'
+import DateMixin from './datetime-mixin'
 
 export default {
   name: 'q-inline-datetime',
-  mixins: [mixin],
+  mixins: [DateMixin],
   props: {
     defaultSelection: [String, Number, Date],
+    disable: Boolean,
     readonly: Boolean
   },
   data () {
@@ -267,28 +267,26 @@ export default {
         return
       }
 
-      this.__dragCleanup()
-      ;['month', 'date', 'year', 'hour', 'minute'].forEach(type => {
-        this[type + 'DragOffset'] = 0
-      })
       ev.stopPropagation()
       ev.preventDefault()
 
-      if (!this.value) {
-        this.__updateModel()
-      }
-
+      this[type + 'DragOffset'] = 0
       this.dragging = type
+      this.__actualType = type === 'date' ? 'day' : type
+      this.__typeOffset = type === 'month' ? -1 : 0
       this.__dragPosition = position(ev).top
     },
     __dragMove (ev, type) {
       if (this.dragging !== type || !this.editable) {
         return
       }
+
       ev.stopPropagation()
       ev.preventDefault()
-      this[type + 'DragOffset'] = (this.__dragPosition - position(ev).top) / 36
-      this.__updatePositions(type, this.date[type]() + this[type + 'DragOffset'])
+
+      const offset = (this.__dragPosition - position(ev).top) / 36
+      this[type + 'DragOffset'] = offset
+      this.__updatePositions(type, this[this.__actualType] + offset + this.__typeOffset)
     },
     __dragStop (ev, type) {
       if (this.dragging !== type || !this.editable) {
@@ -300,30 +298,21 @@ export default {
 
       let
         offset = Math.round(this[type + 'DragOffset']),
-        newValue = this.__parseTypeValue(type, this[type === 'date' ? 'day' : type] + offset),
-        actualType = type === 'date' ? 'day' : type
+        newValue = this.__parseTypeValue(type, this[this.__actualType] + offset)
 
-      if (newValue !== this[actualType]) {
-        this['set' + actualType.charAt(0).toUpperCase() + actualType.slice(1)](newValue)
-        this[type + 'DragOffset'] = 0
+      if (newValue !== this[this.__actualType]) {
+        this[`set${capitalize(this.__actualType)}`](newValue)
       }
       else {
-        this.__updatePositions(type, this.date[type]())
-        this.timeout = setTimeout(() => {
-          this[type + 'DragOffset'] = 0
-        }, 150)
+        this.__updatePositions(type, this[this.__actualType] + this.__typeOffset)
       }
-    },
-    __dragCleanup () {
-      clearTimeout(this.timeout)
-      this.timeout = null
+      this.$nextTick(() => {
+        this[type + 'DragOffset'] = 0
+      })
     }
   },
   mounted () {
     this.$nextTick(this.__updateAllPositions)
-  },
-  beforeDestroy () {
-    this.__dragCleanup()
   }
 }
 </script>

src/components/datetime/InlineDatetimeMat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-datetime inline row" :class="{disabled: disable, readonly: readonly}">
+  <div class="q-datetime inline row" :class="classes">
     <div class="q-datetime-header column col-xs-12 col-md-4 justify-center">
       <div v-if="typeHasDate">
         <div class="q-datetime-weekdaystring col-12">{{ weekDayString }}</div>
@@ -72,7 +72,6 @@
             v-for="n in yearInterval"
             :key="n"
             flat
-            color="black"
             class="q-datetime-btn full-width"
             :class="{active: n + yearMin === year}"
             @click="setYear(n + yearMin)"
@@ -89,7 +88,6 @@
             v-for="index in monthInterval"
             :key="index"
             flat
-            color="black"
             class="q-datetime-btn full-width"
             :class="{active: month === index + monthMin}"
             @click="setMonth(index + monthMin, true)"
@@ -100,26 +98,26 @@
 
         <div
           v-if="view === 'day'"
-          class="q-datetime-view-day q-datetime-animate"
+          class="q-datetime-view-day"
         >
           <div class="row items-center content-center">
             <q-btn
               round
               small
               flat
-              color="primary"
+              :color="color"
               @click="setMonth(month - 1, true)"
             >
               <q-icon name="keyboard_arrow_left"></q-icon>
             </q-btn>
-            <div class="col">
+            <div class="col q-datetime-dark">
               {{ monthStamp }}
             </div>
             <q-btn
               round
               small
               flat
-              color="primary"
+              :color="color"
               @click="setMonth(month + 1, true)"
             >
               <q-icon name="keyboard_arrow_right"></q-icon>
@@ -139,7 +137,7 @@
               :class="{active: monthDay === day}"
               @click="setDay(monthDay)"
             >
-              {{ monthDay }}
+              <span>{{ monthDay }}</span>
             </div>
             <div v-if="max" v-for="fillerDay in aferMaxDays" class="row items-center content-center justify-center disabled">
               {{ fillerDay + maxDay }}
@@ -173,7 +171,7 @@
                   class="q-datetime-clock-position fmt24"
                   :class="[`q-datetime-clock-pos-${n-1}`, (n - 1) === hour ? 'active' : '']"
                 >
-                  {{ n - 1 }}
+                  <span>{{ n - 1 }}</span>
                 </div>
               </div>
               <div v-else>
@@ -182,7 +180,7 @@
                   class="q-datetime-clock-position"
                   :class="['q-datetime-clock-pos-' + n, n === hour ? 'active' : '']"
                 >
-                  {{ n }}
+                  <span>{{ n }}</span>
                 </div>
               </div>
             </div>
@@ -208,7 +206,7 @@
                 class="q-datetime-clock-position"
                 :class="['q-datetime-clock-pos-' + (n - 1), (n - 1) * 5 === minute ? 'active' : '']"
               >
-                {{ (n - 1) * 5 }}
+                <span>{{ (n - 1) * 5 }}</span>
               </div>
             </div>
           </div>
@@ -226,7 +224,7 @@ import { position } from '../../utils/event'
 import { QIcon } from '../icon'
 import { QBtn } from '../btn'
 import { formatDate, isSameDate } from '../../utils/date'
-import mixin from './datetime-mixin'
+import DateMixin from './datetime-mixin'
 import Ripple from '../../directives/ripple'
 
 function convertToAmPm (hour) {
@@ -235,7 +233,7 @@ function convertToAmPm (hour) {
 
 export default {
   name: 'q-inline-datetime',
-  mixins: [mixin],
+  mixins: [DateMixin],
   props: {
     defaultSelection: [String, Number, Date],
     disable: Boolean,
@@ -288,6 +286,19 @@ export default {
     }
   },
   computed: {
+    classes () {
+      const cls = []
+      if (this.disable) {
+        cls.push('disabled')
+      }
+      if (this.readonly) {
+        cls.push('readonly')
+      }
+      if (this.color) {
+        cls.push(`text-${this.color}`)
+      }
+      return cls
+    },
     firstDayOfWeek () {
       return this.mondayFirst ? 1 : 0
     },

src/components/datetime/QDatetime.vue

@@ -42,15 +42,16 @@
         :max="max"
         :format24h="format24h"
         :monday-first="mondayFirst"
+        :color="color"
         class="no-border"
       >
-        <div class="modal-buttons row">
-          <q-btn v-if="!noClear && model" @click="clear()" flat>
+        <div class="row q-datetime-controls modal-buttons-top">
+          <q-btn :color="color" v-if="!noClear && model" @click="clear()" flat>
             <span v-html="clearLabel"></span>
           </q-btn>
           <div class="col"></div>
-          <q-btn @click="close()" flat><span v-html="cancelLabel"></span></q-btn>
-          <q-btn @click="close(__update)" flat><span v-html="okLabel"></span></q-btn>
+          <q-btn :color="color" @click="close()" flat><span v-html="cancelLabel"></span></q-btn>
+          <q-btn :color="color" @click="close(__update)" flat><span v-html="okLabel"></span></q-btn>
         </div>
       </q-inline-datetime>
     </q-popover>
@@ -75,15 +76,17 @@
         :max="max"
         :format24h="format24h"
         :monday-first="mondayFirst"
+        :color="color"
         class="no-border"
+        :class="{'full-width': $q.theme === 'ios'}"
       >
-        <div class="modal-buttons row full-width">
-          <q-btn v-if="!noClear && model" @click="clear()" flat>
+        <div class="modal-buttons modal-buttons-top row full-width">
+          <q-btn :color="color" v-if="!noClear && model" @click="clear()" flat>
             <span v-html="clearLabel"></span>
           </q-btn>
           <div class="col"></div>
-          <q-btn @click="close()" flat><span v-html="cancelLabel"></span></q-btn>
-          <q-btn @click="close(__update)" flat><span v-html="okLabel"></span></q-btn>
+          <q-btn :color="color" @click="close()" flat><span v-html="cancelLabel"></span></q-btn>
+          <q-btn :color="color" @click="close(__update)" flat><span v-html="okLabel"></span></q-btn>
         </div>
       </q-inline-datetime>
     </q-modal>

src/components/datetime/QDatetimeRange.vue

@@ -82,7 +82,9 @@ export default {
       className: [String, Object],
       css: [String, Object],
       defaultFrom: [String, Number, Date],
-      defaultTo: [String, Number, Date]
+      defaultTo: [String, Number, Date],
+      color: String,
+      disable: Boolean
     }
   ),
   computed: {

src/components/datetime/datetime-props.js

@@ -24,6 +24,10 @@ export const inline = {
       return ['date', 'time', 'datetime'].includes(value)
     }
   },
+  color: {
+    type: String,
+    default: 'primary'
+  },
   min: {
     validator: modelValidator,
     default: null

src/components/datetime/datetime.ios.styl

@@ -28,18 +28,6 @@ $datetime-input-min-width ?= 70px
   text-align right
   position relative
   padding 0
-  background rgba(0, 0, 0, .1)
-
-.q-datetime-mask
-  position absolute
-  top 0
-  right 0
-  bottom 0
-  left 0
-  height 100%
-  width 100%
-  background linear-gradient(to top, white, transparent 50%, white)
-  pointer-events none
 
 .q-datetime-col
   display block
@@ -86,6 +74,17 @@ body.desktop .q-datetime-col-wrapper
   backface-visibility hidden
   transform-origin center center -110px
 
+.q-datetime-mask
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+  height 100%
+  width 100%
+  background linear-gradient(to top, white, transparent 50%, white)
+  pointer-events none
+
 .q-datetime-highlight
   height 36px
   position absolute
@@ -95,22 +94,14 @@ body.desktop .q-datetime-col-wrapper
   top 50%
   margin-top -18px
   pointer-events none
-  border-top 1px solid rgba(0, 0, 0, .2)
-  border-bottom 1px solid rgba(0, 0, 0, .2)
-
-  &.q-datetime-no-selection
-    letter-spacing 3px
-    background white
-    color $grey-6
-    > div
-      padding 0 6px
-      text-align center
+  border-top 1px solid $grey-5
+  border-bottom 1px solid $grey-5
 
 .q-datetime-range
-    display flex
-    > div
-      flex 0 1 auto
-    &.full-width > div
-      flex-grow 1
-    > div + div
-      margin-left $datetime-range-space
+  display flex
+  > div
+    flex 0 1 auto
+  &.full-width > div
+    flex-grow 1
+  > div + div
+    margin-left $datetime-range-space