Switch to material icons for tabs

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7307,6 +7307,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -27,7 +27,8 @@
     "custom-electron-titlebar": "^3.0.8",
     "electron-context-menu": "^0.11.0",
     "electron-store": "^3.2.0",
-    "electron-updater": "^4.0.6"
+    "electron-updater": "^4.0.6",
+    "material-design-icons": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",

src/assets/less/theme.less

@@ -207,6 +207,10 @@
 /*
  * Links
  */
+.uk-link {
+    color: @global-muted-color;
+}
+
 .uk-link:hover, a:hover {
     color: @global-primary-background;
 }

src/components/genericComponents/tabIcon.vue

@@ -1,9 +1,11 @@
 <template>
   <a 
     href="#" 
+    class="uk-link"
     :class="classObject" 
     :uk-tooltip="tooltipOptions"
     @click="setThisTab">
+    <slot></slot>
   </a>
 
 </template>

src/components/panelLeft.vue

@@ -3,12 +3,22 @@
 
     <!-- Vertical tab bar -->
     <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
-      <tabIcon id="connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
-      <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+        <i class="material-icons">settings_ethernet</i>
-      <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
+      </tabIcon>
-      <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">gamepad</i>  
+      </tabIcon>
+      <tabIcon id="capture" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">camera_alt</i>
+      </tabIcon>
+      <tabIcon id="settings" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">settings</i>  
+      </tabIcon>
 
-      <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon v-for="plugin in $store.state.apiPlugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">{{ plugin.icon || "extension" }}</i> 
+      </tabIcon>
 
     </div>
 
@@ -118,7 +128,7 @@ export default {
 }
 
 #switcher-left a{
-  padding: 12px 20px;
+  padding: 10px 16px;
 }
 
 #switcher-left{

src/main.js

@@ -7,6 +7,9 @@ import UIkit from 'uikit';
 import Icons from 'uikit/dist/js/uikit-icons';
 UIkit.use(Icons);
 
+// Import MD icons
+import 'material-design-icons/iconfont/material-icons.css'
+
 Vue.config.productionTip = false
 
 Vue.mixin({