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"
},
"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",

12
src/app/Nav.vue
View File

@ -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/>

4
src/app/TopNav.vue
View File

@ -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>

2
src/library/TrackContextMenu.vue
View File

@ -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' }}

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;">
<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>

2
src/main.ts
View File

@ -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'

6
src/player/Player.vue
View File

@ -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">

6
src/playlist/PlaylistNav.vue
View File

@ -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>

4
src/playlist/RandomSongs.vue
View File

@ -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>

2
src/search/SearchResult.vue
View File

@ -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>

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

@ -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>
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>

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

@ -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>

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

@ -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>

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

@ -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;
}
}
}

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-print-styles: false;
.breadcrumb {

15
yarn.lock
View File

@ -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"