feat: Enhancements to QField and Knob

rstoenescu · rstoenescu · commit 7e7c41c9668d · 2017-05-25T17:31:37.000+03:00
diff --git a/dev/components/form/field.vue b/dev/components/form/field.vue
@@ -369,6 +369,39 @@
         <q-input suffix="#" prefix="@" v-model="model" :count="10" />
       </q-field>
 
+      <q-field
+        label="Knob"
+        helper="Touch to change"
+        icon="cake"
+        :error="error"
+      >
+        <q-knob
+          v-model="knob"
+          :min="knobMin"
+          :max="knobMax"
+        >
+          <q-icon class="on-left" name="volume_up" /> {{knob}}
+        </q-knob>
+      </q-field>
+
+      <div class="bg-grey-9" style="padding: 10px">
+        <q-field
+          label="Knob"
+          helper="Touch to change"
+          dark
+          icon="cake"
+          :error="error"
+        >
+          <q-knob
+            v-model="knob"
+            :min="knobMin"
+            :max="knobMax"
+          >
+            <q-icon class="on-left" name="volume_up" /> {{knob}}
+          </q-knob>
+        </q-field>
+      </div>
+
       <q-field
         icon="cloud"
         helper="Helper Helper Helper Helper Helper Helper Helper Helper Helper"
@@ -435,7 +468,7 @@
       >
         <q-input v-model="model" float-label="Floating $ Label" suffix="#" prefix="@" />
       </q-field>
-XXX
+
       <q-field
         helper="Helper"
         :label-width="2"
@@ -504,7 +537,10 @@ export default {
       modelX: 'sdflkjsbnfkjdabfa dfasldgfa gfg lasdfl gasdf asdfhl asdgfgasdlf hlahf lsadf asdhlf hasdhadlfasdhfadf hasdg lfasdg lfgasdfasdflasdhfgasdljfljasdh fsdkjfgasdf gjasdgfjasdljgasdjk gjlasdfa sdfgasdljf gljasdfgljasd',
       modelY: '',
       numberModel: 5555,
-      nullModel: null
+      nullModel: null,
+      knob: 10,
+      knobMin: 0,
+      knobMax: 30
     }
   }
 }
diff --git a/dev/components/form/input.vue b/dev/components/form/input.vue
@@ -54,6 +54,19 @@
 
       <p class="caption">Along Fields</p>
 
+      <q-field
+        icon="wifi"
+        label="Some Label"
+        :count="10"
+        helper="Some helper"
+        error-label="Some error"
+      >
+        <q-input
+          v-model="text"
+          :error="error"
+        />
+      </q-field>
+
       <q-field
         icon="wifi"
         label="Some Label"
diff --git a/dev/components/form/knob.vue b/dev/components/form/knob.vue
@@ -43,7 +43,7 @@
         <q-knob
           v-model="model"
           style="font-size: 3rem"
-          color="#26a69a"
+          color="amber-7"
           :min="min"
           :max="max"
           :step="5"
@@ -53,8 +53,8 @@
           v-model="model"
           size="120px"
           style="font-size: 1.5rem"
-          color="rgba(0, 0, 0, .8)"
-          track-color="yellow"
+          color="secondary"
+          track-color="yellow-3"
           line-width="5px"
           :min="min"
           :max="max"
@@ -69,6 +69,7 @@
         v-model="model"
         :min="min"
         :max="max"
+        color="primary"
         readonly
       >
         <q-icon class="on-left" name="volume_up" /> {{model}}
diff --git a/dev/components/form/range.vue b/dev/components/form/range.vue
@@ -63,7 +63,7 @@
 
       <p class="caption">Error State</p>
       <q-range error v-model="standalone" :min="0" :max="50"></q-range>
-      <q-range error v-model="standalone" :min="0" :max="50" label-always></q-range>
+      <q-range error color="amber" v-model="standalone" :min="0" :max="50" label-always></q-range>
 
       <p class="caption">Coloring</p>
       <q-range color="secondary" v-model="standalone" :min="0" :max="50" label></q-range>
diff --git a/src/components/field/QField.vue b/src/components/field/QField.vue
@@ -22,9 +22,12 @@
         </div>
       </div>
 
