From 2218d82ee1844aac579a3a06d200b3a721b1219d Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Tue, 28 Jul 2020 13:47:36 +0200
Subject: [PATCH] switch to bootstrap icons

---
 package.json                           |  3 --
 src/app/Nav.vue                        | 12 +++----
 src/app/TopNav.vue                     |  4 +--
 src/library/TrackContextMenu.vue       |  2 +-
 src/library/TrackList.vue              |  6 ++--
 src/main.ts                            |  2 +-
 src/player/Player.vue                  |  6 ++--
 src/playlist/PlaylistNav.vue           |  6 ++--
 src/playlist/RandomSongs.vue           |  4 +--
 src/search/SearchResult.vue            |  2 +-
 src/shared/components/Icon.vue         | 46 +++++++++++++++++++++++---
 src/shared/components/ImgContainer.vue |  2 +-
 src/shared/components/OverflowMenu.vue |  2 +-
 src/shared/components/Tiles.vue        | 16 ++++-----
 src/style/main.scss                    |  3 --
 yarn.lock                              | 15 ---------
 16 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 808b2e3..3af3b70 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,11 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@mdi/font": "^4.5.95",
     "axios": "^0.19.0",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.15.0",
     "howler": "^2.2.0",
-    "material-design-icons-iconfont": "^5.0.1",
     "md5-es": "1.8.2",
-    "roboto-fontface": "*",
     "uuid": "^8.2.0",
     "vue": "^2.6.10",
     "vue-router": "^3.3.4",
diff --git a/src/app/Nav.vue b/src/app/Nav.vue
index d6cef94..ad19ec7 100644
--- a/src/app/Nav.vue
+++ b/src/app/Nav.vue
@@ -6,15 +6,15 @@
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'home'}">
-        <Icon>mdi-home</Icon> Home
+        <Icon icon="card-text" class="mr-2"/> Home
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'queue'}">
-        <Icon>mdi-view-list</Icon> Playing
+        <Icon icon="music-note-list" class="mr-2"/> Playing
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'starred'}">
-        <Icon>mdi-star</Icon> Starred
+        <Icon icon="star-fill" class="mr-2"/> Starred
       </router-link>
       
       <a class="nav-link disabled">
@@ -24,15 +24,15 @@
       </a>
 
       <router-link class="nav-link" :to="{name: 'albums'}">
-        <Icon>mdi-album</Icon> Albums
+        <Icon icon="collection-fill" class="mr-2"/> Albums
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'artists'}">
-        <Icon>mdi-artist</Icon> Artists
+        <Icon icon="collection-fill" class="mr-2"/> Artists
       </router-link>
 
       <router-link class="nav-item nav-link" :to="{name: 'genres'}">
-        <Icon>mdi-library-music</Icon> Genres
+        <Icon icon="collection-fill" class="mr-2"/> Genres
       </router-link>
 
       <PlaylistNav/>
diff --git a/src/app/TopNav.vue b/src/app/TopNav.vue
index 071d491..c7ae8dc 100644
--- a/src/app/TopNav.vue
+++ b/src/app/TopNav.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex align-items-center mb-2">
     <button class="navbar-toggler text-white d-md-none" @click="toggleMenu">
-      <Icon>mdi-menu</Icon>
+      <Icon icon="list"/>
     </button>
 
     <div class="ml-auto"></div>
@@ -11,7 +11,7 @@
     <template v-if="username">
       <b-dropdown variant="link" right :text="username">
         <b-dropdown-item-button @click="logout">
-          <Icon>mdi-logout</Icon> Logout
+          <Icon icon="box-arrow-right"/> Logout
         </b-dropdown-item-button>
       </b-dropdown>
     </template>
diff --git a/src/library/TrackContextMenu.vue b/src/library/TrackContextMenu.vue
index 7068c4f..e0c46e4 100644
--- a/src/library/TrackContextMenu.vue
+++ b/src/library/TrackContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
     <template #button-content>
-      <Icon>mdi-dots-vertical</Icon>
+      <Icon icon="three-dots-vertical"/>
     </template>
     <b-dropdown-item-button @click="toggleStarred()">
       {{ starred ? 'Unstar' : 'Star' }}
diff --git a/src/library/TrackList.vue b/src/library/TrackList.vue
index c22b977..7b3a42d 100644
--- a/src/library/TrackList.vue
+++ b/src/library/TrackList.vue
@@ -18,16 +18,16 @@
         <td class="pl-0 pr-0 text-center text-muted" style="min-width: 20px; max-width: 20px;">
           <span class="track-status">
             <template v-if="item.id === playingTrackId">
