feat/material-icons-support

EugenGedroyc · Jun 23, 2019 · 3531f2c · 3531f2c
1 parent 95c9458
commit 3531f2c
Show file tree

Hide file tree

Showing 42 changed files with 1,094 additions and 113 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title>Vuestic Admin</title>

diff --git a/src/components/admin/app-navbar/components/dropdowns/LanguageDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/LanguageDropdown.vue
@@ -2,15 +2,15 @@
   <va-dropdown
     class="language-dropdown"
   >
-    <va-icon slot="anchor" :icon="['flag-icon flag-icon-large', flagIconClass(currentLanguage())]"/>
+    <va-icon slot="anchor" :name="['flag-icon flag-icon-large', flagIconClass(currentLanguage())]"/>
     <div class="language-dropdown__content py-3 px-2">
       <div class="language-dropdown__item va-row align--center"
          v-for="(option, id) in options"
          :key="id"
          :class="{ active: option.code === currentLanguage() }"
          @click="setLanguage(option.code)"
       >
-        <va-icon :icon="['flag-icon flag-icon-small', flagIconClass(option.code)]"/>
+        <va-icon :name="['flag-icon flag-icon-small', flagIconClass(option.code)]"/>
         <span class="dropdown-item__text">
         {{ $t(`language.${option.name}`) }}
       </span>

diff --git a/src/components/admin/app-navbar/components/dropdowns/MessageDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/MessageDropdown.vue
@@ -3,7 +3,7 @@
     class="message-dropdown"
   >
     <va-icon
-      icon="i-nav-messages"
+      name="i-nav-messages"
       slot="anchor"
       class="message-dropdown__icon"
       :class="{'message-dropdown__icon--unread': !allRead}"

diff --git a/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue
@@ -4,7 +4,7 @@
     >
       <va-icon
         slot="anchor"
-        icon="i-nav-notification"
+        name="i-nav-notification"
         class="notification-dropdown__icon"
         :class="{'notification-dropdown__icon--unread': !allRead}"
       />

diff --git a/src/components/admin/app-navbar/components/dropdowns/SettingsDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/SettingsDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <va-dropdown class="settings-dropdown">
     <va-icon
-      icon="vuestic-iconset vuestic-iconset-settings"
+      name="vuestic-iconset vuestic-iconset-settings"
       color="white"
       style="font-size: 1.4rem; display: flex;"
       class="settings-dropdown__icon"

diff --git a/src/components/admin/app-sidebar/AppSidebar.vue b/src/components/admin/app-sidebar/AppSidebar.vue
@@ -4,13 +4,13 @@
       <sidebar-link
         :to="{ name: 'dashboard' }">
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-dashboard"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-dashboard"/>
           <span>{{ $t('menu.dashboard') }}</span>
         </span>
       </sidebar-link>
       <sidebar-link-group>
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-statistics"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-statistics"/>
           <span>{{ $t('menu.statistics') }}</span>
         </span>
         <sidebar-link
@@ -28,7 +28,7 @@
       </sidebar-link-group>
       <sidebar-link-group>
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-forms"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-forms"/>
           <span>{{ $t('menu.forms') }}</span>
         </span>
         <sidebar-link
@@ -53,13 +53,13 @@
       <sidebar-link
         :to="{ name: 'tables' }">
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-tables"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-tables"/>
           <span>{{ $t('menu.tables') }}</span>
         </span>
       </sidebar-link>
       <sidebar-link-group>
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-ui-elements"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-ui-elements"/>
           <span>{{ $t('menu.uiElements') }}</span>
         </span>
         <sidebar-link
@@ -193,7 +193,7 @@
       </sidebar-link-group>
       <sidebar-link-group>
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-auth"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-auth"/>
           <span>{{ $t('menu.auth') }}</span>
         </span>
         <sidebar-link
@@ -214,7 +214,7 @@
       </sidebar-link-group>
       <sidebar-link-group>
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-maps"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-maps"/>
           <span>{{ $t('menu.maps') }}</span>
         </span>
         <sidebar-link
@@ -250,7 +250,7 @@
       </sidebar-link-group>
       <sidebar-link-group>
         <span slot="title">
