Realease candidate 1.0.0 RC1

CSSColorVars · Mar 23, 2019 · 69b6c60 · 69b6c60
1 parent cb440dd
commit 69b6c60
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 48 deletions.
diff --git a/src/components/NdsGetcode.vue b/src/components/NdsGetcode.vue
@@ -4,7 +4,6 @@
         <v-tabs v-model="active">
           <v-tabs-slider color="yellow" :style="dialog2 ? activeTab() : '' "></v-tabs-slider>
           <v-tab ripple href="#css">CSS</v-tab>
-          <v-tab ripple href="#scss">SCSS</v-tab>
           <v-tab ripple href="#json">JSON</v-tab>
           <v-tab ripple href="#snippets">SNIPPETS</v-tab>
         </v-tabs>
@@ -16,14 +15,6 @@
               </pre>
             </v-card>
           </v-tab-item>
-          <v-tab-item value="scss">
-            <v-card flat>
-              <pre class="language-scss code-toolbar">
-                <code class="language-scss" v-html="code">
-                </code>
-                </pre>
-            </v-card>
-          </v-tab-item>
           <v-tab-item value="json">
             <v-card flat>
               <pre class="language-scss code-toolbar">
@@ -65,7 +56,7 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-// import { gradientColors } from '@/store/util/functions'
+import { hslObject, rbgObject } from '@/store/util/functions'
 export default {
   name: 'NdsGetcode',
   data () {
@@ -75,7 +66,7 @@ export default {
       right: true,
       dialog2: false,
       active: 'css',
-      code: `jeje`,
+      code: `Developing`,
       btnCode: true
     }
   },
@@ -91,43 +82,33 @@ export default {
   },
   computed: {
     ...mapState(['palleteColors']),
-    colorCSS: function () {
-      let html = ''
-      let text = ''
-      for (let i = 0; i < this.palleteColors.length; i++) {
-        if (i === this.palleteColors.length - 1) {
-          html = `${html}
-  `
-          text = `${text}
-  `
-        }
-      }
-      text = `:root {
-  ${text}
-}`
-      return {
-        html,
-        text
-      }
-    },
     codeCSS: function () {
       let html = ''
       let text = ''
       for (let i = 0; i < this.palleteColors.length; i++) {
         const p = this.palleteColors[i]
         if (this.palleteColors.length - 1 !== i) {
           html = `${html}<span class="code-property">--${p.property}-color</span>: <span class="code-value" style="--value-color: ${p.value};">${p.value}</span>;
+  <span class="code-property">--${p.property}-HS</span>: <span class="code-val">${hslObject(p)[0]}, ${hslObject(p)[1]}%</span>;
+  <span class="code-property">--${p.property}-RGB</span>: <span class="code-val">${rbgObject(p).r}, ${rbgObject(p).g}, ${rbgObject(p).b}</span>;
   `
           text = `${text}--${p.property}-color: ${p.value};
+  --${p.property}-HS: ${hslObject(p)[0]}, ${hslObject(p)[1]}%;
+  --${p.property}-RGB: ${rbgObject(p).r}, ${rbgObject(p).g}, ${rbgObject(p).b};
   `
         } else {
-          html = `${html}<span class="code-property">--${p.property}-color</span>: <span class="code-value" style="--value-color: ${p.value};">${p.value}</span>;`
-          text = `${text}--${p.property}-color: ${p.value};`
+          html = `${html}<span class="code-property">--${p.property}-color</span>: <span class="code-value" style="--value-color: ${p.value};">${p.value}</span>;
+  <span class="code-property">--${p.property}-HS</span>: <span class="code-val">${hslObject(p)[0]}, ${hslObject(p)[1]}%</span>;
+  <span class="code-property">--${p.property}-RGB</span>: <span class="code-val">${rbgObject(p).r}, ${rbgObject(p).g}, ${rbgObject(p).b}</span>;`
+          text = `${text}--${p.property}-color: ${p.value};
+  --${p.property}-HS: ${hslObject(p)[0]}, ${hslObject(p)[1]}%;
+  --${p.property}-RGB: ${rbgObject(p).r}, ${rbgObject(p).g}, ${rbgObject(p).b};`
         }
       }
       html = `<span class="code-selector">:root</span> {
   ${html}
-}`
+}
+`
       text = `:root {
   ${text}
 }`
@@ -140,9 +121,6 @@ export default {
       if (this.active === 'css') {
         return this.codeCSS.text
       }
-      if (this.active === 'scss') {
-        return 'copy SCSS'
-      }
       if (this.active === 'json') {
         return 'copy JSON'
       }
@@ -160,10 +138,10 @@ export default {
       }
     },
     onCopy: function (e) {
-      alert('You just copied: ' + e.text)
+      console.log('You just copied: ' + e.text)
     },
     onError: function (e) {
-      alert('Failed to copy code')
+      console.log('Failed to copy code')
     }
   }
 }
@@ -274,6 +252,9 @@ code:after, kbd:after, code:before, kbd:before {
 .code-property{
   color: #66d9ef;
 }
+.code-val{
+  color: #fd971f;
+}
 .code-value{
   color: #fd971f;
   &::before{

diff --git a/src/components/NdsPallete.vue b/src/components/NdsPallete.vue
@@ -42,12 +42,11 @@
           :key="item.property"
           avatar
           @dblclick.stop="mini = !mini"
-          @click=""
+          @click="`javascript:void()`"
         >
           <v-list-tile-avatar @click="TOGGLE_COLOR(id)">
-            <v-icon :style="'color:' + invertvalue + ';background-color:'+ item.value +';'" v-text="item.edit ? 'brush' : ''"></v-icon>
+            <v-icon :style="'border: solid #FFF 1px; color:' + invertvalue + ';background-color:'+ item.value +';'" v-text="item.edit ? 'brush' : ''"></v-icon>
           </v-list-tile-avatar>
-
           <v-list-tile-content @click="TOGGLE_COLOR(id)">
             <v-list-tile-title>--{{ item.property }}-color</v-list-tile-title>
           </v-list-tile-content>
@@ -57,6 +56,7 @@
             </v-btn>
           </v-list-tile-action>
         </v-list-tile>
+        <div class="l-block"></div>
         <v-toolbar flat class="transparent">
           <v-list class="pa-0">
             <v-divider></v-divider>
@@ -122,4 +122,7 @@ export default {
     align-self: flex-end;
     margin-bottom: 5rem;
   }
+  .v-avatar i{
+    border-radius: solid 1px #FFF !important;
+  }
 </style>
diff --git a/src/components/NdsRgba.vue b/src/components/NdsRgba.vue
@@ -7,10 +7,10 @@
       :amount="colorActive.rgba.alpha"
       :updateAmount="updateAlphat"
       :minAmount="colorActive.minAmount*100"
-      :maxAmount="colorActive.rgba.max"
+      :maxAmount="colorActive.rgba.max*100"
       :maxLength= "colorActive.rgba.alpha*100 < 100 ? '4' : '100' "
       label="Alpha:"
-      :step="colorActive.rgba.step"
+      :step="colorActive.rgba.step*100"
       :invertvalue="invertvalue"
     >Rgba color
     </color-header>
@@ -32,15 +32,15 @@
         <p class="center">rgba(var(--{{ colorActive.property }}-RGB), {{ colorActive.rgba.alpha/100 }})</p>
         <div class="card--valuecolor center"
           :color="'rgba(' + rgbValues.r + ',' + rgbValues.g + ',' + rgbValues.b + ',' + colorActive.rgba.alpha + ')'"
-          v-clipboard:copy="`rgba(var(--rgb-${colorActive.property}), ${colorActive.rgba.alpha/100})`"
+          v-clipboard:copy="`rgba(var(--${colorActive.property}-RGB), ${colorActive.rgba.alpha/100})`"
           v-clipboard:success="updateNotification"
           v-clipboard:error="updateError"
           :style="'--rgba-color: rgba(' + rgbValues.r + ',' + rgbValues.g + ',' + rgbValues.b + ',' + colorActive.rgba.alpha/100 + ');'"
         >
             <span class="card--textcolor" :style="'color:' + rgbInvertValue + ';'">Copy value</span>
             <v-btn
               icon ripple
-              v-clipboard:copy="`rgba(var(--rgb-${colorActive.property}), ${colorActive.rgba.alpha/100})`"
+              v-clipboard:copy="`rgba(var(--${colorActive.property}-RGB), ${colorActive.rgba.alpha/100})`"
               v-clipboard:success="updateNotification"
               v-clipboard:error="updateError"
             >
@@ -49,8 +49,11 @@
         </div>
       </div>
       <hr>
-        <h2>Static values:</h2>
+      <h2>Static values:</h2>
       <div class="nds-item nds-container main-center">
+        <!-- <div class="nds-item s-100">
+          rgba({{ rgbValues.r }}, {{ rgbValues.g }}, {{ rgbValues.b }}, {{ colorActive.rgba.alpha/100 }})
+        </div> -->
         <div class="nds-item s-25 center"><b>R</b></div>
         <div class="nds-item s-25 center"><b>G</b></div>
         <div class="nds-item s-25 center"><b>B</b></div>
@@ -64,6 +67,7 @@
   </color-container>
 </template>
 <script>
+import Color from 'color'
 import ColorContainer from '@/ui-components/ColorContainer.vue'
 import ColorHeader from '@/ui-components/ColorHeader.vue'
 import ColorMain from '@/ui-components/ColorMain.vue'
@@ -80,7 +84,11 @@ export default {
     ColorJump
   },
   computed: {
-    ...mapGetters(['colorActive', 'rgbValues', 'rgbaMax', 'invertvalue', 'rgbInvertValue'])
+    ...mapGetters(['colorActive', 'rgbValues', 'rgbaMax', 'invertvalue', 'rgbInvertValue']),
+    hslaValue: function () {
+      let nds = Color('rgba(' + this.rgbValues.r + ',' + this.rgbValues.g + ',' + this.rgbValues.b + ',' + this.colorActive.rgba.alpha / 100 + ')').hsl().round()
+      return nds
+    }
   },
   methods: {
     ...mapMutations(['updateAlpha', 'updateAlphat', 'closeNotification', 'updateNotification', 'updateError'])
@@ -140,6 +148,9 @@ export default {
     &:active{
       transform: scale(.97);
     }
+    &:hover{
+      cursor: pointer;
+    }
     &::before{
       content: '';
       display: flex;

diff --git a/src/store/getters.js b/src/store/getters.js
@@ -37,7 +37,6 @@ export const getters = {
     for (let s = 0; s < state.palleteColors.length; s++) {
       let p = state.palleteColors[s]
       if (p.edit === true) {
-        console.log(hslObject(p))
         return hslObject(p)
       }
     }

diff --git a/src/store/mutations.js b/src/store/mutations.js
@@ -23,6 +23,9 @@ export const mutations = {
         const hexValidate = /^#+([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/
         if (hexValidate.test(hex.target.value)) {
           p.value = hex.target.value
+          p.lighten.jump = 0
+          p.darken.jump = 0
+          p.rgba.alpha = 50
           p.valueState = true
         } else {
           p.valueState = false

diff --git a/src/ui-components/ColorHeader.vue b/src/ui-components/ColorHeader.vue
@@ -139,4 +139,7 @@ export default {
   input::-webkit-inner-spin-button {
     opacity: 1;
   }
+  .v-text-field.v-text-field--enclosed > .v-input__control > .v-input__slot{
+    padding: 0;
+  }
 </style>