yetangitu/funkwhale
1
0
Fork 0
mirror of https://code.eliotberriot.com/funkwhale/funkwhale.git synced 2025-10-04 12:39:23 +02:00
Code Issues Releases Wiki Activity

Resolve "UX, UI : Browse Library"

Browse source
This commit is contained in:
Eliot Berriot 2018-07-17 11:09:13 +00:00
parent dc5eb1154e
commit 99a37dcb7a
35 changed files with 833 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

20
front/src/components/audio/PlayButton.vue
View file

@ -1,22 +1,23 @@
<template>
<div :title="title" :class="['ui', {'tiny': discrete}, 'buttons']">
<span :title="title" :class="['ui', {'tiny': discrete}, {'buttons': !dropdownOnly && !iconOnly}]">
<button
v-if="!dropdownOnly"
:title="labels.addToQueue"
@click="addNext(true)"
:disabled="!playable"
:class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
<i class="ui play icon"></i>
<template v-if="!discrete"><slot><translate>Play</translate></slot></template>
:class="buttonClasses.concat(['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}])">
<i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly"><slot><translate>Play</translate></slot></template>
</button>
<div v-if="!discrete" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']">
<i class="dropdown icon"></i>
<div v-if="!discrete && !iconOnly" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
<i :class="dropdownIconClasses.concat(['icon'])"></i>
<div class="menu">
<div class="item" :disabled="!playable" @click="add"><i class="plus icon"></i><translate>Add to queue</translate></div>
<div class="item" :disabled="!playable" @click="addNext()"><i class="step forward icon"></i><translate>Play next</translate></div>
<div class="item" :disabled="!playable" @click="addNext(true)"><i class="arrow down icon"></i><translate>Play now</translate></div>
</div>
</div>
</div>
</span>
</template>
<script>
@ -28,8 +29,13 @@ export default {
// we can either have a single or multiple tracks to play when clicked
tracks: {type: Array, required: false},
track: {type: Object, required: false},
dropdownIconClasses: {type: Array, required: false, default: () => { return ['dropdown'] }},
playIconClass: {type: String, required: false, default: 'play icon'},
buttonClasses: {type: Array, required: false, default: () => { return ['button'] }},
playlist: {type: Object, required: false},
discrete: {type: Boolean, default: false},
dropdownOnly: {type: Boolean, default: false},
iconOnly: {type: Boolean, default: false},
artist: {type: Number, required: false},
album: {type: Number, required: false}
},