refactor: Progress-bar renamed to Progress

Author: rstoenescu

dev/app.js

@@ -35,7 +35,7 @@ router.map({
       '/list': { component: require('view/list.vue') },
       '/pagination': { component: require('view/pagination.vue') },
       '/parallax': { component: require('view/parallax.vue') },
-      '/progressbar': { component: require('view/progressbar.vue') },
+      '/progress': { component: require('view/progress.vue') },
       '/pull-to-refresh': { component: require('view/pull-to-refresh.vue') },
       '/rating': { component: require('view/rating.vue') },
       '/scroll-fire': { component: require('view/scroll-fire.vue') },

dev/views/index.vue

@@ -34,7 +34,7 @@ export default {
         'Modal',
         'Pagination',
         'Parallax',
-        'Progressbar',
+        'Progress',
         'Pull to Refresh',
         'Rating',
         'Scroll Fire',

dev/views/progress.vue

@@ -0,0 +1,44 @@
+<template>
+  <h1>Determinate</h1>
+  <p>
+    <quasar-progress :model="progress" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe positive" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe info" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe warning" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe secondary" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe tertiary" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe dark" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe negative" @click="randomize()"></quasar-progress>
+    <quasar-progress :model="progress" class="stripe animate" @click="randomize()"></quasar-progress>
+  </p>
+
+  <h1>Indeterminate</h1>
+  <p>
+    <quasar-progress class="indeterminate"></quasar-progress>
+    <quasar-progress class="indeterminate positive"></quasar-progress>
+    <quasar-progress class="indeterminate warning"></quasar-progress>
+    <quasar-progress class="indeterminate negative"></quasar-progress>
+    <quasar-progress class="indeterminate dark"></quasar-progress>
+  </p>
+
+  <h1>Specific Height</h1>
+  <p>
+    <quasar-progress class="indeterminate stripe" style="height: 25px"></quasar-progress>
+  </p>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      progress: 81
+    }
+  },
+  methods: {
+    randomize () {
+      this.progress = Math.round(Math.random() * 100)
+    }
+  }
+}
+</script>

dev/views/progressbar.vue

@@ -52,11 +52,11 @@
   </template>
 </div>
 <div v-if="progress" class="modal-slim-body">
-  <quasar-progress-bar
+  <quasar-progress
     :model="progress.model"
     class="primary stripe"
     :class="{indeterminate: progress.indeterminate}"
-  ></quasar-progress-bar>
+  ></quasar-progress>
   <span v-if="!progress.indeterminate">
     {{progress.model}} %
   </span>

src/components/dialog/dialog.html

@@ -34,7 +34,7 @@ import ToolbarTitle from './vue-components/layout/toolbar-title.vue'
 import Numeric from './vue-components/numeric/numeric.vue'
 import Pagination from './vue-components/pagination/pagination.vue'
 import Parallax from './vue-components/parallax/parallax.vue'
-import ProgressBar from './vue-components/progress-bar/progress-bar.vue'
+import Progress from './vue-components/progress/progress.vue'
 import PullToRefresh from './vue-components/pull-to-refresh/pull-to-refresh.vue'
 import Radio from './vue-components/radio/radio.vue'
 import Range from './vue-components/range/range.vue'