-              <Icon>{{ isPlaying ? 'mdi-volume-high' : 'mdi-play' }}</Icon>
+              <Icon :icon="isPlaying ? 'volume-up-fill' : 'play-fill'"/>
             </template>
             <template v-else>{{ item.track || 1 }}</template>
           </span>
           <span class="track-status-hover">
             <span v-if="item.id === playingTrackId" @click="playPause()">
-              <Icon>{{ isPlaying ? 'mdi-pause' : 'mdi-play' }}</Icon>
+              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
             </span>
             <span v-else @click="play(index)">
-              <Icon>mdi-play</Icon>
+              <Icon icon="play-fill"/>
             </span>
           </span>
         </td>
diff --git a/src/main.ts b/src/main.ts
index 1eaf85c..2d0b7d4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from "vue-router"
 import Vuex from "vuex"
-import BootstrapVue from 'bootstrap-vue'
+import { BootstrapVue } from 'bootstrap-vue'
 import '@/style/main.scss'
 import '@/shared/components'
 import '@/shared/filters'
diff --git a/src/player/Player.vue b/src/player/Player.vue
index 1db110e..49b3538 100644
--- a/src/player/Player.vue
+++ b/src/player/Player.vue
@@ -25,14 +25,14 @@
         <div class="col-auto p-0">
           <b-button variant="link" class="m-2"
               :disabled="!hasPrevious" @click="playPrevious">
-            <Icon>mdi-skip-previous</Icon>
+            <Icon icon="skip-start-fill"/>
           </b-button>
           <b-button variant="link" size="lg" class="m-2" @click="playPause">
-            <Icon>{{ isPlaying ? 'mdi-pause' : 'mdi-play' }}</Icon>
+            <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
           </b-button>
           <b-button variant="link" class="m-2"
               :disabled="!hasNext" @click="playNext">
-            <Icon>mdi-skip-next</Icon>
+            <Icon icon="skip-end-fill"/>
           </b-button>
         </div>
         <div class="col p-0 text-truncate">
diff --git a/src/playlist/PlaylistNav.vue b/src/playlist/PlaylistNav.vue
index 907a845..c5b7b02 100644
--- a/src/playlist/PlaylistNav.vue
+++ b/src/playlist/PlaylistNav.vue
@@ -4,20 +4,20 @@
       <small class="text-uppercase text-muted font-weight-bold">
         Playlists
          <button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
-           <Icon>mdi-plus</Icon>
+           <Icon icon="plus"/>
          </button>
       </small>
     </span>
 
     <router-link class="nav-item nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
-      <Icon>mdi-view-list</Icon> Random
+      <Icon icon="music-note-list" class="mr-2"/> Random
     </router-link>
 
     <router-link v-for="item in playlists" :key="item.id"
                   :to="{name: 'playlist', params: { id: item.id }}"
                   class="nav-item nav-link">
       <span @dragover="onDragover" @drop="onDrop(item.id, $event)">
-        <Icon>mdi-playlist-music</Icon> {{ item.name }}
+        <Icon icon="music-note-list" class="mr-2"/> {{ item.name }}
       </span>
     </router-link>
 
diff --git a/src/playlist/RandomSongs.vue b/src/playlist/RandomSongs.vue
index 574dee5..73be97c 100644
--- a/src/playlist/RandomSongs.vue
+++ b/src/playlist/RandomSongs.vue
@@ -7,8 +7,8 @@
       <tbody>
         <tr v-for="item in items" :key="item.id">
           <td>
-             <Icon @click="() => {}">mdi-play-outline</Icon>
-        <Icon @click="() => {}">mdi-plus</Icon>
+            <Icon icon="play-fill" @click="() => {}"/>
+            <Icon icon="plus" @click="() => {}"/>
           </td>
           <td>{{ item.artist }}</td>
           <td>{{ item.album }}</td>
diff --git a/src/search/SearchResult.vue b/src/search/SearchResult.vue
index 18d2c7b..46ad677 100644
--- a/src/search/SearchResult.vue
+++ b/src/search/SearchResult.vue
@@ -56,7 +56,7 @@
         <tr v-for="(item, index) in result.tracks">
           <td>
             <span  @click="play(index)">
-              <Icon>mdi-play</Icon>
+              <Icon icon="play-fill"/>
             </span>
           </td>
           <td>{{ item.title }}</td>
diff --git a/src/shared/components/Icon.vue b/src/shared/components/Icon.vue
index 9da07e5..f5fb873 100644
--- a/src/shared/components/Icon.vue
+++ b/src/shared/components/Icon.vue
@@ -1,8 +1,46 @@
 <template>
-  <span :class="`mdi ${$slots.default[0].text}`"></span>
+  <BIcon :icon="icon"/>
 </template>
 <script lang="ts">
