feat (AE) Add support for Quasar colors.

quasarframework · Jul 15, 2019 · 0c81210 · 0c81210
1 parent 5a9b408
commit 0c81210
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 78 deletions.
diff --git a/demo/quasar.conf.js b/demo/quasar.conf.js
@@ -24,39 +24,40 @@ module.exports = function (ctx) {
       // all: true, // --- includes everything; for dev only!
 
       components: [
-        'QLayout',
-        'QHeader',
-        'QDrawer',
-        'QPageContainer',
-        'QPage',
-        'QToolbar',
-        'QToolbarTitle',
+        'QAvatar',
         'QBtn',
-        'QIcon',
-        'QList',
-        'QItem',
-        'QItemSection',
-        'QItemLabel',
         'QCard',
         'QCardSection',
-        'QAvatar',
-        'QSeparator',
+        'QCheckbox',
         'QColor',
-        'QSelect',
+        'QDrawer',
+        'QHeader',
+        'QIcon',
         'QInput',
+        'QItem',
+        'QItemLabel',
+        'QItemSection',
+        'QLayout',
+        'QList',
+        'QMenu',
+        'QPage',
+        'QPageContainer',
         'QPopupProxy',
-        'QCheckbox',
-        'QMenu'
+        'QSelect',
+        'QSeparator',
+        'QToolbar',
+        'QToolbarTitle'
       ],
 
       directives: [
-        'Ripple',
-        'ClosePopup'
+        'ClosePopup',
+        'Ripple'
       ],
 
       // Quasar plugins
       plugins: [
-        'Notify'
+        'Notify',
+        'Platform'
       ]
 
       // iconSet: 'ionicons-v4'

diff --git a/demo/src/pages/Examples.vue b/demo/src/pages/Examples.vue
@@ -26,9 +26,9 @@
       <q-separator class="q-mb-lg" />
 
       <div class="box-ribbon-wrapper q-py-md">
-
         <div class="flex justify-between">
           <q-ribbon class="q-pb-md" leaf-position="top" decoration="point-in">Left Ribbon</q-ribbon>
+
           <q-ribbon class="q-pb-md cursor-pointer" leaf-position="top" decoration="point-out" position="right">
             QMenu QRibbon
             <q-menu anchor="center left" self="top right">
@@ -84,6 +84,11 @@
           </q-ribbon>
         </div>
 
+        <div class="flex justify-between">
+          <q-ribbon class="q-pb-md" decoration="point-in" background-color="secondary" inline>Quasar Color (secondary)</q-ribbon>
+          <q-ribbon class="q-pb-md" position="right" background-color="red-5" leaf-color="purple-3" inline>Quasar Color (red-5)</q-ribbon>
+        </div>
+
         <q-toolbar class="q-pb-md qribbon">
           <q-ribbon
             position="left"
@@ -103,7 +108,7 @@
 
         <q-ribbon class="q-pb-md border-radius" glow>With border radius - GLOWING!</q-ribbon>
 
-        <q-ribbon class="q-pb-md border-radius" glow glow-speed="4" glow-iteration-count="5">Glow 5 times for 4 seconds each</q-ribbon>
+        <q-ribbon class="q-pb-md border-radius" glow :glow-speed="4" glow-iteration-count="5">Glow 5 times for 4 seconds each</q-ribbon>
 
         <q-ribbon class="q-pb-md" color="red" background-color="yellow" decoration="point-out">Hippy Ribbon</q-ribbon>
 

diff --git a/demo/src/pages/RibbonBuilder.vue b/demo/src/pages/RibbonBuilder.vue
@@ -26,18 +26,33 @@
         </q-ribbon>
 
         <div class="q-pa-sm">
+          <q-select
+            label="Color Mode"
+            class="col-xs-12"
+            v-model="colorMode"
+            map-options
+            emit-value
+            :options="[
+                { value: 'css', label: 'CSS' },
+                { value: 'quasar', label: 'Quasar / Text' }
+              ]"
+          />
+
           <div class="row justify-around q-mt-lg gt-xs">
             <div class="text-center">
               Text Color
-              <q-color v-model="color" no-header no-footer />
+              <q-color v-model="color" v-if="cssColorMode" no-header no-footer />
+              <q-input v-model="color" v-else />
             </div>
             <div class="text-center">
               Background Color
-              <q-color v-model="backgroundColor" no-header no-footer />
+              <q-color v-model="backgroundColor" v-if="cssColorMode" no-header no-footer />
+              <q-input v-model="backgroundColor" v-else />
             </div>
             <div class="text-center">
               Leaf Color
-              <q-color v-model="leafColor" no-header no-footer />
+              <q-color v-model="leafColor" v-if="cssColorMode" no-header no-footer />
+              <q-input v-model="leafColor" v-else />
             </div>
           </div>
 
