fix(QDatetime/QColor): fixes regarding dialog

Author: rstoenescu

dev/components/form/color-picker.vue

@@ -14,6 +14,11 @@
       <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" default-value="#ccc" stack-label="default-value" />
       <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" default-value="#ccc" clearable stack-label="default-value, clearable" />
 
+      <div class="bg-black q-pa-md q-my-md">
+        <q-color dark v-model="inputModelRgb" />
+        <q-color-picker dark v-model="modelHexa" />
+      </div>
+
       <br><br>
       <q-btn color="primary" label="Set to yellow" @click="setToYellow"/>
 

dev/components/form/datetime.vue

@@ -184,7 +184,9 @@
       </p>
       <q-datetime-picker v-model="model" type="time" />
 
+      <q-datetime v-model="model" type="datetime" />
       <div class="bg-black q-pa-md">
+        <q-datetime dark v-model="model" type="datetime" />
         <q-datetime-picker class="q-my-md" dark v-model="model" type="datetime" />
         <q-datetime-picker class="q-my-md" dark color="primary" v-model="model" type="datetime" />
         <q-datetime-picker class="q-my-md" dark color="secondary" v-model="model" type="datetime" />

src/components/color/QColor.js

@@ -67,6 +67,11 @@ export default {
       }
 
       return ''
