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

Added sidebar-library-item component

Browse source
This commit is contained in:
booploops 2021-12-03 12:41:31 -08:00
parent 90670206ba
commit f88477f18f
2 changed files with 55 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

23
resources/cider-ui-tests/index.html
View file

@ -124,19 +124,16 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Apple Music Apple Music
</div> </div>
<button class="app-sidebar-item"> <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
<div></div> <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
<div>Listen Now</div> <sidebar-library-item name="Radio" page="Radio"></sidebar-library-item>
</button>
<button class="app-sidebar-item active">Browse</button>
<button class="app-sidebar-item">Radio</button>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
<button class="app-sidebar-item">Songs</button> <sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
<button class="app-sidebar-item">Albums</button> <sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
<button class="app-sidebar-item">Artists</button> <sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
<button class="app-sidebar-item">Made For You</button> <sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Playlists Playlists
</div> </div>
@ -221,6 +218,12 @@
<div class="bg-artwork"></div> <div class="bg-artwork"></div>
</div> </div>
<script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)"
@click="$parent.page = page">{{ name }}</button>
</script>
<script type="text/x-template" id="mediaitem-list-item"> <script type="text/x-template" id="mediaitem-list-item">
<template> <template>
<div @click="$parent.playMediaItemById(item.id, item.type)" <div @click="$parent.playMediaItemById(item.id, item.type)"

22
resources/cider-ui-tests/index.js
View file

@ -1,22 +1,25 @@
Vue.component('sidebar-library-item', {
template: '#sidebar-library-item',
props: ['name', 'page'],
methods: {}
});
Vue.component('mediaitem-square', { Vue.component('mediaitem-square', {
template: '#mediaitem-square', template: '#mediaitem-square',
props: ['item'], props: ['item'],
methods: { methods: {}
}
}); });
Vue.component('mediaitem-hrect', { Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect', template: '#mediaitem-hrect',
props: ['item'], props: ['item'],
methods: { methods: {}
}
}); });
Vue.component('mediaitem-list-item', { Vue.component('mediaitem-list-item', {
template: '#mediaitem-list-item', template: '#mediaitem-list-item',
props: ['item'], props: ['item'],
methods: { methods: {}
}
}); });
const MusicKitTools = { const MusicKitTools = {
@ -64,6 +67,13 @@ const app = new Vue({
self.playlists.listing = res.data self.playlists.listing = res.data
}) })
}, },
getSidebarItemClass(page) {
if (this.page == page) {
return ["active"]
} else {
return []
}
},
unauthorize() { unauthorize() {
this.mk.unauthorize() this.mk.unauthorize()
}, },