@@ -200,14 +215,18 @@ function initialState () {
     decoration: null,
     glow: false,
     glowSpeed: 1.5,
-    glowIterationCount: 'infinite'
+    glowIterationCount: 'infinite',
+    colorMode: 'css'
   }
 }
 
 export default {
   name: 'InteractiveDemo',
 
   computed: {
+    cssColorMode () {
+      return this.colorMode === 'css'
+    },
     positionOptions () {
       switch (this.type) {
         case 'corner':

diff --git a/src/component/QRibbon.js b/src/component/QRibbon.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 // Styles
+import './styl/common/qColors.styl'
 import './styl/common/glow.styl'
 import './styl/horizontal/main.styl'
 import './styl/vertical/main.styl'
@@ -95,9 +96,9 @@ export default Vue.extend({
     },
     styles () {
       let style = {}
-      style['--qribbon-text-color'] = this.color
-      style['--qribbon-background-color'] = this.backgroundColor
-      style['--qribbon-leaf-color'] = this.leafColor || this.__leafColor
+      style['--qribbon-text-color'] = this.textColor
+      style['--qribbon-background-color'] = this.bgColor
+      style['--qribbon-leaf-color'] = this.bgLeafColor
       style['--qribbon-glow-speed'] = `${this.glowSpeed}s`
       style['--qribbon-glow-iteration-count'] = this.glowIterationCount
       return style

diff --git a/src/component/mixins/colorize.js b/src/component/mixins/colorize.js
@@ -2,8 +2,14 @@ import Vue from 'vue'
 import { colors } from 'quasar'
 const { lighten } = colors
 
+const CSS_COLOR_NAMES = ['aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black','blanchedalmond','blue','blueviolet','brown','burlywood','cadetblue','chartreuse','chocolate','coral','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkcyan','darkgoldenrod','darkgray','darkgrey','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred','darksalmon','darkseagreen','darkslateblue','darkslategray','darkslategrey','darkturquoise','darkviolet','deeppink','deepskyblue','dimgray','dimgrey','dodgerblue','firebrick','floralwhite','forestgreen','fuchsia','gainsboro','ghostwhite','gold','goldenrod','gray','grey','green','greenyellow','honeydew','hotpink','indianred','indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue','lightcoral','lightcyan','lightgoldenrodyellow','lightgray','lightgrey','lightgreen','lightpink','lightsalmon','lightseagreen','lightskyblue','lightslategray','lightslategrey','lightsteelblue','lightyellow','lime','limegreen','linen','magenta','maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen','mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy','oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen','paleturquoise','palevioletred','papayawhip','peachpuff','peru','pink','plum','powderblue','purple','red','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen','seashell','sienna','silver','skyblue','slateblue','slategray','slategrey','snow','springgreen','steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat','white','whitesmoke','yellow','yellowgreen']
+
+function isNamedCssColor (color) {
+  return !!color && CSS_COLOR_NAMES.includes(color.toLowerCase())
+}
+
 function isCssColor (color) {
-  return !!color && !!color.match(/^(#|(rgb|hsl)a?\()/)
+  return !!color && (!!color.match(/^(#|(rgb|hsl)a?\()/) || isNamedCssColor(color))
 }
 
 export default Vue.extend({
@@ -29,58 +35,36 @@ export default Vue.extend({
     }
   },
 
-  methods: {
-    setBothColors (color, bgColor, data = {}) {
-      return this.setTextColor(color, this.setBackgroundColor(bgColor, data))
+  computed: {
+    bgColor () {
+      return this.getColor(this.backgroundColor, '#027BE3')
     },
-
-    setBackgroundColor (color, data = {}) {
-      if (isCssColor(color)) {
-        data.style = {
-          ...data.style,
-          'background-color': `${color}`,
-          'border-color': `${color}`
-        }
-      } else if (color) {
-        const colorName = color.toString().trim()
-        data.class = {
-          ...data.class,
-          ['bg-' + colorName]: true
-        }
-        console.log(data.class)
-      }
-
-      return data
+    textColor () {
+      return this.getColor(this.color, 'white')
     },
-
-    setTextColor (color, data = {}) {
-      if (isCssColor(color)) {
-        data.style = {
-          ...data.style,
-          'color': `${color}`,
-          'caret-color': `${color}`
-        }
-      } else if (color) {
-        const colorName = color.toString().trim()
-        data.class = {
-          ...data.class,
-          ['text-' + colorName]: true
-        }
-      }
-      return data
-    },
-
-    __setLeafColor () {
-      this.__leafColor = this.leafColor
-        ? this.leafColor
-        : isCssColor(this.backgroundColor)
-          ? lighten(this.backgroundColor, -25)
-          : this.backgroundColor
+    bgLeafColor () {
+      // TODO: Perhaps nesting ternary statements "can" get too much ... :D
+      return this.leafColor // if leaf is defined then
+        ? isCssColor(this.leafColor) // check to see if it's a CSS color
+          ? this.leafColor // and just return it if so
+          : this.makeQuasarColorVar(this.leafColor) // otherwise convert it to a quasar color
+        : isCssColor(this.backgroundColor) && !isNamedCssColor(this.backgroundColor) // if leftColor not defined is bgColor a hex color
+          ? lighten(this.backgroundColor, -25) // then we can lighten it
+          : isCssColor(this.backgroundColor) //otherwise check and see if bgColor is a CSS color
+            ? this.backgroundColor // and just return it
+            : this.makeQuasarColorVar(this.backgroundColor, this.color) // otherwise return a quasar color.
     }
   },
 
-  created () {
-    this.__setLeafColor()
+  methods: {
+    getColor (color, defaultColor) {
+      return isCssColor(color)
+        ? color
+        : this.makeQuasarColorVar(color, defaultColor)
+    },
+    makeQuasarColorVar (color, defaultColor) {
+      return `var(--q-color-${color}, '${defaultColor}')`
+    }
   }
 
-})
+})
diff --git a/src/component/styl/common/qColors.styl b/src/component/styl/common/qColors.styl
@@ -0,0 +1,5 @@
+:root
+  $colors = ('red' 'pink' 'purple' 'deep-purple' 'indigo' 'blue' 'light-blue' 'cyan' 'teal' 'green' 'light-green' 'lime' 'yellow' 'amber' 'orange' 'deep-orange' 'brown' 'grey' 'blue-grey')
+  for $num in range(0 (length($colors) - 1))
+    for $colorNum in (1..10)
+      --q-color-{$colors[$num]}-{$colorNum}: lookup('$' + $colors[$num] + '-' + $colorNum)