Merge pull request epicmaxco#271 from vlad-shusterman/spinners-custom…

…ization Spinners customization
renato04 · Jul 20, 2018 · f34c246 · f34c246
2 parents 04738b7 + fd9f485
commit f34c246
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 35 deletions.
diff --git a/src/assets/icons/icon-faster.svg b/src/assets/icons/icon-faster.svg
diff --git a/src/assets/icons/icon-slower.svg b/src/assets/icons/icon-slower.svg
diff --git a/src/components/ui/spinners/Spinners.vue b/src/components/ui/spinners/Spinners.vue
@@ -1,15 +1,45 @@
 <template>
-  <div class="row">
+  <div class="row spinners">
     <div class="col-md-12">
-      <vuestic-widget :headerText="$t('spinners.title')">
+      <vuestic-widget :headerText="$t('spinners.title')" class="spinners__widget">
+        <div class="spinners__customization">
+          <div class="row">
+            <div class="col-md-4">
+              <div class="row spinners__size">
+                <h5 class="spinners__icon-small">A</h5>
+                <div class="spinners__size-picker">
+                  <vuestic-slider v-model="config.size" :options="sliderSize"/>
+                </div>
+                <h3>A</h3>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="row spinners__duration">
+                <div class="spinners__icon-duration-slower i-vuestic-slower"/>
+                <div class="spinners__duration-picker">
+                  <vuestic-slider v-model="currentDuration" :options="sliderDuration"/>
+                </div>
+                <div class="spinners__icon-duration-faster i-vuestic-faster"/>
+              </div>
+            </div>
+            <div class="col-md-2 spinners__color">
+              <vuestic-pallet-custom :palette="paletteArray" v-model="color" class="spinners__color-picker"/>
+            </div>
+          </div>
+          <div class="row">
+            <div class="spinners__divider-copy"/>
+          </div>
+        </div>
         <div v-for="(group, i) in groups" :key="i" class="row">
           <div v-for="item in group" :key="item" class="col-sm-12 col-md-3">
             <div class="spinner-box-container">
               <div class="spinner-box">
                 <component
-                        :is="item"
-                        :color="palette.primary"
-                        :size="config.size">
+                  :animation-duration="speed"
+                  :is="item"
+                  :color="color"
+                  :size="config.size"
+                >
                 </component>
               </div>
               <span>{{item | displayName}}</span>
@@ -28,48 +58,157 @@
 </template>
 
 <script>
-  import * as spinners from 'epic-spinners'
-  import {mapGetters} from 'vuex'
+import * as spinners from 'epic-spinners'
+import { mapGetters } from 'vuex'
+import VuesticPalletCustom
+  from '../../../vuestic-theme/vuestic-components/vuestic-color-picker/VuesticPalletCustom'
+import { colorArray } from '../../../vuestic-theme/vuestic-components/vuestic-color-picker/VuesticTheme'
+import VuesticSlider
+  from '../../../vuestic-theme/vuestic-components/vuestic-slider/VuesticSlider'
 
