fix(QUploader): dark prop

Author: rstoenescu

dev/components/components/uploader.vue

@@ -2,6 +2,31 @@
   <div>
     <div class="layout-padding">
       <q-input v-model="url" />
+      <br>
+      <div class="bg-black q-pa-sm" style="max-width: 500px">
+        <q-uploader dark :url="url" multiple color="lime" float-label="Float label" />
+        <br>
+        <q-uploader dark hide-underline :url="url" multiple color="orange" float-label="Float label" />
+        <br>
+        <q-field
+          icon="wifi"
+          label="Wifi network"
+          :count="10"
+          helper="We need this for connecting you"
+        >
+          <q-uploader dark :url="url" multiple color="orange" float-label="Float label" />
+        </q-field>
+        <br>
+        <q-field
+          icon="wifi"
+          label="Wifi network"
+          :count="10"
+          helper="We need this for connecting you"
+        >
+          <q-uploader dark inverted :url="url" multiple color="orange" float-label="Float label" />
+        </q-field>
+      </div>
+
       <p class="caption">Single File Upload</p>
       <q-uploader style="max-width: 320px" color="amber" stack-label="Stack Label" :url="url" />
 

dev/components/form/color-picker.vue

@@ -11,8 +11,8 @@
       <p>Lazy</p>
       <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" stack-label="simple" />
       <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" clearable stack-label="clearable" />
-      <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" default-value="#ccc" stack-label="default-selection" />
-      <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" default-value="#ccc" clearable stack-label="default-selection, clearable" />
+      <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" default-selection="#ccc" stack-label="default-selection" />
+      <q-color :value="inputModelRgb" @change="val => inputModelRgb = val" default-selection="#ccc" clearable stack-label="default-selection, clearable" />
 
       <br><br>
       <q-btn color="primary" label="Set to yellow" @click="setToYellow"/>

src/components/uploader/QUploader.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="q-uploader relative-position"
+    :class="classes"
     @dragover.prevent.stop="__onDragOver"
   >
     <q-input-frame
@@ -238,6 +239,13 @@ export default {
         cls.push('inverted')
       }
       return cls
+    },
+    classes () {
+      return {
+        'q-uploader-expanded': this.expanded,
+        'q-uploader-dark': this.dark,
+        'q-uploader-files-no-border': this.inverted || !this.hideUnderline
+      }
     }
   },
   watch: {

src/components/uploader/uploader.ios.styl

@@ -13,9 +13,10 @@
 
 .q-uploader-files
   border 1px solid $grey-4
-  border-top 0
   font-size 14px
   max-height 500px
+.q-uploader-files-no-border .q-uploader-files
+  border-top 0 !important
 .q-uploader-file:not(:last-child)
   border-bottom 1px solid $grey-4
 .q-uploader-progress-bg, .q-uploader-progress-text
@@ -35,3 +36,10 @@
   background rgba(255, 255, 255, .6)
   &.inverted
     background rgba(0, 0, 0, .3)
+
+.q-uploader-dark
+  .q-uploader-files
+    color white
+    border 1px solid $field-dark-label-color
+  .q-uploader-file:not(:last-child)
+    border-bottom 1px solid $field-dark-label-color

src/components/uploader/uploader.mat.styl

@@ -13,9 +13,10 @@
 
 .q-uploader-files
   border 1px solid $grey-4
-  border-top 0
   font-size 14px
   max-height 500px
+.q-uploader-files-no-border .q-uploader-files
+  border-top 0 !important
 .q-uploader-file:not(:last-child)
   border-bottom 1px solid $grey-4
 .q-uploader-progress-bg, .q-uploader-progress-text
@@ -35,3 +36,10 @@
   background rgba(255, 255, 255, .6)
   &.inverted
     background rgba(0, 0, 0, .3)
+
+.q-uploader-dark
+  .q-uploader-files
+    color white
+    border 1px solid $field-dark-label-color
+  .q-uploader-file:not(:last-child)
+    border-bottom 1px solid $field-dark-label-color