From 3d116560f89147c2af6dbcaf0e607abe3528342d Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 20:51:28 +0430
Subject: [PATCH] Fixed lato font import issue and added Setting and version
 icon

---
 package-lock.json                        | 11 ++++++-----
 package.json                             | 20 ++++++++++----------
 src/renderer/App.vue                     |  9 +++++++--
 src/renderer/layouts/DockableSidebar.vue | 17 +++++++++++++++++
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f87ef9..985c304 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9944,6 +9944,12 @@
         "package-json": "^6.3.0"
       }
     },
+    "lato-font": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lato-font/-/lato-font-3.0.0.tgz",
+      "integrity": "sha1-kbg34jdLZo+3Mx1EyJTTei2fjhE=",
+      "dev": true
+    },
     "lazy-cache": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
@@ -16212,11 +16218,6 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
-    "typeface-lato": {
-      "version": "0.0.75",
-      "resolved": "https://registry.npmjs.org/typeface-lato/-/typeface-lato-0.0.75.tgz",
-      "integrity": "sha512-iA5uJD4PSTyIE4BDiSOexQeXkDkiJuX4Hu3wh3saJ06EB2TvJayab1Lbbmqq2je/LQv7KCQZHZmC0k4hedd8sw=="
-    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
diff --git a/package.json b/package.json
index e179e63..9595e56 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
   "dependencies": {
     "axios": "^0.18.0",
     "normalize-scss": "^7.0.1",
-    "typeface-lato": "0.0.75",
     "vue": "^2.5.16",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
@@ -68,13 +67,16 @@
   "devDependencies": {
     "ajv": "^6.5.0",
     "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
+    "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.26.0",
     "babili-webpack-plugin": "^0.1.2",
     "cfonts": "^2.1.2",
+    "chai": "^4.1.2",
     "chalk": "^2.4.1",
     "copy-webpack-plugin": "^4.5.1",
     "cross-env": "^5.1.6",
@@ -82,20 +84,18 @@
     "del": "^3.0.0",
     "devtron": "^1.4.0",
     "electron": "^2.0.4",
+    "electron-builder": "^20.19.2",
     "electron-debug": "^1.5.0",
     "electron-devtools-installer": "^2.2.4",
-    "electron-builder": "^20.19.2",
-    "babel-eslint": "^8.2.3",
     "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-html": "^4.0.3",
-    "eslint-config-standard": "^11.0.0",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.8.0",
     "eslint-plugin-standard": "^3.1.0",
-    "mini-css-extract-plugin": "0.4.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "inject-loader": "^4.0.1",
@@ -107,23 +107,23 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
     "karma-webpack": "^3.0.0",
-    "require-dir": "^1.0.0",
-    "spectron": "^3.8.0",
-    "babel-plugin-istanbul": "^4.1.6",
-    "chai": "^4.1.2",
+    "lato-font": "^3.0.0",
+    "mini-css-extract-plugin": "0.4.0",
     "mocha": "^5.2.0",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
     "node-sass": "^4.9.2",
+    "require-dir": "^1.0.0",
     "sass-loader": "^7.0.3",
+    "spectron": "^3.8.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^15.2.4",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.5.16",
-    "webpack-cli": "^3.0.8",
     "webpack": "^4.15.1",
+    "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4",
     "webpack-hot-middleware": "^2.22.2",
     "webpack-merge": "^4.1.3"
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index b1fe1e6..3af44ab 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -11,7 +11,7 @@
 <script>
 import DockableSidebar from './layouts/DockableSidebar'
 import PlayerBar from './layouts/PlayerBar'
-import 'typeface-lato'
+
 export default {
   name: 'jukebox',
   components: { DockableSidebar, PlayerBar }
@@ -20,11 +20,16 @@ export default {
 
 <style lang="sass">
 @import 'normalize-scss'
+@import 'lato-font/scss/_public-api.scss'
 @include normalize()
+ 
+$lato-font-path: '/node_modules/lato-font/fonts'
+ 
+@include lato-include-font('normal')
 
 .root,.page-wrapper
   display: flex
-  font-family: 'Lato', sans-serif
+  @include lato-font('normal')
   max-height: 100vh
 
 .page-wrapper
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 35fc929..9ae2cca 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -60,9 +60,21 @@
         </MenuGroup >
         <MenuGroup>
             <MenuItem to="/" :faded="true">
+                <template v-slot:icon>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                        <g transform="translate(0)">
+                            <path class="cls-1" d="M9.647,16H6.357a.4.4,0,0,1-.4-.337l-.312-2.12a6.1,6.1,0,0,1-1.39-.784l-2.048.8a.428.428,0,0,1-.143.024.407.407,0,0,1-.358-.2L.057,10.616a.4.4,0,0,1,.1-.512l1.735-1.32A6.338,6.338,0,0,1,1.833,8a6.38,6.38,0,0,1,.058-.784L.156,5.9a.386.386,0,0,1-.1-.512L1.7,2.616a.4.4,0,0,1,.352-.2A.418.418,0,0,1,2.2,2.44l2.048.8a6.3,6.3,0,0,1,1.39-.784L5.953.336A.4.4,0,0,1,6.357,0h3.29a.4.4,0,0,1,.4.336l.313,2.12a6.068,6.068,0,0,1,1.39.784l2.048-.8a.428.428,0,0,1,.143-.024.408.408,0,0,1,.359.2l1.644,2.767a.4.4,0,0,1-.1.512l-1.735,1.32A6.22,6.22,0,0,1,14.171,8a6.179,6.179,0,0,1-.058.784l1.735,1.32a.4.4,0,0,1,.1.512L14.3,13.384a.4.4,0,0,1-.352.2.422.422,0,0,1-.15-.028l-2.047-.8a6.336,6.336,0,0,1-1.39.784l-.313,2.12A.4.4,0,0,1,9.647,16ZM8,5.2A2.843,2.843,0,0,0,5.124,8,2.879,2.879,0,0,0,10.88,8,2.843,2.843,0,0,0,8,5.2Z"/>
+                        </g>
+                    </svg>
+                </template>
                 Settings
             </MenuItem>
             <MenuItem to="/" :faded="true">
+                <template v-slot:icon>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                        <path d="M8,16a8,8,0,1,1,8-8A8.011,8.011,0,0,1,8,16Zm-.075-5.159a.924.924,0,0,0-.67.266.885.885,0,0,0-.274.657.862.862,0,0,0,.283.686.979.979,0,0,0,.661.245.947.947,0,0,0,.645-.248.869.869,0,0,0,.279-.682.91.91,0,0,0-.924-.923Zm.148-6.228a1.354,1.354,0,0,1,.952.341,1.1,1.1,0,0,1,.369.837.942.942,0,0,1-.121.472,1.8,1.8,0,0,1-.3.394c-.119.119-.312.3-.573.524a9.768,9.768,0,0,0-.72.686,2.251,2.251,0,0,0-.427.67,2.312,2.312,0,0,0-.162.9.832.832,0,0,0,.22.626.758.758,0,0,0,.543.211A.692.692,0,0,0,8.6,9.631c.045-.2.08-.343.1-.425a1.261,1.261,0,0,1,.1-.242A1.4,1.4,0,0,1,8.983,8.7a4.338,4.338,0,0,1,.338-.338c.518-.462.864-.779,1.058-.97a2.869,2.869,0,0,0,.509-.686A1.91,1.91,0,0,0,11.1,5.78a2.22,2.22,0,0,0-.375-1.24,2.579,2.579,0,0,0-1.064-.9A3.629,3.629,0,0,0,8.074,3.3a3.486,3.486,0,0,0-1.693.4,2.932,2.932,0,0,0-1.105,1A2.255,2.255,0,0,0,4.9,5.9a.753.753,0,0,0,.239.53.792.792,0,0,0,.587.245c.39,0,.66-.236.8-.7a2.756,2.756,0,0,1,.545-1.013A1.324,1.324,0,0,1,8.074,4.613Z"/>
+                    </svg>
+                </template>
                 Version 0.0.1
             </MenuItem>
         </MenuGroup>
@@ -89,6 +101,11 @@ section
     display: flex
     flex-direction: column
     overflow: auto 
+    .icon
+        width: 18px
+        height: auto
+        path
+            fill: lighten(gray,20)
     .grow
         flex-grow: 1
 </style>