-  export default {
-    components: {
-      ...spinners
-    },
-    data: function () {
-      return {
-        config: {
-          size: 80,
-          group: 4
-        }
+export default {
+  components: {
+    ...spinners,
+    VuesticPalletCustom,
+    VuesticSlider
+  },
+  data () {
+    return {
+      config: {
+        size: 80,
+        group: 4,
+        duration: 1500
+      },
+      currentDuration: 1500,
+      paletteArray: colorArray,
+      color: '#4AE387',
+      sliderSize: {
+        formatter: v => `${v}px`,
+        min: 40,
+        max: 100
+      },
+      sliderDuration: {
+        min: 1000,
+        max: 2000
       }
-    },
-    computed: {
-      ...mapGetters(['palette']),
+    }
+  },
+  computed: {
+    ...mapGetters(['palette']),
 
-      groups () {
-        return this.groupItems(Object.keys(spinners), this.config.group)
-      }
+    speed () {
+      return this.sliderDuration.min + this.sliderDuration.max - this.currentDuration
     },
-    filters: {
-      displayName (name) {
-        return name.replace('Spinner', '').match(/[A-Z][a-z]+/g).join(' ')
-      }
+
+    groups () {
+      return this.groupItems(Object.keys(spinners), this.config.group)
     },
-    methods: {
-      groupItems (items, groupSize) {
-        let grouped = []
+  },
 
-        for (let i = 0; i < items.length; i += groupSize) {
-          grouped.push(items.slice(i, i + groupSize))
-        }
+  filters: {
+    displayName (name) {
+      return name.replace('Spinner', '').match(/[A-Z][a-z]+/g).join(' ')
+    }
+  },
+  methods: {
+    groupItems (items, groupSize) {
+      let grouped = []
 
-        return grouped
+      for (let i = 0; i < items.length; i += groupSize) {
+        grouped.push(items.slice(i, i + groupSize))
       }
+
+      return grouped
     }
   }
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+
+.spinners {
+  &__customization {
+
+  }
+
+  &__widget {
+
+  }
+
+  &__color-picker {
+
+  }
+
+  @include media-breakpoint-down(xs) {
+    &__duration-picker {
+      margin-top: 30px;
+    }
+
+    & &__icon-small {
+      margin-left: 0;
+    }
+
+    &__duration {
+      margin: 0;
+      justify-content: center;
+    }
+
+    &__size {
+      justify-content: center;
+    }
+
+    & &__icon-duration-faster {
+      margin-top: 33px;
+    }
+
+    & &__icon-duration-slower {
+      margin-top: 33px;
+    }
+
+    &__color {
+      justify-content: center;
+      margin-left: 12px;
+    }
+
+    &__color-picker {
+      margin-top: 50px;
+      padding-left: 15px;
+      .vuestic-dropdown__content {
+        right: 40px;
+      }
+    }
+  }
+
+  &__size-picker {
+    padding-top: 10px;
+    object-fit: contain;
+    width: 136px;
+  }
+
+  &__duration-picker {
+    width: 136px;
+    padding-top: 10px;
+  }
+
+  &__divider-copy {
+    width: 1700px;
+    height: 2px;
+    background-color: #eeeeee;
+  }
+
+  &__icon-small {
+    margin-top: 7px;
+    margin-left: 30px;
+  }
+
+  &__icon-duration-faster {
+    margin-top: 5px;
+  }
+
+  &__icon-duration-slower {
+    margin-top: 5px;
+  }
+
   .spinner-box-container {
     text-align: center;
     padding-bottom: 40px;
@@ -86,4 +225,5 @@
     justify-content: center;
     align-items: center;
   }
+}
 </style>
diff --git a/src/sass/_icons.scss b/src/sass/_icons.scss
@@ -74,3 +74,15 @@
   height: 47.8px;
   background: url('assets/icons/vuestic-vue.svg') no-repeat center center;
 }
+
+.i-vuestic-slower {
+  width: 24px;
+  height: 24px;
+  background: url('assets/icons/icon-slower.svg') no-repeat center center;
+}
+
+.i-vuestic-faster {
+  width: 24px;
+  height: 24px;
+  background: url('assets/icons/icon-faster.svg') no-repeat center center;
+}
diff --git a/src/vuestic-theme/vuestic-components/vuestic-slider/VuesticSlider.vue b/src/vuestic-theme/vuestic-components/vuestic-slider/VuesticSlider.vue
@@ -6,6 +6,7 @@
     :bg-style="sliderOptions.bgStyle"
     :slider-style="sliderOptions.sliderStyle"
     class="vuestic-slider"
+    :reverse="reverse"
   >
   </slider>
 </template>
@@ -29,6 +30,11 @@
 
       options: {
         type: Object
+      },
+
+      reverse: {
+        type: Boolean,
+        default: false
       }
     },