From 09f9ad6f7d7d5feb160dc616a1e17f4679e09dc3 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 17 Jun 2019 11:41:45 +0100
Subject: [PATCH] Switch to material icons for tabs

---
 package-lock.json                            |  7 ++++++-
 package.json                                 |  3 ++-
 src/assets/less/theme.less                   |  4 ++++
 src/components/genericComponents/tabIcon.vue |  2 ++
 src/components/panelLeft.vue                 | 22 ++++++++++++++------
 src/main.js                                  |  3 +++
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3c5ef6a..1a06229d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 5f8bdedd..6890d8c4 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index b7d2f087..7892ae82 100644
--- a/src/assets/less/theme.less
+++ b/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;
 }
diff --git a/src/components/genericComponents/tabIcon.vue b/src/components/genericComponents/tabIcon.vue
index 40e28478..0c0bbc18 100644
--- a/src/components/genericComponents/tabIcon.vue
+++ b/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>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index c152e6e0..ebad5737 100644
--- a/src/components/panelLeft.vue
+++ b/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="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-      <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
-      <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+      <tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
+        <i class="material-icons">settings_ethernet</i>
+      </tabIcon>
+      <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{
diff --git a/src/main.js b/src/main.js
index 8d31ce2d..71ffe558 100644
--- a/src/main.js
+++ b/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({