yetangitu/funkwhale
1
0
Fork 0
mirror of https://code.eliotberriot.com/funkwhale/funkwhale.git synced 2025-10-05 06:49:24 +02:00
Code Issues Releases Wiki Activity

Resolve "Redesign the sidebar/navigation to simplify the UI"

Browse source
This commit is contained in:
Eliot Berriot 2019-12-26 11:38:26 +01:00
parent cdd6f3d759
commit e15d806634
38 changed files with 2073 additions and 1579 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,9 +9,12 @@
<i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly"><slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
</button>
<div v-if="!discrete && !iconOnly" :class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
<div
v-if="!discrete && !iconOnly"
@click.prevent="clicked = true"
:class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
<i :class="dropdownIconClasses.concat(['icon'])" :title="title" ></i>
<div class="menu">
<div class="menu" v-if="clicked">
<button class="item basic" ref="add" data-ref="add" :disabled="!playable" @click.stop.prevent="add" :title="labels.addToQueue">
<i class="plus icon"></i><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Add to queue</translate>
</button>
@ -70,20 +73,9 @@ export default {
data () {
return {
isLoading: false,
clicked: false
}
},
mounted () {
let self = this
jQuery(this.$el).find('.ui.dropdown').dropdown({
selectOnKeydown: false,
action: function (text, value, $el) {
// used ton ensure focusing the dropdown and clicking via keyboard
// works as expected
self.$refs[$el.data('ref')].click()
jQuery(self.$el).find('.ui.dropdown').dropdown('hide')
}
})
},
computed: {
labels () {
return {
@ -250,6 +242,24 @@ export default {
date: new Date()
})
},
},
watch: {
clicked () {
let self = this
this.$nextTick(() => {
jQuery(this.$el).find('.ui.dropdown').dropdown({
selectOnKeydown: false,
action: function (text, value, $el) {
// used ton ensure focusing the dropdown and clicking via keyboard
// works as expected
self.$refs[$el.data('ref')].click()
jQuery(self.$el).find('.ui.dropdown').dropdown('hide')
}
})
jQuery(this.$el).find('.ui.dropdown').dropdown('show')
})
}
}
}
</script>