jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

switch to bootstrap icons

Browse Source
This commit is contained in:
Thomas Amland 2020-07-28 13:47:36 +02:00
parent f276e4ef49
commit 2218d82ee1
16 changed files with 72 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -7,14 +7,11 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"@mdi/font": "^4.5.95",
"axios": "^0.19.0", "axios": "^0.19.0",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"bootstrap-vue": "^2.15.0", "bootstrap-vue": "^2.15.0",
"howler": "^2.2.0", "howler": "^2.2.0",
"material-design-icons-iconfont": "^5.0.1",
"md5-es": "1.8.2", "md5-es": "1.8.2",
"roboto-fontface": "*",
"uuid": "^8.2.0", "uuid": "^8.2.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.3.4", "vue-router": "^3.3.4",

12
src/app/Nav.vue
View File

@ -6,15 +6,15 @@
</router-link> </router-link>
<router-link class="nav-link" :to="{name: 'home'}"> <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>
<router-link class="nav-link" :to="{name: 'queue'}"> <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>
<router-link class="nav-link" :to="{name: 'starred'}"> <router-link class="nav-link" :to="{name: 'starred'}">
<Icon>mdi-star</Icon> Starred <Icon icon="star-fill" class="mr-2"/> Starred
</router-link> </router-link>
<a class="nav-link disabled"> <a class="nav-link disabled">
@ -24,15 +24,15 @@
</a> </a>
<router-link class="nav-link" :to="{name: 'albums'}"> <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>
<router-link class="nav-link" :to="{name: 'artists'}"> <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>
<router-link class="nav-item nav-link" :to="{name: 'genres'}"> <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> </router-link>
<PlaylistNav/> <PlaylistNav/>

4
src/app/TopNav.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<button class="navbar-toggler text-white d-md-none" @click="toggleMenu"> <button class="navbar-toggler text-white d-md-none" @click="toggleMenu">
<Icon>mdi-menu</Icon> <Icon icon="list"/>
</button> </button>
<div class="ml-auto"></div> <div class="ml-auto"></div>
@ -11,7 +11,7 @@
<template v-if="username"> <template v-if="username">
<b-dropdown variant="link" right :text="username"> <b-dropdown variant="link" right :text="username">
<b-dropdown-item-button @click="logout"> <b-dropdown-item-button @click="logout">
<Icon>mdi-logout</Icon> Logout <Icon icon="box-arrow-right"/> Logout
</b-dropdown-item-button> </b-dropdown-item-button>
</b-dropdown> </b-dropdown>
</template> </template>

2
src/library/TrackContextMenu.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0"> <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
<template #button-content> <template #button-content>
<Icon>mdi-dots-vertical</Icon> <Icon icon="three-dots-vertical"/>
</template> </template>
<b-dropdown-item-button @click="toggleStarred()"> <b-dropdown-item-button @click="toggleStarred()">
{{ starred ? 'Unstar' : 'Star' }} {{ starred ? 'Unstar' : 'Star' }}

6
src/library/TrackList.vue
View File

@ -18,16 +18,16 @@
<td class="pl-0 pr-0 text-center text-muted" style="min-width: 20px; max-width: 20px;"> <td class="pl-0 pr-0 text-center text-muted" style="min-width: 20px; max-width: 20px;">
<span class="track-status"> <span class="track-status">
<template v-if="item.id === playingTrackId"> <template v-if="item.id === playingTrackId">
<Icon>{{ isPlaying ? 'mdi-volume-high' : 'mdi-play' }}</Icon> <Icon :icon="isPlaying ? 'volume-up-fill' : 'play-fill'"/>
</template> </template>
<template v-else>{{ item.track || 1 }}</template> <template v-else>{{ item.track || 1 }}</template>
</span> </span>
<span class="track-status-hover"> <span class="track-status-hover">
<span v-if="item.id === playingTrackId" @click="playPause()"> <span v-if="item.id === playingTrackId" @click="playPause()">
<Icon>{{ isPlaying ? 'mdi-pause' : 'mdi-play' }}</Icon> <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
</span> </span>
<span v-else @click="play(index)"> <span v-else @click="play(index)">
<Icon>mdi-play</Icon> <Icon icon="play-fill"/>
</span> </span>
</span> </span>
</td> </td>

2
src/main.ts
View File

@ -1,7 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import Router from "vue-router" import Router from "vue-router"
import Vuex from "vuex" import Vuex from "vuex"
import BootstrapVue from 'bootstrap-vue' import { BootstrapVue } from 'bootstrap-vue'
import '@/style/main.scss' import '@/style/main.scss'
import '@/shared/components' import '@/shared/components'
import '@/shared/filters' import '@/shared/filters'

6
src/player/Player.vue
View File