-      <div class="col-xs-12 col-sm">
+      <div class="q-field-content col-xs-12 col-sm" :class="{'q-field-no-input': hasNoInput}">
         <slot></slot>
-        <div v-if="hasBottom" class="q-field-bottom row no-wrap">
+        <div
+          v-if="hasBottom"
+          class="q-field-bottom row no-wrap"
+        >
           <div v-if="hasError && errorLabel" class="q-field-error col" v-html="errorLabel"></div>
           <div v-else-if="helper" class="q-field-helper col" v-html="helper"></div>
           <div v-else class="col"></div>
@@ -92,6 +95,9 @@ export default {
     insetIcon () {
       return ['icon', 'full'].includes(this.inset)
     },
+    hasNoInput () {
+      return !this.input.$options
+    },
     counter () {
       if (this.count) {
         const length = this.input.length || '0'
diff --git a/src/components/field/field.ios.styl b/src/components/field/field.ios.styl
@@ -30,22 +30,32 @@ $field-label-color ?= rgba(0, 0, 0, .54)
 .q-field-bottom
   font-size 12px
   padding-top 8px
-.q-field-error
-  color $has-error
-.q-field-helper
   color rgba(0, 0, 0, .46)
 .q-field-counter
   color $field-label-color
   padding-left 8px
 
+.q-field-no-input
+  padding-top 8px
+  .q-field-bottom
+    margin-top 8px
+    border-top 1px solid rgba(0, 0, 0, .12)
+
 .q-field-dark
-  .q-field-label, .q-field-icon, .q-field-helper, .q-field-counter
+  .q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
     color rgba(255, 255, 255, 60%)
+  .q-field-no-input .q-field-bottom
+    border-top 1px solid rgba(255, 255, 255, .7)
+
 .q-field-with-error
-  .q-field-icon, .q-field-label
+  .q-field-icon, .q-field-label, .q-field-bottom
     color $negative
+  .q-field-no-input .q-field-bottom
+    border-top 1px solid $negative
 
 @media (min-width $breakpoint-sm-min)
   .q-field-floating
     .q-field-icon, .q-field-label
-      margin-top 18px
+      margin-top 12px
+  .q-field-no-input
+    padding-top 0
diff --git a/src/components/field/field.mat.styl b/src/components/field/field.mat.styl
@@ -30,22 +30,32 @@ $field-label-color ?= rgba(0, 0, 0, .54)
 .q-field-bottom
   font-size 12px
   padding-top 8px
-.q-field-error
-  color $has-error
-.q-field-helper
   color rgba(0, 0, 0, .46)
 .q-field-counter
   color $field-label-color
   padding-left 8px
 
+.q-field-no-input
+  padding-top 8px
+  .q-field-bottom
+    margin-top 8px
+    border-top 1px solid rgba(0, 0, 0, .12)
+
 .q-field-dark
-  .q-field-label, .q-field-icon, .q-field-helper, .q-field-counter
+  .q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
     color rgba(255, 255, 255, 60%)
+  .q-field-no-input .q-field-bottom
+    border-top 1px solid rgba(255, 255, 255, .7)
+
 .q-field-with-error
-  .q-field-icon, .q-field-label
+  .q-field-icon, .q-field-label, .q-field-bottom
     color $negative
+  .q-field-no-input .q-field-bottom
+    border-top 1px solid $negative
 
 @media (min-width $breakpoint-sm-min)
   .q-field-floating
     .q-field-icon, .q-field-label
-      margin-top 18px
+      margin-top 12px
+  .q-field-no-input
+    padding-top 0
diff --git a/src/components/input-frame/input-frame.ios.styl b/src/components/input-frame/input-frame.ios.styl
@@ -1,6 +1,6 @@
 $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
 
-.q-if, .q-if:before, .q-if:after, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control
+.q-if, .q-if:before, .q-if:after, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
   transition $input-transition
 
 .q-if
@@ -89,9 +89,9 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
 
 .q-if-dark
   &:before, .q-if-label, .q-if-control
-    color rgba(255, 255, 255, 70%)
+    color rgba(255, 255, 255, .7)
   &:hover:before, .q-if-addon
-    color rgba(255, 255, 255, 90%)
+    color rgba(255, 255, 255, .9)
 
 .q-if-focused
   &:after
@@ -114,7 +114,7 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
 
 .q-if-error
   &:before, &:after, &:not(.q-if-inverted) .q-if-label, .q-if-addon
-    color $has-error
+    color $negative
   &:hover:before
     color lighten($negative, 26%)
 
diff --git a/src/components/input-frame/input-frame.mat.styl b/src/components/input-frame/input-frame.mat.styl
@@ -1,6 +1,6 @@
 $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
 
-.q-if, .q-if:before, .q-if:after, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control
+.q-if, .q-if:before, .q-if:after, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
   transition $input-transition
 
 .q-if
@@ -89,9 +89,9 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
 
 .q-if-dark
   &:before, .q-if-label, .q-if-control
-    color rgba(255, 255, 255, 70%)
+    color rgba(255, 255, 255, .7)
   &:hover:before, .q-if-addon
-    color rgba(255, 255, 255, 90%)
+    color rgba(255, 255, 255, .9)
 
 .q-if-focused
   &:after
@@ -114,7 +114,7 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
 
 .q-if-error
   &:before, &:after, &:not(.q-if-inverted) .q-if-label, .q-if-addon
-    color $has-error
+    color $negative
   &:hover:before
     color lighten($negative, 26%)
 
diff --git a/src/components/knob/QKnob.vue b/src/components/knob/QKnob.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     class="q-knob non-selectable"
-    :class="{disabled: disable, 'cursor-pointer': !readonly}"
-    :style="{width: size, height: size, color: color}"
+    :class="classes"
+    :style="{width: size, height: size}"
   >
     <div
       @click="__onInput"
@@ -13,7 +13,8 @@
           d="M 50,50 m 0,-47
              a 47,47 0 1 1 0,94
              a 47,47 0 1 1 0,-94"
-          :stroke="trackColor"
+          :class="`text-${trackColor}`"
+          stroke="currentColor"
           :stroke-width="lineWidth"
           fill-opacity="0"
         ></path>
@@ -66,7 +67,7 @@ export default {
     color: String,
     trackColor: {
       type: String,
-      default: '#ececec'
+      default: 'grey-3'
     },
     lineWidth: {
       type: String,
@@ -84,6 +85,19 @@ export default {
     readonly: Boolean
   },
   computed: {
+    classes () {
+      const cls = []
+      if (this.disable) {
+        cls.push('disabled')
+      }
+      if (!this.readonly) {
+        cls.push('cursor-pointer')
+      }
+      if (this.color) {
+        cls.push(`text-${this.color}`)
+      }
+      return cls
+    },
     svgStyle () {
       return {
         'stroke-dasharray': '295.31px, 295.31px',
diff --git a/src/components/option-group/option-group.ios.styl b/src/components/option-group/option-group.ios.styl
@@ -2,3 +2,4 @@
   display inline-flex
 .q-option-group
   margin -5px
+  padding 5px 0
diff --git a/src/components/option-group/option-group.mat.styl b/src/components/option-group/option-group.mat.styl
@@ -2,3 +2,4 @@
   display inline-flex
 .q-option-group
   margin -5px
+  padding 5px 0
diff --git a/src/components/range/range.ios.styl b/src/components/range/range.ios.styl
@@ -115,4 +115,4 @@ $range-label-transform     = translateX(-50%) translateY(-139%) scale(1)
     height 85px
 
   &.has-error
-    color $has-error
+    color $negative
diff --git a/src/components/range/range.mat.styl b/src/components/range/range.mat.styl
@@ -115,4 +115,4 @@ $range-label-transform     = translateX(-50%) translateY(-139%) scale(1)
     height 85px
 
   &.has-error
-    color $has-error
+    color $negative
diff --git a/src/components/select/QSelect.vue b/src/components/select/QSelect.vue
@@ -67,7 +67,6 @@
         class="list link no-border"
         :class="{delimiter: delimiter}"
       >
-
         <template v-if="multiple">
           <q-item
             class="item"
diff --git a/src/themes/core/colors.variables.styl b/src/themes/core/colors.variables.styl
@@ -12,8 +12,6 @@ $light     ?= #f4f4f4
 $dark      ?= #333
 $faded     ?= #777
 
-$has-error ?= $negative
-
 $link-color          ?= lighten($primary, 25%)
 $link-color-active   ?= $primary
 