+    },
+    modalBtnColor () {
+      return this.$q.theme === 'mat'
+        ? this.color
+        : (this.dark ? 'light' : 'dark')
     }
   },
   methods: {
@@ -159,12 +164,13 @@ export default {
 
       if (modal) {
         child[__THEME__ === 'mat' ? 'push' : 'unshift'](h('div', {
-          staticClass: 'modal-buttons modal-buttons-top row full-width'
+          staticClass: 'modal-buttons modal-buttons-top row full-width',
+          'class': this.dark ? 'bg-black' : null
         }, [
           h('div', { staticClass: 'col' }),
           h(QBtn, {
             props: {
-              color: this.color,
+              color: this.modalBtnColor,
               flat: true,
               label: this.cancelLabel || this.$q.i18n.label.cancel,
               waitForRipple: true
@@ -174,7 +180,7 @@ export default {
           this.editable
             ? h(QBtn, {
               props: {
-                color: this.color,
+                color: this.modalBtnColor,
                 flat: true,
                 label: this.okLabel || this.$q.i18n.label.set,
                 waitForRipple: true

src/components/color/QColorPicker.js

@@ -82,7 +82,7 @@ export default {
         ? this.value.length > 7
         : this.value && this.value.a !== void 0
     },
-    swatchStyle () {
+    swatchColor () {
       return {
         backgroundColor: `rgba(${this.model.r},${this.model.g},${this.model.b},${(this.model.a === void 0 ? 100 : this.model.a) / 100})`
       }
@@ -155,9 +155,10 @@ export default {
         staticClass: 'q-color-sliders row items-center'
       }, [
         h('div', {
-          staticClass: 'q-color-swatch q-mt-sm q-ml-sm q-mb-sm non-selectable overflow-hidden',
-          style: this.swatchStyle
-        }),
+          staticClass: 'q-color-swatch q-mt-sm q-ml-md q-mb-sm non-selectable overflow-hidden'
+        }, [
+          h('div', { style: this.swatchColor, staticClass: 'fit' })
+        ]),
         h('div', { staticClass: 'col q-pa-sm' }, [
           h('div', { staticClass: 'q-color-hue non-selectable' }, [
             h(QSlider, {

src/components/color/color.ios.styl

@@ -31,15 +31,7 @@
   width 32px
   height 32px
   border-radius 50%
-  &:after
-    content ''
-    position absolute
-    left 0
-    right 0
-    top 0
-    bottom 0
-    border-radius 50%
-    background-color inherit
+  background white
 
 .q-color-hue .q-slider-track
   border-radius 2px
@@ -70,6 +62,8 @@
   .q-slider
     height 20px
   .q-slider-handle
+    height 18px
+    width 18px
     box-shadow 0 1px 4px 0 rgba(0, 0, 0, .37)
   .q-slider-ring
     display none
@@ -86,11 +80,13 @@
   padding-top 4px
 
 .q-color-dark
-  background $dark
+  background black
   border 1px solid $grey-9
   input
-    background $dark
+    background black
     color $light
-    border 1px solid $light
+    border 1px solid $dark
   .q-color-inputs
     color $light
+  .q-color-swatch
+    border 1px solid $dark

src/components/color/color.mat.styl

@@ -31,15 +31,7 @@
   width 32px
   height 32px
   border-radius 50%
-  &:after
-    content ''
-    position absolute
-    left 0
-    right 0
-    top 0
-    bottom 0
-    border-radius 50%
-    background-color inherit
+  background white
 
 .q-color-hue .q-slider-track
   border-radius 2px
@@ -86,11 +78,13 @@
   padding-top 4px
 
 .q-color-dark
-  background $dark
+  background black
   border 1px solid $grey-9
   input
-    background $dark
+    background black
     color $light
-    border 1px solid $light
+    border 1px solid $dark
   .q-color-inputs
     color $light
+  .q-color-swatch
+    border 1px solid $dark

src/components/datetime/QDatetime.js

@@ -62,6 +62,11 @@ export default {
       }
 
       return formatDate(this.value, format, /* for reactiveness */ this.$q.i18n.date)
+    },
+    modalBtnColor () {
+      return this.$q.theme === 'mat'
+        ? this.color
+        : (this.dark ? 'light' : 'dark')
     }
   },
   methods: {
@@ -144,7 +149,6 @@ export default {
     },
 
     __getPicker (h, modal) {
-      const btnColor = !this.dark === !this.invertedLight ? this.color : (this.dark ? 'white' : 'dark')
       return [
         h(QDatetimePicker, {
           ref: 'target',
@@ -183,7 +187,7 @@ export default {
               h('div', { staticClass: 'col' }),
               h(QBtn, {
                 props: {
-                  color: btnColor,
+                  color: this.modalBtnColor,
                   flat: true,
                   label: this.cancelLabel || this.$q.i18n.label.cancel,
                   waitForRipple: true
@@ -193,7 +197,7 @@ export default {
               this.editable
                 ? h(QBtn, {
                   props: {
-                    color: btnColor,
+                    color: this.modalBtnColor,
                     flat: true,
                     label: this.okLabel || this.$q.i18n.label.set,
                     waitForRipple: true

src/components/datetime/QDatetimePicker.mat.vue

@@ -107,20 +107,20 @@
               round
               dense
               flat
-              :color="color"
+              class="q-datetime-arrow"
               :icon="$q.icon.datetime.arrowLeft"
               :repeatTimeout="__repeatTimeout"
               :disable="beforeMinDays > 0 || disable || readonly"
               @click="setMonth(month - 1)"
             ></q-btn>
-            <div class="col">
+            <div class="col q-datetime-month-stamp">
               {{ monthStamp }}
             </div>
             <q-btn
               round
               dense
               flat
-              :color="color"
+              class="q-datetime-arrow"
               :icon="$q.icon.datetime.arrowRight"
               :repeatTimeout="__repeatTimeout"
               :disable="afterMaxDays > 0 || disable || readonly"

src/components/datetime/datetime.ios.styl

@@ -104,7 +104,6 @@
 
   .modal-buttons
     background black
-    border-top 1px solid $dark
 
   .q-datetime-item
     color rgba(255, 255, 255, .87)
@@ -119,3 +118,6 @@
     &.type-time
       min-width 250px
       width auto
+@media (min-width $breakpoint-md-min)
+  .datetime-ios-modal.type-time
+    min-width 280px

src/components/datetime/datetime.mat.styl

@@ -5,10 +5,12 @@
   padding 0 10px 8px
 
 .q-datetime
-  font-size 1rem
+  font-size 12px
   text-align center
   user-select none
   line-height initial
+  .modal-buttons
+    padding-top 8px
 
 .q-datetime-header
   background currentColor
@@ -49,16 +51,17 @@ div + .q-datetime-time
 
 .q-datetime-view-day
   width 250px
-  height 300px
+  height 285px
   color black
 
 .q-datetime-view-year, .q-datetime-view-month
   > .q-btn:not(.active)
     color black
 
+.q-datetime-month-stamp
+  font-size 16px
+
 .q-datetime-weekdays
-  font-size .75rem
-  margin-top 10px
   margin-bottom 5px
   div
     opacity .6
@@ -72,20 +75,21 @@ div + .q-datetime-time
     background transparent
 
 .q-datetime-days div
-  font-size 12px
-  line-height 35px
-  width 35px
-  height 35px
+  margin 1px
+  line-height 33px
+  width 33px
+  height 33px
   border-radius 50%
 
   &.q-datetime-day-active
     background currentColor
     > span
       color white
+      font-weight bold
   &.q-datetime-day-today
     color currentColor
     font-weight bold
-    font-size 105%
+    font-size 14px
   &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
     background $grey-4
 
@@ -143,8 +147,13 @@ div + .q-datetime-time
     transform translate(-50%, -50%)
     background currentColor
 
+.q-datetime-arrow
+  color $grey-7
+
 .q-datetime-dark
   background $dark
+  .q-datetime-arrow
+    color $light
   .q-datetime-header, .q-datetime-clock
     background $grey-8
   .q-datetime-view-day
@@ -153,7 +162,7 @@ div + .q-datetime-time
     > .q-btn:not(.active)
       color white
   .q-datetime-days div
-    &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
+    &.q-datetime-day-active > span, &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
       color black
 
 body.desktop .q-datetime-clock-position:not(.active):hover