@@ -93,7 +93,7 @@ function registerComponents (_Vue) {
   _Vue.component('quasar-numeric', Numeric)
   _Vue.component('quasar-pagination', Pagination)
   _Vue.component('quasar-parallax', Parallax)
-  _Vue.component('quasar-progress-bar', ProgressBar)
+  _Vue.component('quasar-progress', Progress)
   _Vue.component('quasar-pull-to-refresh', PullToRefresh)
   _Vue.component('quasar-radio', Radio)
   _Vue.component('quasar-range', Range)

src/install.js

@@ -1,35 +1,35 @@
-$progress-bar-track-color          ?= rgba(0, 0, 0, .15)
-$progress-bar-track-desktop-height ?= 15px
-$progress-bar-default-track-color  ?= $primary
-$progress-bar-border-radius        ?= $generic-border-radius
-$progress-bar-margin               ?= .5rem 0 1rem 0
+$progress-track-color          ?= rgba(0, 0, 0, .15)
+$progress-track-desktop-height ?= 15px
+$progress-default-track-color  ?= $primary
+$progress-border-radius        ?= $generic-border-radius
+$progress-margin               ?= .5rem 0 1rem 0
 
 
-.quasar-progress-bar
+.quasar-progress
   position relative
   height 4px
   display block
   width 100%
-  background-color $progress-bar-track-color
-  border-radius $progress-bar-border-radius
+  background-color $progress-track-color
+  border-radius $progress-border-radius
   background-clip padding-box
-  margin $progress-bar-margin
+  margin $progress-margin
   overflow hidden
 
   &:not(.indeterminate) > div
     position absolute
     top 0
     bottom 0
     background-color $primary
-    border-radius $progress-bar-border-radius
+    border-radius $progress-border-radius
     transition width .3s linear
 
   &.animate
     > div
-      animation quasar-progress-bar-stripes 2s linear infinite
+      animation quasar-progress-stripes 2s linear infinite
 
   &.indeterminate > div
-    background-color $progress-bar-default-track-color
+    background-color $progress-default-track-color
 
     &:before, &:after
       content ''
@@ -41,9 +41,9 @@ $progress-bar-margin               ?= .5rem 0 1rem 0
       will-change left, right
 
     &:before
-      animation quasar-progress-bar-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
+      animation quasar-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
     &:after
-      animation quasar-progress-bar-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
+      animation quasar-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
       animation-delay 1.15s
 
   &.stripe
@@ -56,10 +56,10 @@ $progress-bar-margin               ?= .5rem 0 1rem 0
       > div
         background-color $color
 
-body.desktop .quasar-progress-bar
-  height $progress-bar-track-desktop-height
+body.desktop .quasar-progress
+  height $progress-track-desktop-height
 
-@keyframes quasar-progress-bar-indeterminate
+@keyframes quasar-progress-indeterminate
   0%
     left -35%
     right 100%
@@ -70,7 +70,7 @@ body.desktop .quasar-progress-bar
     left 100%
     right -90%
 
-@keyframes quasar-progress-bar-indeterminate-short
+@keyframes quasar-progress-indeterminate-short
   0%
     left -200%
     right 100%
@@ -81,7 +81,7 @@ body.desktop .quasar-progress-bar
     left 107%
     right -8%
 
-@keyframes quasar-progress-bar-stripes
+@keyframes quasar-progress-stripes
   from
     background-position 40px 0
   to

…nents/progress-bar/progress-bar.ios.styl …ue-components/progress/progress.ios.stylsrc/vue-components/progress-bar/progress-bar.ios.styl renamed to src/vue-components/progress/progress.ios.styl src/vue-components/progress-bar/progress-bar.ios.styl renamed to src/vue-components/progress/progress.ios.styl

@@ -1,35 +1,35 @@
-$progress-bar-track-color          ?= rgba(0, 0, 0, .15)
-$progress-bar-track-desktop-height ?= 15px
-$progress-bar-default-track-color  ?= $primary
-$progress-bar-border-radius        ?= $generic-border-radius
-$progress-bar-margin               ?= .5rem 0 1rem 0
+$progress-track-color          ?= rgba(0, 0, 0, .15)
+$progress-track-desktop-height ?= 15px
+$progress-default-track-color  ?= $primary
+$progress-border-radius        ?= $generic-border-radius
+$progress-margin               ?= .5rem 0 1rem 0
 
 
-.quasar-progress-bar
+.quasar-progress
   position relative
   height 4px
   display block
   width 100%
-  background-color $progress-bar-track-color
-  border-radius $progress-bar-border-radius
+  background-color $progress-track-color
+  border-radius $progress-border-radius
   background-clip padding-box
-  margin $progress-bar-margin
+  margin $progress-margin
   overflow hidden
 
   &:not(.indeterminate) > div
     position absolute
     top 0
     bottom 0
     background-color $primary
-    border-radius $progress-bar-border-radius
+    border-radius $progress-border-radius
     transition width .3s linear
 
   &.animate
     > div
-      animation quasar-progress-bar-stripes 2s linear infinite
+      animation quasar-progress-stripes 2s linear infinite
 
   &.indeterminate > div
-    background-color $progress-bar-default-track-color
+    background-color $progress-default-track-color
 
     &:before, &:after
       content ''
@@ -41,9 +41,9 @@ $progress-bar-margin               ?= .5rem 0 1rem 0
       will-change left, right
 
     &:before
-      animation quasar-progress-bar-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
+      animation quasar-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
     &:after
-      animation quasar-progress-bar-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
+      animation quasar-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
       animation-delay 1.15s
 
   &.stripe
@@ -56,10 +56,10 @@ $progress-bar-margin               ?= .5rem 0 1rem 0
       > div
         background-color $color
 
-body.desktop .quasar-progress-bar
-  height $progress-bar-track-desktop-height
+body.desktop .quasar-progress
+  height $progress-track-desktop-height
 
-@keyframes quasar-progress-bar-indeterminate
+@keyframes quasar-progress-indeterminate
   0%
     left -35%
     right 100%
@@ -70,7 +70,7 @@ body.desktop .quasar-progress-bar
     left 100%
     right -90%
 
-@keyframes quasar-progress-bar-indeterminate-short
+@keyframes quasar-progress-indeterminate-short
   0%
     left -200%
     right 100%
@@ -81,7 +81,7 @@ body.desktop .quasar-progress-bar
     left 107%
     right -8%
 
-@keyframes quasar-progress-bar-stripes
+@keyframes quasar-progress-stripes
   from
     background-position 40px 0
   to

…nents/progress-bar/progress-bar.mat.styl …ue-components/progress/progress.mat.stylsrc/vue-components/progress-bar/progress-bar.mat.styl renamed to src/vue-components/progress/progress.mat.styl src/vue-components/progress-bar/progress-bar.mat.styl renamed to src/vue-components/progress/progress.mat.styl

@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-progress-bar">
+  <div class="quasar-progress">
     <div :style="{width: model + '%'}"></div>
   </div>
 </template>