added svg-names to sidebar icons

This commit is contained in:
booploops 2022-06-28 22:40:06 -07:00
parent f4006b6189
commit 225a0bfa42
5 changed files with 20 additions and 6 deletions

View file

@ -68,6 +68,10 @@ Vue.component("sidebar-library-item", {
required: false, required: false,
default: "", default: "",
}, },
svgIconName: {
type: String,
required: false
},
cdClick: { cdClick: {
type: Function, type: Function,
required: false, required: false,

View file

@ -198,13 +198,13 @@
</div> </div>
<div class="app-chrome-item" v-else> <div class="app-chrome-item" v-else>
<div class="top-nav-group"> <div class="top-nav-group">
<sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home"> <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
</sidebar-library-item> </sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg" <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
page="listen_now"></sidebar-library-item> page="listen_now"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse"> <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
</sidebar-library-item> </sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio"> <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
</sidebar-library-item> </sidebar-library-item>
</div> </div>
</div> </div>

View file

@ -51,6 +51,7 @@
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('home.title')" :name="$root.getLz('home.title')"
svg-icon="./assets/feather/home.svg" svg-icon="./assets/feather/home.svg"
svg-icon-name="home"
page="home" page="home"
> >
</sidebar-library-item> </sidebar-library-item>
@ -67,17 +68,20 @@
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.listenNow')" :name="$root.getLz('term.listenNow')"
svg-icon="./assets/feather/play-circle.svg" svg-icon="./assets/feather/play-circle.svg"
svg-icon-name="listenNow"
page="listen_now" page="listen_now"
></sidebar-library-item> ></sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.browse')" :name="$root.getLz('term.browse')"
svg-icon="./assets/feather/globe.svg" svg-icon="./assets/feather/globe.svg"
svg-icon-name="browse"
page="browse" page="browse"
> >
</sidebar-library-item> </sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.radio')" :name="$root.getLz('term.radio')"
svg-icon="./assets/feather/radio.svg" svg-icon="./assets/feather/radio.svg"
svg-icon-name="radio"
page="radio" page="radio"
></sidebar-library-item> ></sidebar-library-item>
</template> </template>
@ -94,36 +98,42 @@
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.recentlyAdded')" :name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg" svg-icon="./assets/feather/plus-circle.svg"
svg-icon-name="recentlyAdded"
v-if="cfg.general.sidebarItems.recentlyAdded" v-if="cfg.general.sidebarItems.recentlyAdded"
page="library-recentlyadded" page="library-recentlyadded"
></sidebar-library-item> ></sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.songs')" :name="$root.getLz('term.songs')"
svg-icon="./assets/feather/music.svg" svg-icon="./assets/feather/music.svg"
svg-icon-name="songs"
v-if="cfg.general.sidebarItems.songs" v-if="cfg.general.sidebarItems.songs"
page="library-songs" page="library-songs"
></sidebar-library-item> ></sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.albums')" :name="$root.getLz('term.albums')"
svg-icon="./assets/feather/disc.svg" svg-icon="./assets/feather/disc.svg"
svg-icon-name="albums"
v-if="cfg.general.sidebarItems.albums" v-if="cfg.general.sidebarItems.albums"
page="library-albums" page="library-albums"
></sidebar-library-item> ></sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.artists')" :name="$root.getLz('term.artists')"
svg-icon="./assets/feather/user.svg" svg-icon="./assets/feather/user.svg"
svg-icon-name="artists"
v-if="cfg.general.sidebarItems.artists" v-if="cfg.general.sidebarItems.artists"
page="library-artists" page="library-artists"
></sidebar-library-item> ></sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.videos')" :name="$root.getLz('term.videos')"
svg-icon="./assets/feather/video.svg" svg-icon="./assets/feather/video.svg"
svg-icon-name="videos"
v-if="cfg.general.sidebarItems.videos" v-if="cfg.general.sidebarItems.videos"
page="library-videos" page="library-videos"
></sidebar-library-item> ></sidebar-library-item>
<sidebar-library-item <sidebar-library-item
:name="$root.getLz('term.podcasts')" :name="$root.getLz('term.podcasts')"
svg-icon="./assets/feather/mic.svg" svg-icon="./assets/feather/mic.svg"
svg-icon-name="podcasts"
v-if="cfg.general.sidebarItems.podcasts" v-if="cfg.general.sidebarItems.podcasts"
page="podcasts" page="podcasts"
> >

View file

@ -9,7 +9,7 @@
:href="item.href" :href="item.href"
@click='clickEvent()'> @click='clickEvent()'>
<template v-if="!renaming"> <template v-if="!renaming">
<svg-icon :url="icon"/> {{ item.attributes.name }} <svg-icon :url="icon" name="sidebar-playlist"/> {{ item.attributes.name }}
<small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small> <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
</template> </template>
<input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else> <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>

View file

@ -123,7 +123,7 @@
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)"> :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
<svg-icon :url="svgIconData" v-if="svgIconData != ''" /> <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
<span class="sidebar-item-text">{{ name }}</span> <span class="sidebar-item-text">{{ name }}</span>
</button> </button>
</script> </script>