okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added feather icons to the sidebar

Browse source
This commit is contained in:
booploops 2022-01-06 18:55:05 -08:00
parent cba4a71b87
commit e58a8b166c
14 changed files with 85 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/assets/feather/disc.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-disc"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
Side by side

After

Width:  |  Height:  |  Size: 295 B

1
src/renderer/assets/feather/globe.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 409 B

1
src/renderer/assets/feather/home.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Side by side

After

Width:  |  Height:  |  Size: 332 B

1
src/renderer/assets/feather/list.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
Side by side

After

Width:  |  Height:  |  Size: 482 B

1
src/renderer/assets/feather/music.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
Side by side

After

Width:  |  Height:  |  Size: 327 B

1
src/renderer/assets/feather/play-circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
Side by side

After

Width:  |  Height:  |  Size: 313 B

1
src/renderer/assets/feather/plus-circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
Side by side

After

Width:  |  Height:  |  Size: 351 B

1
src/renderer/assets/feather/radio.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-radio"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 389 B

1
src/renderer/assets/feather/user.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Side by side

After

Width:  |  Height:  |  Size: 313 B

33
src/renderer/index.js
View file

@ -311,6 +311,11 @@ const app = new Vue({
}, },
}, },
methods: { methods: {
async getSvgIcon(url) {
let response = await fetch(url);
let data = await response.text();
return data;
},
getSocialBadges(cb = () => { getSocialBadges(cb = () => {
}) { }) {
let self = this let self = this
@ -2929,10 +2934,34 @@ const app = new Vue({
Vue.component('sidebar-library-item', { Vue.component('sidebar-library-item', {
template: '#sidebar-library-item', template: '#sidebar-library-item',
props: ['name', 'page', 'cd-click'], props: {
name: {
type: String,
required: true
},
page: {
type: String,
required: true
},
svgIcon: {
type: String,
required: false,
default: ''
},
cdClick: {
type: Function,
required: false
}
},
data: function () { data: function () {
return { return {
app: app app: app,
svgIconData: ""
}
},
async mounted() {
if (this.svgIcon) {
this.svgIconData = await this.app.getSvgIcon(this.svgIcon)
} }
}, },
methods: {} methods: {}

15
src/renderer/style.less
View file

@ -682,7 +682,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
color: white; color: #eee;
transition: transform .1s; transition: transform .1s;
text-align: left; text-align: left;
@ -3715,6 +3715,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Cider */ /* Cider */
// sidebar icon
.sidebar-icon {
width: 18px;
height: 18px;
margin-right: 8px;
>svg {
width: 100%;
height: 100%;
color: #aaa;
}
}
// Modular // Modular
.modular-fs { .modular-fs {
.app-drawer { .app-drawer {

8
src/renderer/views/components/sidebar-playlist.ejs
View file

@ -9,7 +9,7 @@
:href="item.href" :href="item.href"
@click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'> @click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
<template v-if="!renaming"> <template v-if="!renaming">
{{ item.attributes.name }} <div class="sidebar-icon" v-html="icon"></div> {{ item.attributes.name }}
</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>
</button> </button>
@ -53,9 +53,13 @@
folderOpened: false, folderOpened: false,
children: [], children: [],
playlistRoot: "p.playlistsroot", playlistRoot: "p.playlistsroot",
renaming: false renaming: false,
icon: ""
} }
}, },
async mounted() {
this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
},
methods: { methods: {
rename() { rename() {
this.renaming = false this.renaming = false

18
src/renderer/views/main.ejs
View file

@ -172,18 +172,17 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Apple Music Apple Music
</div> </div>
<sidebar-library-item name="Home" page="home"></sidebar-library-item> <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item>
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item> <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item> <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item> <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
<sidebar-library-item name="Recently Added" page="library-recentlyadded"></sidebar-library-item> <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item> <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item>
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item> <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item> <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item>
<sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu"> <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
Playlists Playlists
</div> </div>
@ -563,6 +562,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.appRoute(page)"> :class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
<div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
{{ name }} {{ name }}
</button> </button>
</script> </script>

16
src/renderer/views/pages/new/library-songs.ejs Normal file
View file

@ -0,0 +1,16 @@
<script type="text/x-template" id="hello-world">
<div class="content-inner">
</div>
</script>
<script>
Vue.component('library-songs', {
template: '#library-songs',
methods: {
sayHello: function () {
alert('Hello world!');
}
}
});
</script>