Merge remote-tracking branch 'origin/icons'

# Conflicts:
#	src/store/getters.js

src/components/ui/icons/Icons.vue

@@ -1,40 +1,49 @@
 <template>
-  <div class="ui-icons row">
-    <widget headerText="Icons" class="col-12">
-      <div class="row">
-        <small-set v-for="name in namesOfSetsOfIcons" :nameOfSet="name" class="col-lg-6"></small-set>
-      </div>
-    </widget>
+  <div class="ui-icons">
+    <router-view :sets="sets"></router-view>
   </div>
 </template>
 
 <script>
-  import Widget from 'components/common/widget/Widget'
-  import SmallSet from './SmallSet'
-  import FullSet from './FullSet'
-  import {mapGetters, mapMutations} from 'vuex'
+  import FullSet from './Set'
 
   export default {
     name: 'icons',
     components: {
-      FullSet,
-      Widget,
-      SmallSet
+      FullSet
     },
     computed: {
-      ...mapGetters([
-        'namesOfSetsOfIcons'
-      ]),
-      ...mapMutations([
-        'downloadSetsOfIcons'
-      ])
+      sets () {
+        let sets = []
+        require(this.setsPath + 'names.json').forEach(name => {
+          let set = require(this.setsPath + name + '.json')
+          this.addfilteredListsTo(set)
+          sets.push(set)
+        })
+        return sets
+      }
+    },
+    methods: {
+      addfilteredListsTo (set) {
+        let list = set.lists[0].icons
+        let filteredLists = []
+        filteredLists.push(list.slice(0, 6))
+        filteredLists.push(list.slice(6, 12))
+        filteredLists.push(list.slice(12, 18))
+        set.filteredLists = filteredLists
+      }
+    },
+    data () {
+      return {
+        setsPath: './sets/'
+      }
     }
   }
 </script>
 
 <style lang="scss">
   .ui-icons {
-    @import "icons-styles";
+    @import "../../../sass/icons-styles";
     .widget-body {
       padding: 1.9375rem 2.6875rem 1.9375rem 2.125rem;
     }

src/components/ui/icons/FullSet.vue → src/components/ui/icons/Set.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="setOfIcons row">
+  <div class="Set row">
     <div class="header col-12">
       <div class="row">
         <div class="header-text col-lg-4">
           <h2>{{set.name}}</h2>
-          <router-link :to="{name: 'Icons'}">Back to icons</router-link>
+          <router-link :to="{path: '/ui/icons'}">Back to icons</router-link>
         </div>
 
         <div class="search col-lg-4">
@@ -43,27 +43,25 @@
 
 <script>
   import Widget from '../../common/widget/Widget'
-  import {mapGetters} from 'vuex'
   import Slider from 'vue-slider-component'
 
   export default {
     components: {
       Widget,
       Slider
     },
-    name: 'full-set',
-    props: ['nameOfSet'],
+    name: 'set',
+    props: ['name', 'sets'],
     methods: {
       iconClass (icon) {
         return this.set.prefix + ' ' + this.set.prefix + '-' + icon
       }
     },
     computed: {
-      ...mapGetters([
-        'setOfIconsByName'
-      ]),
       set () {
-        return this.setOfIconsByName(this.nameOfSet)
+        for (let set of this.sets) {
+          if (set.href === this.name) return set
+        }
       },
       validatedLists () {
         if (this.selector === '') {
@@ -83,11 +81,12 @@
     data: function () {
       return {
         selector: '',
-        iconSize: 20,
+        iconSize: 30,
         slider: {
+          formatter: v => `${v}px`,
           height: 2,
           direction: 'horizontal',
-          min: 0,
+          min: 20,
           max: 40,
           interval: 1,
           speed: 0.5
@@ -102,7 +101,7 @@
   @import '../../../../node_modules/bootstrap/scss/mixins/breakpoints';
   @import '../../../../node_modules/bootstrap/scss/variables';
 
-  .setOfIcons {
+  .Set{
     .header {
       background-color: white;
       padding: 1.75rem 0 1.125rem 0;

src/components/ui/icons/SetsList.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="sets-list row">
+    <widget headerText="Icons" class="col-12">
+      <div class="row">
+        <div class="small-set col-lg-6" v-for="set in sets">
+          <div class="set-content">
+            <div class="overlay"><router-link :to="{path: set.href}" append>
+              <div class="btn btn-primary btn">{{set.name.toUpperCase()}}</div></router-link>
+            </div>
+            <div>
+              <template v-for="filteredList in set.filteredLists">
+                <div class="row">
+                  <div class="col-sm-2" v-for="icon in filteredList">
+                    <div class="icon">
+                      <i :class="iconClass(set, icon)" aria-hidden="true"></i>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </widget>
+  </div>
+</template>
+
+<script>
+  import Widget from 'components/common/widget/Widget'
+
+  export default {
+    name: 'iconsList',
+    components: {
+      Widget
+    },
+    props: ['sets'],
+    methods: {
+      iconClass (set, icon) {
+        return set.prefix + ' ' + set.prefix + '-' + icon
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "../../../sass/_variables.scss";
+
+  .sets-list {
+    .small-set {
+      .btn {
+        width: 13.75rem;
+        padding-left: 0;
+        padding-right: 0;
+        text-align: center;
+      }
+
+      margin: 0 0 1.5rem;
+      .set-content {
+        background-color: $light-gray;
+        > div {
+          padding: 1rem;
+          div[class^="col"] {
+            padding: 0;
+            margin: 1rem 0;
+            .icon {
+              font-size: .85rem;
+              text-align: center;
+            }
+          }
+        }
+
+        .overlay {
+          padding: 0;
+          margin: 0;
+          width: 90%;
+          height: 90%;
+          position: absolute;
+          /*visibility: hidden;*/
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 2;
+        }
+      }
+    }
+  }
+</style>

src/components/ui/icons/sets/names.json

@@ -0,0 +1,11 @@
+[
+  "brandico",
+  "entypo",
+  "font-awesome",
+  "fontelico",
+  "glyphicons",
+  "iconic-stroke",
+  "ionicons",
+  "maki",
+  "openweb"
+]

src/store/getters.js

@@ -2,16 +2,10 @@ const menuItems = state => state.menu.items
 const sidebarOpened = state => state.app.sidebar.opened
 const toggleWithoutAnimation = state => state.app.sidebar.withoutAnimation
 const config = state => state.app.config
-const namesOfSetsOfIcons = state => state.icons.namesOfSetsOfIcons
-const setsOfIcons = state => state.icons.setsOfIcons
-const isAuthorized = state => state.app.isAuthorized
 
 export {
   menuItems,
   toggleWithoutAnimation,
   sidebarOpened,
-  config,
-  namesOfSetsOfIcons,
-  setsOfIcons,
-  isAuthorized
+  config
 }

src/store/index.js

@@ -3,7 +3,6 @@ import Vuex from 'vuex'
 
 import menu from './modules/menu'
 import app from './modules/app'
-import icons from './modules/icons/'
 
 import * as getters from './getters'
 
@@ -14,8 +13,7 @@ const store = new Vuex.Store({
   getters,
   modules: {
     menu,
-    app,
-    icons
+    app
   },
   state: {},
   mutations: {}