Merge branch 'bdeanindy-master' of https://github.com/epicmaxco/vuest…

…ic-admin # Conflicts: # package.json
kilho37 · Aug 11, 2017 · 7dc638a · 7dc638a
2 parents 20d1b61 + e56b34e
commit 7dc638a
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 dist/
 npm-debug.log
 .idea/
+package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "vee-validate": "2.0.0-rc.7",
     "vue": "^2.3.0",
     "vue-bulma-expanding": "0.0.0",
-    "vue-chartjs": "2.8.1",
+    "vue-chartjs": "^2.8.1",
     "vue-router": "^2.2.0",
     "vue-slider-component": "^2.3.3",
     "vue2-circle-progress": "^1.0.3",

diff --git a/src/components/statistics/progress-bars/ProgressBars.vue b/src/components/statistics/progress-bars/ProgressBars.vue
@@ -52,43 +52,43 @@
           <div class="col-sm-4 col-12">
             Basic
             <div class="pb-container">
-              <vuestic-progress-bar ref="chBasic" colorName="danger">
+              <vuestic-progress-bar ref="chBasic" :startValue="100" colorName="danger">
               </vuestic-progress-bar>
             </div>
           </div>
           <div class="col-sm-4 col-12">
             Thin
             <div class="pb-container">
-              <vuestic-progress-bar size="thin" ref="chThin" colorName="info">
+              <vuestic-progress-bar size="thin" ref="chThin" :startValue="100" colorName="info">
               </vuestic-progress-bar>
             </div>
           </div>
           <div class="col-sm-4 col-12">
             Thick
             <div class="pb-container">
-              <vuestic-progress-bar size="thick" ref="chThick" colorName="warning">
+              <vuestic-progress-bar size="thick" ref="chThick" :startValue="100" colorName="warning">
               </vuestic-progress-bar>
             </div>
           </div>
           <div class="col-sm-4 col-12">
             Basic Vertical
             <div class="pb-container">
               <div>
-                <vuestic-progress-bar type="vertical" ref="cvBasic" colorName="success"></vuestic-progress-bar>
+                <vuestic-progress-bar type="vertical" ref="cvBasic" :startValue="100" colorName="success"></vuestic-progress-bar>
               </div>
             </div>
           </div>
           <div class="col-sm-4 col-12">
             Thin Vertical
             <div class="pb-container">
-              <vuestic-progress-bar size="thin" type="vertical" ref="cvThin" colorName="black">
+              <vuestic-progress-bar size="thin" type="vertical" ref="cvThin" :startValue="100" colorName="black">
               </vuestic-progress-bar>
             </div>
           </div>
           <div class="col-sm-4 col-12">
             Circle
             <div class="pb-container">
-              <vuestic-progress-bar type="circle" ref="ccircle"></vuestic-progress-bar>
+              <vuestic-progress-bar type="circle" :startValue="100" ref="ccircle"></vuestic-progress-bar>
             </div>
           </div>
         </div>
@@ -108,7 +108,7 @@
       for (let ref in this.$refs) {
         this.$refs[ref].$data.valueAnimationInterval = this.valueAnimationInterval
         let timeout = setTimeout(() => {
-          if (!this.$refs[ref]) {
+          if (!this.$refs[ref] || this.$refs[ref].colorName !== 'primary') {
             clearTimeout(timeout)
             return
           }
@@ -119,7 +119,7 @@
     },
     data () {
       return {
-        valueAnimationInterval: 3000
+        valueAnimationInterval: 2000
       }
     }
   }

diff --git a/src/components/vuestic-components/vuestic-progress-bar/VuesticProgressBar.vue b/src/components/vuestic-components/vuestic-progress-bar/VuesticProgressBar.vue
@@ -35,6 +35,10 @@
         type: Number,
         default: 100
       },
+      startValue: {
+        type: Number,
+        default: 0
+      },
       size: {
         type: String,
         default: 'basic'
@@ -80,9 +84,9 @@
     },
     data () {
       return {
-        value: 0,
+        value: this.startValue,
         valueAnimationInterval: 2000,
-        animatedValue: 0,
+        animatedValue: this.startalue,
         isActive: false,
         startColor: this.$store.state.app.config.palette[this.startColorName],
         color: this.$store.state.app.config.palette[this.colorName],

diff --git a/...mponents/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue b/...mponents/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue
@@ -29,8 +29,12 @@
       let progressColor = color(this.color)
       let current = progressColor
       setInterval(() => {
-        if (progressColor(lightness(30))() !== current()) {
-          current = progressColor(lightness(30))
+        if (this.isActive) {
+          if (progressColor(lightness(30))() !== current()) {
+            current = progressColor(lightness(30))
+          } else {
+            current = progressColor
+          }
         } else {
           current = progressColor
         }
@@ -50,7 +54,7 @@
     width: 100%;
 
     .progress-bar {
-      transition: background-color ease .5s, width 3s linear !important;
+      transition: background-color ease .5s, width 2s linear !important;
     }
 
     .value {

diff --git a/...components/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue b/...components/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue
@@ -46,7 +46,7 @@
   .vuestic-progress-bar .vertical {
 
     .progress-bar {
-      transition: background-color ease .5s, height 3s linear !important;
+      transition: background-color ease .5s, height 2s linear !important;
     }
 
     .progress {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ node_modules/ @@
     dist/
     npm-debug.log
     .idea/
+    package-lock.json