-          <va-icon icon="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-files"/>
+          <va-icon name="sidebar-menu-item-icon vuestic-iconset vuestic-iconset-files"/>
           <span>{{ $t('menu.pages') }}</span>
         </span>
         <sidebar-link

diff --git a/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue b/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue
@@ -6,7 +6,7 @@
        class="sidebar-link__router-link"
        :class="classObject">
       <slot name="title"></slot>
-      <va-icon icon="expand-icon fa fa-angle-down"/>
+      <va-icon name="expand-icon fa fa-angle-down"/>
     </a>
     <expanding>
       <ul class="sidebar-submenu in" v-show="this.expanded"

diff --git a/src/components/dashboard/DashboardInfoWidgets.vue b/src/components/dashboard/DashboardInfoWidgets.vue
diff --git a/src/components/forms/form-wizard/FormWizard.vue b/src/components/forms/form-wizard/FormWizard.vue
@@ -26,11 +26,11 @@
                     v-model="hsName"
                     v-validate="'required'"
                     required title=""/>
-                  <va-icon icon="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
-                  <va-icon icon="fa fa-check valid-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-check valid-icon icon-right input-icon"/>
                   <label class="control-label">{{'forms.wizard.name' |
                     translate}}</label>
-                  <va-icon icon="bar"/>
+                  <va-icon name="bar"/>
                   <small v-show="errors.has('hsName')" class="help text-danger">
                     {{ errors.first('hsName') }}
                   </small>
@@ -110,11 +110,11 @@
                     v-model="hrName"
                     v-validate="'required'"
                     required title=""/>
-                  <va-icon icon="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
-                  <va-icon icon="fa fa-check valid-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-check valid-icon icon-right input-icon"/>
                   <label class="control-label">{{'forms.wizard.name' |
                     translate}}</label>
-                  <va-icon icon="bar"/>
+                  <va-icon name="bar"/>
                   <small v-show="errors.has('hrName')" class="help text-danger">
                     {{ errors.first('hrName') }}
                   </small>
@@ -194,11 +194,11 @@
                     v-model="vrName"
                     v-validate="'required'"
                     required title=""/>
-                  <va-icon icon="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
-                  <va-icon icon="fa fa-check valid-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-check valid-icon icon-right input-icon"/>
                   <label class="control-label">{{'forms.wizard.name' |
                     translate}}</label>
-                  <va-icon icon="bar"/>
+                  <va-icon name="bar"/>
                   <small v-show="errors.has('vrName')" class="help text-danger">
                     {{ errors.first('vrName') }}
                   </small>
@@ -279,11 +279,11 @@
                     v-model="vsName"
                     v-validate="'required'"
                     required title=""/>
-                  <va-icon icon="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
-                  <va-icon icon="fa fa-check valid-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-check valid-icon icon-right input-icon"/>
                   <label class="control-label">{{'forms.wizard.name' |
                     translate}}</label>
-                  <va-icon icon="bar"/>
+                  <va-icon name="bar"/>
                   <small v-show="errors.has('vsName')" class="help text-danger">
                     {{ errors.first('vsName') }}
                   </small>

diff --git a/src/components/tables/Tables.vue b/src/components/tables/Tables.vue
@@ -127,7 +127,7 @@
                 <td>Manchester</td>
                 <td align="right">57</td>
                 <td align="middle">
-                  <va-icon icon="fa fa-exclamation-triangle icon-right input-icon error-icon"/>
+                  <va-icon name="fa fa-exclamation-triangle icon-right input-icon error-icon"/>
                 </td>
               </tr>
               <tr class="table-success">
@@ -139,7 +139,7 @@
                 <td>Wien</td>
                 <td align="right">113</td>
                 <td align="middle" class="valid">
-                  <va-icon icon="fa fa-check success-icon icon-right input-icon"/>
+                  <va-icon name="fa fa-check success-icon icon-right input-icon"/>
                 </td>
               </tr>
               <tr class="table-warning">

diff --git a/src/components/ui/cards/Cards.vue b/src/components/ui/cards/Cards.vue
@@ -26,7 +26,7 @@
         <div class="flex xs12 sm6" :key="loop">
           <va-card>
             <template slot="header">
