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">
Apple Music
</div>
<button class="app-sidebar-item">
<div></div>
<div>Listen Now</div>
</button>
<button class="app-sidebar-item active">Browse</button>
<button class="app-sidebar-item">Radio</button>
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" page="Radio"></sidebar-library-item>
<div class="app-sidebar-header-text">
Library
</div>
<button class="app-sidebar-item">Songs</button>
<button class="app-sidebar-item">Albums</button>
<button class="app-sidebar-item">Artists</button>
<button class="app-sidebar-item">Made For You</button>
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" 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">
Playlists
</div>
@ -221,6 +218,12 @@
<div class="bg-artwork"></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">
<template>
<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', {
template: '#mediaitem-square',
props: ['item'],
methods: {
}
methods: {}
});
Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect',
props: ['item'],
methods: {
}
methods: {}
});
Vue.component('mediaitem-list-item', {
template: '#mediaitem-list-item',
props: ['item'],
methods: {
}
methods: {}
});
const MusicKitTools = {
@ -64,6 +67,13 @@ const app = new Vue({
self.playlists.listing = res.data
})
},
getSidebarItemClass(page) {
if (this.page == page) {
return ["active"]
} else {
return []
}
},
unauthorize() {
this.mk.unauthorize()
},