mirror of
https://github.com/koel/koel
synced 2024-12-05 02:09:54 +00:00
280 lines
8.2 KiB
Vue
280 lines
8.2 KiB
Vue
<template>
|
|
<nav class="side side-nav" id="sidebar" :class="{ showing: showing }">
|
|
<section class="music">
|
|
<h1>Your Music</h1>
|
|
|
|
<ul class="menu">
|
|
<li>
|
|
<a class="home" :class="[currentView == 'home' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('home')">Home</a>
|
|
</li>
|
|
<li>
|
|
<a class="queue"
|
|
:class="[currentView == 'queue' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('queue')"
|
|
@dragleave="removeDroppableState"
|
|
@dragover.prevent="allowDrop"
|
|
@drop.stop.prevent="handleDrop">Current Queue</a>
|
|
</li>
|
|
<li>
|
|
<a class="songs" :class="[currentView == 'songs' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('songs')">All Songs</a>
|
|
</li>
|
|
<li>
|
|
<a class="albums" :class="[currentView == 'albums' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('albums')">Albums</a>
|
|
</li>
|
|
<li>
|
|
<a class="artists" :class="[currentView == 'artists' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('artists')">Artists</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<playlists :current-view="currentView"></playlists>
|
|
|
|
<section v-if="user.current.is_admin" class="manage">
|
|
<h1>Manage</h1>
|
|
|
|
<ul class="menu">
|
|
<li>
|
|
<a class="settings" :class="[currentView == 'settings' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('settings')">Settings</a>
|
|
</li>
|
|
<li>
|
|
<a class="users" :class="[currentView == 'users' ? 'active' : '']"
|
|
@click.prevent="$root.loadMainView('users')">Users</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<a
|
|
href="https://github.com/phanan/koel/releases"
|
|
target="_blank"
|
|
v-show="user.current.is_admin && sharedState.currentVersion < sharedState.latestVersion"
|
|
class="new-ver">
|
|
Koel version {{ sharedState.latestVersion }} is available!
|
|
</a>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import isMobile from 'ismobilejs';
|
|
import $ from 'jquery';
|
|
|
|
import playlists from './playlists.vue';
|
|
import userStore from '../../../stores/user';
|
|
import songStore from '../../../stores/song';
|
|
import queueStore from '../../../stores/queue';
|
|
import sharedStore from '../../../stores/shared';
|
|
|
|
export default {
|
|
components: { playlists },
|
|
|
|
data() {
|
|
return {
|
|
currentView: 'queue',
|
|
user: userStore.state,
|
|
showing: !isMobile.phone,
|
|
sharedState: sharedStore.state,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Remove the droppable state when a dragleave event occurs on the playlist's DOM element.
|
|
*
|
|
* @param {Object} e The dragleave event.
|
|
*/
|
|
removeDroppableState(e) {
|
|
$(e.target).removeClass('droppable');
|
|
},
|
|
|
|
/**
|
|
* Add a "droppable" class and set the drop effect when an item is dragged over "Queue" menu.
|
|
*
|
|
* @param {Object} e The dragover event.
|
|
*/
|
|
allowDrop(e) {
|
|
$(e.target).addClass('droppable');
|
|
e.dataTransfer.dropEffect = 'move';
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Handle songs dropped to our Queue menu item.
|
|
*
|
|
* @param {Object} e The event
|
|
*
|
|
* @return {Boolean}
|
|
*/
|
|
handleDrop(e) {
|
|
this.removeDroppableState(e);
|
|
|
|
if (!e.dataTransfer.getData('text/plain')) {
|
|
return false;
|
|
}
|
|
|
|
var songs = songStore.byIds(e.dataTransfer.getData('text/plain').split(','));
|
|
|
|
if (!songs.length) {
|
|
return false;
|
|
}
|
|
|
|
queueStore.queue(songs);
|
|
|
|
return false;
|
|
},
|
|
},
|
|
|
|
events: {
|
|
'main-content-view:load': function (view) {
|
|
this.currentView = view;
|
|
|
|
// Hide the sidebar if on mobile
|
|
if (isMobile.phone) {
|
|
this.showing = false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Listen to sidebar:toggle event to show or hide the sidebar.
|
|
* This should only be triggered on a mobile device.
|
|
*/
|
|
'sidebar:toggle': function () {
|
|
this.showing = !this.showing;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
@import "resources/assets/sass/partials/_vars.scss";
|
|
@import "resources/assets/sass/partials/_mixins.scss";
|
|
|
|
#sidebar {
|
|
flex: 0 0 256px;
|
|
background-color: $colorSidebarBgr;
|
|
padding: 22px 0 0;
|
|
max-height: calc(100vh - #{$headerHeight + $footerHeight});
|
|
overflow: auto;
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
|
html.touchevents & {
|
|
// Enable scroll with momentum on touch devices
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
a.droppable {
|
|
transform: scale(1.2);
|
|
transition: .3s;
|
|
transform-origin: center left;
|
|
|
|
color: $colorMainText;
|
|
background-color: rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 32px;
|
|
|
|
h1 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
padding: 0 16px;
|
|
margin-bottom: 12px;
|
|
|
|
i {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
padding: 0 12px 0 16px;
|
|
border-left: 4px solid transparent;
|
|
|
|
&.active, &:hover {
|
|
border-left-color: $colorHighlight;
|
|
color: $colorLinkHovered;
|
|
background: rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
&:hover {
|
|
border-left-color: darken($colorHighlight, 20%);
|
|
}
|
|
|
|
&::before {
|
|
width: 24px;
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
}
|
|
|
|
&.home::before {
|
|
content: "\f015";
|
|
}
|
|
|
|
&.queue::before {
|
|
content: "\f0cb";
|
|
}
|
|
|
|
&.songs::before {
|
|
content: "\f001";
|
|
}
|
|
|
|
&.albums::before {
|
|
content: "\f152";
|
|
}
|
|
|
|
&.artists::before {
|
|
content: "\f130";
|
|
}
|
|
|
|
&.settings::before {
|
|
content: "\f013";
|
|
}
|
|
|
|
&.users::before {
|
|
content: "\f0c0";
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-ver {
|
|
margin: 16px;
|
|
padding: 16px;
|
|
border: 1px solid $color2ndText;
|
|
color: $colorMainText;
|
|
opacity: .3;
|
|
font-size: 90%;
|
|
display: block;
|
|
transition: .3s;
|
|
|
|
&:hover {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (max-device-width : 667px) {
|
|
position: fixed;
|
|
height: calc(100vh - #{$headerHeight + $footerHeight});
|
|
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
|
width: 100%;
|
|
z-index: 99;
|
|
top: $headerHeight;
|
|
left: -100%;
|
|
transition: left .3s ease-in;
|
|
|
|
&.showing {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|