Merge branch 'progressbar'

iampraba · Aug 2, 2017 · 2202b78 · 2202b78
2 parents 7d86d15 + d939909
commit 2202b78
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 168 deletions.
diff --git a/src/components/common/vuestic-progress-bar/VuesticProgressBar.vue b/src/components/common/vuestic-progress-bar/VuesticProgressBar.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="vuestic-progress-bar" v-set="{props: $props, refs: $refs, data: $data}">
+  <div class="vuestic-progress-bar" ref="bar">
     <horizontal-bar :min="min" :max="max" :value="value" :size="size" :color="color" v-if="type == 'horizontal'"
-                    :isActive = "isActive" ref="bar"></horizontal-bar>
+                    :isActive = "isActive" ref="bar" :animatedValue="animatedValue"></horizontal-bar>
     <vertical-bar :min="min" :max="max" :value="value" :size="size" :color="color" v-if="type == 'vertical'"
-                  :isActive = "isActive" ref="bar"></vertical-bar>
+                  :isActive = "isActive" ref="bar" :animatedValue="animatedValue"></vertical-bar>
     <circle-bar :min="min" :max="max" :value="value" :color="color" :background-color="backgroundColor"
-                :start-color="startColor" v-if="type == 'circle'" :isActive = "isActive" ref="bar"></circle-bar>
+                :start-color="startColor" v-if="type == 'circle'" :isActive = "isActive" ref="bar"
+                :animatedValue="animatedValue"></circle-bar>
   </div>
 </template>
 
@@ -37,51 +38,41 @@
         type: String,
         default: 'basic'
       },
-      color: {
+      colorName: {
         type: String,
-        default: 'brand-primary'
+        default: 'primary'
       },
-      startColor: {
+      startColorName: {
         type: String,
-        default: 'lighter-gray'
+        default: 'lighterGray'
       },
-      backgroundColor: {
+      backgroundColorName: {
         type: String,
         default: 'white'
       }
     },
-    directives: {
-      set (el, binding) {
-        binding.value.refs.bar.progressBarElement.style.transition = 'width linear ' +
-          binding.value.data.valueAnimationInterval + 'ms' + ',' + 'height linear ' +
-          binding.value.data.valueAnimationInterval + 'ms'
-      }
-    },
     watch: {
       value () {
         this.animateValue()
-        if (this.isActive !== true) {
-          this.isActive = true
-        }
       }
     },
     methods: {
       animateValue () {
         let startValue = this.value
         let valueMsecs = this.valueAnimationInterval / this.max
-        let delta = Math.sign(this.value - this.$refs.bar.animatedValue)
+        let delta = Math.sign(this.value - this.animatedValue)
         let valueInterval = setInterval(() => {
           if (!this.$refs.bar) {
             clearInterval(valueInterval)
             return
           }
-          if (startValue !== this.value || this.$refs.bar.animatedValue === this.value) {
+          if (startValue !== this.value || this.animatedValue === this.value) {
             clearInterval(valueInterval)
             if (this.value === this.max) {
               this.isActive = false
             }
           } else {
-            this.$refs.bar.animatedValue += delta
+            this.animatedValue += delta
           }
         }, valueMsecs)
       }
@@ -90,7 +81,11 @@
       return {
         value: 0,
         valueAnimationInterval: 2000,
-        isActive: false
+        animatedValue: 0,
+        isActive: false,
+        startColor: this.$store.state.app.config.palette[this.startColorName],
+        color: this.$store.state.app.config.palette[this.colorName],
+        backgroundColor: this.$store.state.app.config.palette[this.backgroundColorName]
       }
     }
   }

diff --git a/src/components/common/vuestic-progress-bar/progress-types/CircleProgressBar.vue b/src/components/common/vuestic-progress-bar/progress-types/CircleProgressBar.vue
@@ -1,8 +1,6 @@
 <template>
-  <div class="circle progress-bar"  :class="'value-' + animatedValue + ' color-' + color + ' ' +
-       'background-color-' + backgroundColor + ' ' + 'start-color-' + startColor"
-       v-progress-bar="{data: $data}">
-    <div class="overlay">
+  <div class="circle progress-bar" :style="'background-image: ' + backgroundImage">
+    <div class="overlay" :style="'background-color: ' + backgroundColor + '; color: ' + color">
       <span>{{animatedValue+'%'}}</span>
     </div>
   </div>
@@ -12,31 +10,25 @@
   export default {
     props: [
       'value',
+      'animatedValue',
       'min',
       'max',
       'color',
       'startColor',
       'backgroundColor',
       'isActive'
     ],
-    directives: {
-      progressBar (el, binding) {
-        binding.value.data.progressBarElement = el
-      }
-    },
-    methods: {
-      enableBarAnimation (flag) {
-      }
-    },
-    watch: {
-      isActive (flag) {
-        this.enableBarAnimation(flag)
-      }
-    },
-    data () {
-      return {
-        animatedValue: this.value,
-        progressBarElement: null
+    computed: {
+      backgroundImage () {
+        let result = {}
+        if (this.animatedValue < 50) {
+          let nextDeg = 90 + (3.6 * this.animatedValue) + 'deg'
+          result = `linear-gradient(90deg, ${this.startColor} 50%, transparent 50%, transparent), linear-gradient(${nextDeg}, ${this.color} 50%, ${this.startColor} 50%, ${this.startColor})`
+        } else {
+          let nextDeg = -90 + (3.6 * (this.animatedValue - 50)) + 'deg'
+          result = `linear-gradient(${nextDeg}, ${this.color} 50%, transparent 50%, transparent), linear-gradient(270deg, ${this.color} 50%, ${this.startColor} 50%, ${this.startColor})`
+        }
+        return result
       }
     }
   }
@@ -74,42 +66,6 @@
       align-items: center;
     }
 
-    @each $backgroundColorName in map-keys($colors-map) {
-      &.background-color-#{$backgroundColorName} {
-        .overlay {
-          background-color: map-get($colors-map, $backgroundColorName);
-        }
-      }
-    }
-
-    @each $progressColorName in map-keys($colors-map) {
-      $progressColor: map-get($colors-map, $progressColorName);
-      @each $startColorName in map-keys($colors-map) {
-        &.color-#{$progressColorName}.start-color-#{$startColorName} {
-          $startColor: map-get($colors-map, $startColorName);
-          &.progress-bar {
-            background-color: $progressColor;
-            .overlay {
-              color: $progressColor;
-            }
-          }
 
-          @for $i from 0 through $loops {
-            &.progress-bar.value-#{$i*$step} {
-              @if $i < $half {
-                $nextdeg: 90deg + ( $increment * $i );
-                background-image: linear-gradient(90deg, $startColor 50%, transparent 50%, transparent),
-                linear-gradient($nextdeg, $progressColor 50%, $startColor 50%, $startColor);
-              }
-              @else {
-                $nextdeg: -90deg + ( $increment * ( $i - $half ) );
-                background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent),
-                linear-gradient(270deg, $progressColor 50%, $startColor 50%, $startColor);
-              }
-            }
-          }
-        }
-      }
-    }
   }
 </style>
diff --git a/src/components/common/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue b/src/components/common/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="horizontal" :class="'color-' + color">
+  <div class="horizontal">
     <div v-if="size != 'thick'" class="value">{{animatedValue + '%'}}</div>
     <div class="progress" :class="size" >
-      <div class="progress-bar" :style="'width: ' + value + '%'" v-progress-bar="{data: $data}">
+      <div class="progress-bar" ref="progressBar" :style="'width: ' + value + '%'">
         <span v-if="size == 'thick'" :class="{hidden: animatedValue == min}" class="value">
           {{animatedValue + '%'}}
         </span>
@@ -12,39 +12,31 @@
 </template>
 
 <script>
+  import {color, lightness} from 'kewler'
+
   export default {
     props: [
       'value',
+      'animatedValue',
       'min',
       'max',
       'color',
       'size',
       'isActive'
     ],
-    directives: {
-      progressBar (el, binding) {
-        binding.value.data.progressBarElement = el
-      }
-    },
-    methods: {
-      enableBarAnimation (flag) {
-        if (flag) {
-          this.progressBarElement.setAttribute('class', 'progress-bar active')
+    mounted () {
+      let progressBar = this.$refs.progressBar
+      console.log(progressBar.style.transition)
+      let progressColor = color(this.color)
+      let current = progressColor
+      setInterval(() => {
+        if (progressColor(lightness(30))() !== current()) {
+          current = progressColor(lightness(30))
         } else {
-          this.progressBarElement.setAttribute('class', 'progress-bar')
+          current = progressColor
         }
-      }
-    },
-    watch: {
-      isActive (flag) {
-        this.enableBarAnimation(flag)
-      }
-    },
-    data () {
-      return {
-        animatedValue: this.value,
-        progressBarElement: null
-      }
+        progressBar.style.backgroundColor = current()
+      }, 500)
     }
   }
 </script>
@@ -55,26 +47,13 @@
   @import "../../../../../node_modules/bootstrap/scss/variables";
 
   .vuestic-progress-bar .horizontal {
-    @each $name in map-keys($colors-map) {
-      &.color-#{$name} {
-        $color: map-get($colors-map, $name);
-        color: $color;
-        .progress-bar {
-          background-color: $color;
-          &.active {
-            animation: change-#{$name} 1.5s linear infinite;
-            @keyframes change-#{$name} {
-              0% {background-color: $color}
-              50% {background-color: lighten($color, 30%)}
-            }
-          }
-        }
-      }
-    }
-
     display: inline-block;
     width: 100%;
 
+    .progress-bar {
+      transition: background-color ease .5s, width 3s linear !important;
+    }
+
     .value {
       text-align: center;
       &.hidden {

diff --git a/src/components/common/vuestic-progress-bar/progress-types/VerticalProgressBar.vue b/src/components/common/vuestic-progress-bar/progress-types/VerticalProgressBar.vue
@@ -1,47 +1,39 @@
 <template>
-  <div class="vertical" :class="'color-' + color">
+  <div class="vertical">
     <div class="progress" :class="size" >
-      <div class="progress-bar" :style="'height: ' + value + '%'" v-progress-bar="{data: $data}">
+      <div class="progress-bar" ref="progressBar" :style="'height: ' + value + '%'">
       </div>
     </div>
     <div class="value">{{animatedValue + '%'}}</div>
   </div>
 </template>
 
 <script>
+  import {color, lightness} from 'kewler'
+
   export default {
     props: [
       'value',
+      'animatedValue',
       'min',
       'max',
       'color',
       'size',
       'isActive'
     ],
-    directives: {
-      progressBar (el, binding) {
-        binding.value.data.progressBarElement = el
-      }
-    },
-    methods: {
-      enableBarAnimation (flag) {
-        if (flag) {
-          this.progressBarElement.setAttribute('class', 'progress-bar active')
+    mounted () {
+      let progressBar = this.$refs.progressBar
+      console.log(progressBar.style.transition)
+      let progressColor = color(this.color)
+      let current = progressColor
+      setInterval(() => {
+        if (progressColor(lightness(30))() !== current()) {
+          current = progressColor(lightness(30))
         } else {
-          this.progressBarElement.setAttribute('class', 'progress-bar')
+          current = progressColor
         }
-      }
-    },
-    watch: {
-      isActive (flag) {
-        this.enableBarAnimation(flag)
-      }
-    },
-    data () {
-      return {
-        animatedValue: this.value,
-        progressBarElement: null
-      }
+        progressBar.style.backgroundColor = current()
+      }, 500)
     }
   }
 </script>
@@ -52,21 +44,9 @@
   @import "../../../../../node_modules/bootstrap/scss/variables";
 
   .vuestic-progress-bar .vertical {
-    @each $name in map-keys($colors-map) {
-      &.color-#{$name} {
-        $color: map-get($colors-map, $name);
-        color: $color;
-        .progress-bar {
-          background-color: $color;
-          &.active {
-            animation: change-#{$name} 1.5s linear infinite;
-            @keyframes change-#{$name} {
-              0% {background-color: $color}
-              50% {background-color: lighten($color, 30%)}
-            }
-          }
-        }
-      }
+
+    .progress-bar {
+      transition: background-color ease .5s, height 3s linear !important;
     }
 
     .progress {

diff --git a/src/components/dashboard/DashboardInfoWidgets.vue b/src/components/dashboard/DashboardInfoWidgets.vue
@@ -37,7 +37,8 @@
               <div class="stats-title">Commits</div>
             </div>
             <div class="chart-container">
-              <progress-bar type="circle" ref="circleProgress" :color="'white'" :background-color="'brand-danger'" :startColor="'brand-danger'"></progress-bar>
+              <progress-bar type="circle" ref="circleProgress" :colorName="'white'" :backgroundColorName="'danger'"
+                            :startColorName="'danger'"></progress-bar>
             </div>
           </div>
         </div>