mirror of
https://github.com/koel/koel
synced 2024-09-20 06:11:53 +00:00
Close menu with clickaway
This commit is contained in:
An Phan
parent
eafa856b02
commit
640d8fc8dc
8 changed files with 64 additions and 61 deletions
|
|
@ -39,6 +39,7 @@
|
|||
"rangeslider.js": "^2.1.1",
|
||||
"sinon": "^1.17.2",
|
||||
"vue": "^1.0.16",
|
||||
"vue-clickaway": "^1.1.1",
|
||||
"vue-hot-reload-api": "^1.2.2",
|
||||
"vue-resource": "~0.5.1",
|
||||
"vueify": "^7.0.2",
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@
|
|||
<span class="overview">
|
||||
<img :src="album.cover" width="64" height="64" class="cover">
|
||||
{{ album.name }}
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
@click="showingControls = true"></i>
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
@click.prevent="showingControls = false"></i>
|
||||
|
||||
<span class="meta" v-show="meta.songCount">
|
||||
by <a class="artist" @click.prevent="viewArtistDetails">{{ album.artist.name }}</a>
|
||||
•
|
||||
{{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
|
||||
•
|
||||
•
|
||||
{{ meta.totalLength }}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
<i class="fa fa-random"></i> Selected
|
||||
</button>
|
||||
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@
|
|||
<span class="overview">
|
||||
<img :src="artist.image" width="64" height="64" class="cover">
|
||||
{{ artist.name }}
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
@click="showingControls = true"></i>
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
@click.prevent="showingControls = false"></i>
|
||||
|
||||
<span class="meta" v-show="meta.songCount">
|
||||
{{ artist.albums.length }} {{ artist.albums.length | pluralize 'album' }}
|
||||
•
|
||||
{{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
|
||||
•
|
||||
•
|
||||
{{ meta.totalLength }}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
<i class="fa fa-random"></i> Selected
|
||||
</button>
|
||||
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<section id="favoritesWrapper">
|
||||
<h1 class="heading">
|
||||
<span>Songs You Love
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
@click="showingControls = true"></i>
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
@click.prevent="showingControls = false"></i>
|
||||
|
||||
<span class="meta" v-show="meta.songCount">
|
||||
{{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
|
||||
•
|
||||
•
|
||||
{{ meta.totalLength }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="buttons" v-show="!isPhone || showingControls">
|
||||
<button class="play-shuffle"
|
||||
<button class="play-shuffle"
|
||||
@click.prevent="shuffle"
|
||||
v-if="state.songs.length && selectedSongs.length < 2"
|
||||
>
|
||||
|
|
@ -26,28 +26,28 @@
|
|||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
<i class="fa fa-random"></i> Selected
|
||||
</button>
|
||||
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing="showingAddToMenu && state.songs.length"
|
||||
:settings="{ canLike: false }">
|
||||
<add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list
|
||||
v-show="state.songs.length"
|
||||
:items="state.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
<song-list
|
||||
v-show="state.songs.length"
|
||||
:items="state.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="favorites">
|
||||
</song-list>
|
||||
|
||||
<div v-show="!state.songs.length" class="none">
|
||||
Start loving!
|
||||
Click the <i style="margin: 0 5px" class="fa fa-heart"></i> icon when a song is playing to add it
|
||||
Start loving!
|
||||
Click the <i style="margin: 0 5px" class="fa fa-heart"></i> icon when a song is playing to add it
|
||||
to this list.
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
|
||||
<script>
|
||||
import isMobile from 'ismobilejs';
|
||||
|
||||
|
||||
import favoriteStore from '../../../stores/favorite';
|
||||
import playback from '../../../services/playback';
|
||||
import hasSongList from '../../../mixins/has-song-list';
|
||||
|
||||
|
||||
export default {
|
||||
mixins: [hasSongList],
|
||||
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<section id="playlistWrapper">
|
||||
<h1 class="heading">
|
||||
<span>{{ playlist.name }}
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
@click="showingControls = true"></i>
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
@click.prevent="showingControls = false"></i>
|
||||
|
||||
<span class="meta" v-show="meta.songCount">
|
||||
{{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
|
||||
•
|
||||
•
|
||||
{{ meta.totalLength }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="buttons" v-show="!isPhone || showingControls">
|
||||
<button class="play-shuffle"
|
||||
<button class="play-shuffle"
|
||||
@click.prevent="shuffle"
|
||||
v-if="playlist.songs.length && selectedSongs.length < 2"
|
||||
>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
<i class="fa fa-random"></i> Selected
|
||||
</button>
|
||||
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
<button class="del"
|
||||
|
|
@ -39,15 +39,15 @@
|
|||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list v-show="playlist.songs.length"
|
||||
:items="playlist.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
<song-list v-show="playlist.songs.length"
|
||||
:items="playlist.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
:playlist="playlist"
|
||||
type="playlist">
|
||||
</song-list>
|
||||
|
||||
<div v-show="!playlist.songs.length" class="none">
|
||||
The playlist is currently empty. You can fill it up by dragging songs into its name in the sidebar,
|
||||
The playlist is currently empty. You can fill it up by dragging songs into its name in the sidebar,
|
||||
or use the "Add To…" button.
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
<i class="fa fa-random"></i> Selected
|
||||
</button>
|
||||
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="state.songs.length > 1">
|
||||
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="state.songs.length > 1">
|
||||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
<button class="clear" @click.prevent="clear" v-if="state.songs.length">Clear</button>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,24 @@
|
|||
<section id="songsWrapper">
|
||||
<h1 class="heading">
|
||||
<span>All Songs
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
<i class="fa fa-angle-down toggler"
|
||||
v-show="isPhone && !showingControls"
|
||||
@click="showingControls = true"></i>
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
<i class="fa fa-angle-up toggler"
|
||||
v-show="isPhone && showingControls"
|
||||
@click.prevent="showingControls = false"></i>
|
||||
|
||||
<span class="meta" v-show="meta.songCount">
|
||||
{{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
|
||||
•
|
||||
•
|
||||
{{ meta.totalLength }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
|
||||
<div class="buttons" v-show="!isPhone || showingControls">
|
||||
<button
|
||||
class="play-shuffle"
|
||||
@click.prevent="shuffle"
|
||||
<button
|
||||
class="play-shuffle"
|
||||
@click.prevent="shuffle"
|
||||
v-if="state.songs.length && selectedSongs.length < 2"
|
||||
>
|
||||
<i class="fa fa-random"></i> All
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<i class="fa fa-random"></i> Selected
|
||||
</button>
|
||||
|
||||
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
|
||||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="add-to-playlist" v-show="showing">
|
||||
<div class="add-to-playlist" v-show="showing" v-on-clickaway="hideMenu">
|
||||
<p>Add {{ songs.length }} {{ songs.length | pluralize 'song' }} to</p>
|
||||
|
||||
<ul>
|
||||
|
|
@ -10,11 +10,11 @@
|
|||
</ul>
|
||||
|
||||
<p>or create a new playlist</p>
|
||||
|
||||
|
||||
<form class="form-save form-simple" @submit.prevent="createNewPlaylistFromSongs">
|
||||
<input type="text"
|
||||
<input type="text"
|
||||
@keyup.esc.prevent="hideMenu"
|
||||
v-model="newPlaylistName"
|
||||
v-model="newPlaylistName"
|
||||
placeholder="Playlist name"
|
||||
required>
|
||||
<button type="submit">
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import VueClickaway from 'vue-clickaway';
|
||||
|
||||
import playlistStore from '../../stores/playlist';
|
||||
import favoriteStore from '../../stores/favorite';
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
|
||||
export default {
|
||||
props: ['songs', 'showing', 'settings'],
|
||||
mixins: [ VueClickaway.mixin ],
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -106,14 +108,14 @@
|
|||
*/
|
||||
createNewPlaylistFromSongs() {
|
||||
this.newPlaylistName = this.newPlaylistName.trim();
|
||||
|
||||
|
||||
if (!this.newPlaylistName) {
|
||||
return;
|
||||
}
|
||||
|
||||
playlistStore.store(this.newPlaylistName, this.songs, () => {
|
||||
this.newPlaylistName = '';
|
||||
|
||||
|
||||
// Activate the new playlist right away
|
||||
this.$root.loadPlaylist(_.last(this.playlistState.playlists));
|
||||
});
|
||||
|
|
@ -127,8 +129,8 @@
|
|||
},
|
||||
|
||||
clearSelection() {
|
||||
this.$parent.$broadcast('song:selection-clear');
|
||||
}
|
||||
this.$parent.$broadcast('song:selection-clear');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -144,7 +146,7 @@
|
|||
top: 36px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
|
||||
p {
|
||||
margin: 4px 0;
|
||||
font-size: 90%;
|
||||
|
|
@ -159,7 +161,7 @@
|
|||
|
||||
ul {
|
||||
max-height: 5 * ($itemHeight + $itemMargin);
|
||||
overflow-y: scroll;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue