Progress Bar Improvements (epicmaxco#246)

* Change progress bar interface * Minor * Change interface and some styles * Add demo files * Minor changes * Minor changes
Johnsstt · Jul 20, 2018 · 984e8ff · 984e8ff
1 parent 83454c7
commit 984e8ff
Show file tree

Hide file tree

Showing 15 changed files with 513 additions and 278 deletions.
diff --git a/src/components/dashboard/DashboardInfoWidgets.vue b/src/components/dashboard/DashboardInfoWidgets.vue
@@ -37,8 +37,7 @@
               <div class="stats-title">Commits</div>
             </div>
             <div class="chart-container">
-              <vuestic-progress-bar type="circle" ref="circleProgress" :colorName="'white'" :backgroundColorName="'danger'"
-                            :startColorName="'danger'"></vuestic-progress-bar>
+              <vuestic-progress-bar type="circle" :value="70" theme="White" backgroundTheme="Danger"/>
             </div>
           </div>
         </div>
@@ -62,11 +61,7 @@
 
 <script>
   export default {
-    name: 'dashboard-info-widgets',
-
-    mounted () {
-      this.$refs.circleProgress.$data.value = 70
-    }
+    name: 'dashboard-info-widgets'
   }
 </script>
 

diff --git a/src/components/statistics/progress-bars/ProgressBars.vue b/src/components/statistics/progress-bars/ProgressBars.vue
@@ -22,21 +22,3 @@
     components: { StandardBars, ColorfulBars },
   }
 </script>
-
-<style lang="scss">
-  .progress-bars {
-    .vuestic-progress-bar {
-      .progress.thick {
-        margin-top: calc(#{$progress-bar-width-thick} / 2 - .125rem);
-      }
-      .progress.thin {
-        margin-top: .125rem;
-      }
-    }
-
-    .vertical, .circle {
-      margin-top: 1.25rem;
-      margin-left: .125rem;
-    }
-  }
-</style>
diff --git a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
@@ -3,42 +3,32 @@
     <div class="row">
       <div class="col-sm-4 col-12">
         {{'progressBars.basic' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar ref="chBasic" colorName="danger"/>
-        </div>
+        <vuestic-progress-bar :value="100" theme="Danger"/>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.thin' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar size="thin" ref="chThin" colorName="info"/>
-        </div>
+        <vuestic-progress-bar :value="100" size="thin" theme="Info"/>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.thick' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar size="thick" ref="chThick" colorName="warning"/>
-        </div>
+        <vuestic-progress-bar :value="100" size="thick" theme="Warning"/>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.basicVertical' | translate}}
         <div class="pb-container">
-          <div>
-            <vuestic-progress-bar type="vertical" ref="cvBasic"
-                                  colorName="success"/>
-          </div>
+          <vuestic-progress-bar :value="100" type="vertical" theme="Success"/>
         </div>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.thinVertical' | translate}}
         <div class="pb-container">
-          <vuestic-progress-bar size="thin" type="vertical" ref="cvThin"
-                                colorName="black"/>
+          <vuestic-progress-bar :value="100" size="thin" type="vertical" theme="Black"/>
         </div>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.circle' | translate}}
         <div class="pb-container">
-          <vuestic-progress-bar type="circle" ref="ccircle"/>
+          <vuestic-progress-bar :value="100" type="circle"/>
         </div>
       </div>
     </div>
@@ -47,11 +37,6 @@
 
 <script>
   export default {
-    name: 'standard-bars',
-    mounted () {
-      for (let ref in this.$refs) {
-        this.$refs[ref].value = 100
-      }
-    },
+    name: 'standard-bars'
   }
 </script>
diff --git a/src/components/statistics/progress-bars/Widgets/StandardBars.vue b/src/components/statistics/progress-bars/Widgets/StandardBars.vue
@@ -3,46 +3,32 @@
     <div class="row">
       <div class="col-sm-4 col-12">
         {{'progressBars.basic' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar ref="hBasic">
-          </vuestic-progress-bar>
-        </div>
+        <vuestic-progress-bar :value="100" :animated="true"/>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.thin' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar size="thin" ref="hThin">
-          </vuestic-progress-bar>
-        </div>
+        <vuestic-progress-bar :value="100" size="thin" :animated="true"/>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.thick' | translate}}
-        <div class="pb-container">
-          <vuestic-progress-bar size="thick" ref="hThick">
-          </vuestic-progress-bar>
-        </div>
+        <vuestic-progress-bar :value="100" size="thick" :animated="true"/>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.basicVertical' | translate}}
         <div class="pb-container">
-          <div>
-            <vuestic-progress-bar type="vertical"
-                                  ref="vBasic"></vuestic-progress-bar>
-          </div>
+          <vuestic-progress-bar :value="100" type="vertical" :animated="true"/>
         </div>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.thinVertical' | translate}}
-        <div>
-          <vuestic-progress-bar size="thin" type="vertical" ref="vThin">
-          </vuestic-progress-bar>
+        <div class="pb-container">
+          <vuestic-progress-bar :value="100" size="thin" type="vertical" :animated="true"/>
         </div>
       </div>
       <div class="col-sm-4 col-12">
         {{'progressBars.circle' | translate}}
-        <div>
-          <vuestic-progress-bar type="circle"
-                                ref="circle"></vuestic-progress-bar>
+        <div class="pb-container">
+          <vuestic-progress-bar :value="100" type="circle" :animated="true"/>
         </div>
       </div>
     </div>
@@ -51,25 +37,13 @@
 
 <script>
   export default {
-    name: 'standard-bars',
-    data () {
-      return {
-        valueAnimationInterval: 3000
-      }
-    },
-    mounted () {
-      let delay = 0
-      for (let ref in this.$refs) {
-        this.$refs[ref].$data.valueAnimationInterval = this.valueAnimationInterval
-        let timeout = setTimeout(() => {
-          if (!this.$refs[ref]) {
-            clearTimeout(timeout)
-            return
-          }
-          this.$refs[ref].$data.value = 100
-        }, delay)
-        delay += this.valueAnimationInterval
-      }
-    },
+    name: 'standard-bars'
   }
 </script>
+
+<style lang="scss">
+  .pb-container {
+    margin-top: 1.25rem;
+    margin-left: .125rem;
+  }
+</style>
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -284,6 +284,7 @@ $progress-bar-vertical-height: 5.75rem;
 $progress-bar-width-thin: .125rem;
 $progress-bar-width-basic: .5rem;
 $progress-bar-width-thick: 1.5rem;
+$vertical-progress-bar-width-thick: 2rem;
 
 //Tables
 $table-bg-accent: $white;

diff --git a/src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue b/src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue
@@ -13,7 +13,6 @@
         {{ $t(item.displayName) }}
       </router-link>
     </div>
-
   </vuestic-widget>
 </template>
 

diff --git a/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticTheme.js b/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticTheme.js
@@ -4,6 +4,8 @@ export const VuesticTheme = {
   Info: 'Info',
   Success: 'Success',
   Warning: 'Warning',
+  White: 'White',
+  Black: 'Black'
 }
 
 export const colorConfig = {
@@ -12,6 +14,8 @@ export const colorConfig = {
   [VuesticTheme.Info]: '#4ab2e3',
   [VuesticTheme.Success]: '#db76df',
   [VuesticTheme.Warning]: '#f7cc36',
+  [VuesticTheme.White]: '#fff',
+  [VuesticTheme.Black]: '#000'
 }
 
 export const colorArray = Object.values(colorConfig)
diff --git a/src/vuestic-theme/vuestic-components/vuestic-progress-bar/VuesticProgressBar.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-progress-bar/VuesticProgressBar.demo.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-container__item" style="width: 300px;">
+      <div class="row">
+        <div class="col-lg-4">
+          <vuestic-progress-bar
+            :value="35"
+            type="circle"
+            theme="Warning"
+            background-theme="White"
+          />
+        </div>
+        <div class="col-lg-4">
+          <vuestic-progress-bar
+            :value="75"
+            text="circle"
+            type="circle"
+            theme="Info"
+            :animated="true"
+            background-theme="White"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="demo-container__item" style="width: 300px">
+      <div class="row">
+        <div class="col-lg-4">
+          <vuestic-progress-bar :value="55" theme="Warning" type="vertical" size="thin"/>
+        </div>
+        <div class="col-lg-4">
+          <vuestic-progress-bar :value="40" theme="Danger" text="second" type="vertical"/>
+        </div>
+        <div class="col-lg-4">
+          <vuestic-progress-bar :value="85" theme="Info" type="vertical" size="thick" :animated="true"/>
+        </div>
+      </div>
+    </div>
+    <div class="demo-container__item" style="width: 300px">
+      <vuestic-progress-bar :value="10" theme="Primary"/>
+      <vuestic-progress-bar :value="30" theme="Info" text="blue" :animated="true"/>
+      <vuestic-progress-bar :value="50" theme="Warning"/>
+      <vuestic-progress-bar :value="70" theme="Danger" text="Text"/>
+      <vuestic-progress-bar :value="90" theme="Success" :animated="true"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import VuesticProgressBar from './VuesticProgressBar'
+
+export default {
+  components: {
+    VuesticProgressBar,
+  },
+}
+</script>