koel/resources/assets/js/components/main-wrapper/extra/index.vue

205 lines
5.7 KiB
Vue
Raw Normal View History

2015-12-13 04:42:28 +00:00
<template>
<section id="extra" :class="{ showing: prefs.showExtraPanel }">
<div class="tabs">
<div class="header clear">
2016-02-08 13:14:51 +00:00
<a @click.prevent="currentView = 'lyrics'"
2016-01-16 18:11:24 +00:00
:class="{ active: currentView === 'lyrics' }">Lyrics</a>
2016-02-08 13:14:51 +00:00
<a @click.prevent="currentView = 'artistInfo'"
2016-01-16 18:11:24 +00:00
:class="{ active: currentView === 'artistInfo' }">Artist</a>
2016-02-08 13:14:51 +00:00
<a @click.prevent="currentView = 'albumInfo'"
2016-01-16 18:11:24 +00:00
:class="{ active: currentView === 'albumInfo' }">Album</a>
</div>
2015-12-13 04:42:28 +00:00
<div class="panes">
2016-02-08 13:14:51 +00:00
<lyrics :song="song" v-ref:lyrics v-show="currentView === 'lyrics'"></lyrics>
<artist-info :artist="song.album.artist" v-ref:artist-info v-show="currentView === 'artistInfo'"></artist-info>
<album-info :album="song.album" v-ref:album-info v-show="currentView === 'albumInfo'"></album-info>
</div>
2015-12-13 04:42:28 +00:00
</div>
</section>
</template>
<script>
import isMobile from 'ismobilejs';
import _ from 'lodash';
2016-02-08 13:14:51 +00:00
2015-12-13 04:42:28 +00:00
import lyrics from './lyrics.vue';
import artistInfo from './artist-info.vue'
import albumInfo from './album-info.vue'
2015-12-13 04:42:28 +00:00
import preferenceStore from '../../../stores/preference';
import songStore from '../../../stores/song';
2016-02-08 13:14:51 +00:00
2015-12-13 04:42:28 +00:00
export default {
components: { lyrics, artistInfo, albumInfo },
2015-12-13 04:42:28 +00:00
data() {
return {
2016-02-08 13:14:51 +00:00
song: songStore.stub,
2015-12-13 04:42:28 +00:00
prefs: preferenceStore.state,
currentView: 'lyrics',
2015-12-13 04:42:28 +00:00
};
},
ready() {
if (isMobile.phone) {
2016-02-08 13:14:51 +00:00
// On a mobile device, we always hide the panel initially regardless of
2015-12-13 04:42:28 +00:00
// the saved preference.
this.prefs.showExtraPanel = false;
preferenceStore.save();
}
},
2015-12-30 04:14:47 +00:00
methods: {
/**
2016-02-08 13:14:51 +00:00
* Reset all self and applicable child components' states.
2015-12-30 04:14:47 +00:00
*/
2016-02-08 13:14:51 +00:00
resetState() {
this.currentView = 'lyrics';
this.song = songStore.stub;
2016-01-21 10:21:46 +00:00
_.invoke(this.$refs, 'resetState');
2015-12-30 04:14:47 +00:00
},
},
2015-12-13 04:42:28 +00:00
events: {
'main-content-view:load': function (view) {
// Hide the panel away if a main view is triggered on mobile.
if (isMobile.phone) {
this.prefs.showExtraPanel = false;
}
return true;
2015-12-13 04:42:28 +00:00
},
2016-01-07 09:03:38 +00:00
'song:played': function (song) {
2016-02-08 13:14:51 +00:00
songStore.getInfo(this.song = song);
},
2015-12-30 04:14:47 +00:00
'koel:teardown': function () {
2016-02-08 13:14:51 +00:00
this.resetState();
2015-12-30 04:14:47 +00:00
},
2015-12-13 04:42:28 +00:00
},
};
</script>
<style lang="sass">
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
2016-02-08 13:14:51 +00:00
2015-12-13 04:42:28 +00:00
#extra {
2016-01-12 14:53:15 +00:00
flex: 0 0 $extraPanelWidth;
padding: 24px 16px $footerHeight;
2015-12-13 04:42:28 +00:00
background: $colorExtraBgr;
max-height: calc(100vh - #{$headerHeight + $footerHeight});
display: none;
color: $color2ndText;
2016-02-24 13:29:23 +00:00
overflow: auto;
&:hover, html.touchevents & {
// Enable scroll with momentum on touch devices
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
2015-12-13 04:42:28 +00:00
&.showing {
display: block;
}
h1 {
font-weight: $fontWeight_UltraThin;
font-size: 28px;
2015-12-13 04:42:28 +00:00
margin-bottom: 16px;
line-height: 36px;
@include vertical-center();
2015-12-20 06:22:15 +00:00
align-items: initial;
span {
flex: 1;
margin-right: 12px;
}
a {
font-size: 14px;
&:hover {
color: $colorHighlight;
}
}
}
.tabs {
.header {
2015-12-20 06:22:15 +00:00
$tabColor: #5c5c5c;
border-bottom: 1px solid $tabColor;
a {
2015-12-20 06:22:15 +00:00
padding: 8px 12px;
margin-left: 4px;
border-radius: 4px 4px 0 0;
text-transform: uppercase;
2015-12-20 06:22:15 +00:00
color: lighten($tabColor, 50%);
opacity: .4;
2015-12-20 06:22:15 +00:00
border: 1px solid $tabColor;
margin-bottom: -1px;
float: left;
&.active {
border-bottom: 1px solid $colorExtraBgr;
opacity: 1;
}
}
}
.panes {
padding: 16px 0;
}
}
.more {
margin-top: 8px;
border-radius: 3px;
background: $colorBlue;
color: #fff;
padding: 4px 8px;
display: inline-block;
text-transform: uppercase;
font-size: 80%;
}
footer {
margin-top: 24px;
font-size: 90%;
a {
2016-02-08 13:14:51 +00:00
color: #fff;
font-weight: $fontWeight_Normal;
&:hover {
color: #b90000;
}
}
2015-12-13 04:42:28 +00:00
}
2016-01-16 18:11:24 +00:00
@media only screen and (max-device-width : 1024px) {
2015-12-13 04:42:28 +00:00
position: fixed;
height: calc(100vh - #{$headerHeight + $footerHeight});
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
2016-01-12 14:53:15 +00:00
width: $extraPanelWidth;
2015-12-13 04:42:28 +00:00
z-index: 5;
top: $headerHeight;
right: -100%;
transition: right .3s ease-in;
&.showing {
right: 0;
}
}
2016-01-16 18:11:24 +00:00
@media only screen and (max-device-width : 667px) {
2015-12-13 04:42:28 +00:00
width: 100%;
}
}
</style>