@ -25,14 +25,14 @@
<div class="col-auto p-0"> <div class="col-auto p-0">
<b-button variant="link" class="m-2" <b-button variant="link" class="m-2"
:disabled="!hasPrevious" @click="playPrevious"> :disabled="!hasPrevious" @click="playPrevious">
<Icon>mdi-skip-previous</Icon> <Icon icon="skip-start-fill"/>
</b-button> </b-button>
<b-button variant="link" size="lg" class="m-2" @click="playPause"> <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>
<b-button variant="link" class="m-2" <b-button variant="link" class="m-2"
:disabled="!hasNext" @click="playNext"> :disabled="!hasNext" @click="playNext">
<Icon>mdi-skip-next</Icon> <Icon icon="skip-end-fill"/>
</b-button> </b-button>
</div> </div>
<div class="col p-0 text-truncate"> <div class="col p-0 text-truncate">

6
src/playlist/PlaylistNav.vue
View File

@ -4,20 +4,20 @@
<small class="text-uppercase text-muted font-weight-bold"> <small class="text-uppercase text-muted font-weight-bold">
Playlists Playlists
<button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true"> <button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
<Icon>mdi-plus</Icon> <Icon icon="plus"/>
</button> </button>
</small> </small>
</span> </span>
<router-link class="nav-item nav-link" :to="{name: 'playlist', params: { id: 'random' }}"> <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>
<router-link v-for="item in playlists" :key="item.id" <router-link v-for="item in playlists" :key="item.id"
:to="{name: 'playlist', params: { id: item.id }}" :to="{name: 'playlist', params: { id: item.id }}"
class="nav-item nav-link"> class="nav-item nav-link">
<span @dragover="onDragover" @drop="onDrop(item.id, $event)"> <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> </span>
</router-link> </router-link>

4
src/playlist/RandomSongs.vue
View File

@ -7,8 +7,8 @@
<tbody> <tbody>
<tr v-for="item in items" :key="item.id"> <tr v-for="item in items" :key="item.id">
<td> <td>
<Icon @click="() => {}">mdi-play-outline</Icon> <Icon icon="play-fill" @click="() => {}"/>
<Icon @click="() => {}">mdi-plus</Icon> <Icon icon="plus" @click="() => {}"/>
</td> </td>
<td>{{ item.artist }}</td> <td>{{ item.artist }}</td>
<td>{{ item.album }}</td> <td>{{ item.album }}</td>

2
src/search/SearchResult.vue
View File

@ -56,7 +56,7 @@
<tr v-for="(item, index) in result.tracks"> <tr v-for="(item, index) in result.tracks">
<td> <td>
<span @click="play(index)"> <span @click="play(index)">
<Icon>mdi-play</Icon> <Icon icon="play-fill"/>
</span> </span>
</td> </td>
<td>{{ item.title }}</td> <td>{{ item.title }}</td>

44
src/shared/components/Icon.vue
View File

@ -1,8 +1,46 @@
<template> <template>
<span :class="`mdi ${$slots.default[0].text}`"></span> <BIcon :icon="icon"/>
</template> </template>
<script lang="ts"> <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({}); 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> </script>

2
src/shared/components/ImgContainer.vue
View File

@ -3,7 +3,7 @@
<div class="fixed-img-inner"> <div class="fixed-img-inner">
<img v-if="props.src" :src="props.src"> <img v-if="props.src" :src="props.src">
<div v-else class="text-muted"> <div v-else class="text-muted">
<Icon>mdi-music</Icon> <Icon icon="music-note-beamed"/>
</div> </div>
</div> </div>
</div> </div>

2
src/shared/components/OverflowMenu.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0"> <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
<template #button-content> <template #button-content>
<Icon>mdi-dots-vertical</Icon> <Icon icon="three-dots-vertical"/>
</template> </template>
<slot/> <slot/>
</b-dropdown> </b-dropdown>

6
src/shared/components/Tiles.vue
View File

@ -5,9 +5,7 @@
<div class="tile-img bg-secondary"> <div class="tile-img bg-secondary">
<div class="tile-img-inner"> <div class="tile-img-inner">
<img v-if="item.image" :src="item.image"> <img v-if="item.image" :src="item.image">
<div v-else class="fallback-img text-muted"> <Icon v-else class="fallback-img text-muted" icon="music-note-beamed"/>
<Icon>mdi-music</Icon>
</div>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -56,7 +54,6 @@
} }
.fallback-img { .fallback-img {
*{
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -65,7 +62,6 @@
} }
} }
} }
}
</style> </style>
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";

3
src/style/main.scss
View File

@ -1,6 +1,3 @@
@import '~roboto-fontface/css/roboto/roboto-fontface.css';
@import '~@mdi/font/css/materialdesignicons.css';
$enable-rounded: false; $enable-rounded: false;
$enable-print-styles: false; $enable-print-styles: false;
.breadcrumb { .breadcrumb {

15
yarn.lock
View File

@ -1011,11 +1011,6 @@
cssnano-preset-default "^4.0.0" cssnano-preset-default "^4.0.0"
postcss "^7.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": "@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" 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: dependencies:
object-visit "^1.0.0" 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: md5-es@1.8.2:
version "1.8.2" version "1.8.2"
resolved "https://registry.yarnpkg.com/md5-es/-/md5-es-1.8.2.tgz#4c3d07b3f8e70669afd00ba3ac8b4b619741b506" 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" hash-base "^3.0.0"
inherits "^2.0.1" 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: run-queue@^1.0.0, run-queue@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47" resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"