-              <va-icon icon="fa fa-cogs mr-3" color="success"/>
+              <va-icon name="fa fa-cogs mr-3" color="success"/>
               <h5 class="mt-0 mb-0">{{ $t('cards.title.customHeader') }}</h5>
             </template>
             {{ $t('cards.contentTextLong') }}

diff --git a/src/components/ui/chat/SetupProfileTab.vue b/src/components/ui/chat/SetupProfileTab.vue
@@ -21,10 +21,10 @@
               v-model="name"
               v-validate="'required'"
               required="required"/>
-            <va-icon icon="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
-            <va-icon icon="fa fa-check valid-icon icon-right input-icon"/>
+            <va-icon name="fa fa-exclamation-triangle error-icon icon-right input-icon"/>
+            <va-icon name="fa fa-check valid-icon icon-right input-icon"/>
             <label class="control-label">Name</label>
-            <va-icon icon="bar"/>
+            <va-icon name="bar"/>
             <small v-show="errors.has('name')" class="help text-danger">{{
               errors.first('name') }}
             </small>

diff --git a/src/components/ui/icons/IconSet.vue b/src/components/ui/icons/IconSet.vue
@@ -18,11 +18,11 @@
                 name="input-icon-left"
                 required
               />
-              <va-icon icon="fa fa-search icon-left input-icon"/>
+              <va-icon name="fa fa-search icon-left input-icon"/>
               <label class="control-label" for="input-icon-left">
                 {{ $t('icons.search') }}
               </label>
-              <va-icon icon="bar"/>
+              <va-icon name="bar"/>
             </div>
           </div>
         </div>
@@ -59,7 +59,7 @@
           :key="icon"
         >
           <div class="vuestic-icon mb-3 pt-3">
-            <va-icon :icon="iconClass(icon)" :size="iconSize"/>
+            <va-icon :name="iconClass(icon)" :size="iconSize">{{iconData(icon)}}</va-icon>
           </div>
           <div class="icon-text">
             {{ icon }}
@@ -128,7 +128,10 @@ export default {
   },
   methods: {
     iconClass (icon) {
-      return `${this.set.prefix} ${this.set.prefix}-${icon}`
+      return this.set.prefix === 'material-icons' ? this.set.prefix : `${this.set.prefix} ${this.set.prefix}-${icon}`
+    },
+    iconData (icon) {
+      return this.set.prefix === 'material-icons' ? icon : ''
     },
   },
 }

diff --git a/src/components/ui/icons/Icons.vue b/src/components/ui/icons/Icons.vue
@@ -16,6 +16,7 @@ const iconTypes = [
   'ionicons',
   'maki',
   'openweb',
+  'material-icons',
 ]
 
 export default {

diff --git a/src/components/ui/icons/SetsList.vue b/src/components/ui/icons/SetsList.vue
@@ -25,7 +25,7 @@
                 :key="index"
               >
                 <div class="sets-list__icon pa-3 flex-center vuestic-icon">
-                  <va-icon :icon="iconClass(set, icon)"/>
+                  <va-icon :name="iconClass(set, icon)">{{iconData(set, icon)}}</va-icon>
                 </div>
               </div>
             </div>
@@ -36,13 +36,13 @@
             >
               <div class="flex xs2 flex-center">
                 <div class="sets-list__icon pa-3 flex-center vuestic-icon">
-                  <va-icon :icon="iconClass(set, filteredList[0])"/>
+                  <va-icon :name="iconClass(set, filteredList[0])">{{iconData(set, filteredList[0])}}</va-icon>
                 </div>
               </div>
               <div class="flex xs8"/>
               <div class="flex xs2 flex-center">
                 <div class="sets-list__icon pa-3 flex-center vuestic-icon">
-                  <va-icon :icon="iconClass(set, filteredList[1])"/>
+                  <va-icon :name="iconClass(set, filteredList[1])">{{iconData(set, filteredList[1])}}</va-icon>
                 </div>
               </div>
             </div>
@@ -59,7 +59,10 @@ export default {
   props: ['sets'],
   methods: {
     iconClass (set, icon) {
-      return set.prefix + ' ' + set.prefix + '-' + icon
+      return set.prefix === 'material-icons' ? set.prefix : set.prefix + ' ' + set.prefix + '-' + icon
+    },
+    iconData (set, icon) {
+      return set.prefix === 'material-icons' ? icon : ''
     },
   },
 }