-  import Vue from "vue";
+  import Vue from 'vue'
+  import {
+    BIcon,
+    BIconCardText,
+    BIconMusicNoteList,
+    BIconStarFill,
+    BIconCollectionFill,
+    BIconList,
+    BIconVolumeUpFill,
+    BIconPlayFill,
+    BIconPauseFill,
+    BIconSkipStartFill,
+    BIconSkipEndFill,
+    BIconPlus,
+    BIconThreeDotsVertical,
+    BIconMusicNoteBeamed,
+    BIconBoxArrowRight,
+  } from 'bootstrap-vue'
 
-  export default Vue.extend({});
-</script>
\ No newline at end of file
+  export default Vue.extend({
+    components: {
+      BIcon,
+      BIconCardText,
+      BIconMusicNoteList,
+      BIconStarFill,
+      BIconCollectionFill,
+      BIconList,
+      BIconVolumeUpFill,
+      BIconPlayFill,
+      BIconPauseFill,
+      BIconSkipStartFill,
+      BIconSkipEndFill,
+      BIconPlus,
+      BIconThreeDotsVertical,
+      BIconMusicNoteBeamed,
+      BIconBoxArrowRight,
+    },
+    props: {
+      icon: { type: String }
+    },
+  })
+</script>
diff --git a/src/shared/components/ImgContainer.vue b/src/shared/components/ImgContainer.vue
index 2881abf..7a65e52 100644
--- a/src/shared/components/ImgContainer.vue
+++ b/src/shared/components/ImgContainer.vue
@@ -3,7 +3,7 @@
     <div class="fixed-img-inner">
       <img v-if="props.src" :src="props.src">
       <div v-else class="text-muted">
-      <Icon>mdi-music</Icon>
+      <Icon icon="music-note-beamed"/>
       </div>
     </div>
   </div>
diff --git a/src/shared/components/OverflowMenu.vue b/src/shared/components/OverflowMenu.vue
index 9a046ec..4438e1b 100644
--- a/src/shared/components/OverflowMenu.vue
+++ b/src/shared/components/OverflowMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
     <template #button-content>
-      <Icon>mdi-dots-vertical</Icon>
+      <Icon icon="three-dots-vertical"/>
     </template>
     <slot/>
   </b-dropdown>
diff --git a/src/shared/components/Tiles.vue b/src/shared/components/Tiles.vue
index b7bdafd..7f8f079 100644
--- a/src/shared/components/Tiles.vue
+++ b/src/shared/components/Tiles.vue
@@ -5,9 +5,7 @@
         <div class="tile-img bg-secondary">
           <div class="tile-img-inner">
             <img v-if="item.image" :src="item.image">
-            <div v-else class="fallback-img text-muted">
-              <Icon>mdi-music</Icon>
-            </div>
+            <Icon v-else class="fallback-img text-muted" icon="music-note-beamed"/>
           </div>
         </div>
         <div class="card-body">
@@ -56,13 +54,11 @@
       }
 
       .fallback-img {
-        *{
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          font-size: 4.5rem;
-        }
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 4.5rem;
       }
     }
   }
diff --git a/src/style/main.scss b/src/style/main.scss
index 98fa37c..6b1b114 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,6 +1,3 @@
-@import '~roboto-fontface/css/roboto/roboto-fontface.css';
-@import '~@mdi/font/css/materialdesignicons.css';
-
 $enable-rounded: false;
 $enable-print-styles: false;
 .breadcrumb {
diff --git a/yarn.lock b/yarn.lock
index a03aac2..ddd167c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1011,11 +1011,6 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
-"@mdi/font@^4.5.95":
-  version "4.9.95"
-  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-4.9.95.tgz#00ed2ffe289c9230f146e74559c07542d3f4475a"
-  integrity sha512-m2sbAs+SMwRnWpkMriBxEulwuhmqRyh6X+hdOZlqSxYZUM2C2TaDnQ4gcilzdoAgru2XYnWViZ/xPuSDGgRXVw==
-
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -5076,11 +5071,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-material-design-icons-iconfont@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-5.0.1.tgz#371875ed7fe9c8c520bc7123c3231feeab731c31"
-  integrity sha512-Xg6rIdGrfySTqiTZ6d+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA==
-
 md5-es@1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/md5-es/-/md5-es-1.8.2.tgz#4c3d07b3f8e70669afd00ba3ac8b4b619741b506"
@@ -6799,11 +6789,6 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-roboto-fontface@*:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/roboto-fontface/-/roboto-fontface-0.10.0.tgz#7eee40cfa18b1f7e4e605eaf1a2740afb6fd71b0"
-  integrity sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==
-
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"