MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Resolve "Ensure all buttons in the application are operable using only the keyboard"

This commit is contained in:
Agate 2020-08-04 13:22:31 +02:00
parent 945b54bc19
commit 1cc5ed8871
38 changed files with 167 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/Queue.vue
View File

@ -194,7 +194,7 @@
<i class="feed icon"></i> <translate translate-context="Sidebar/Player/Title">You have a radio playing</translate> <i class="feed icon"></i> <translate translate-context="Sidebar/Player/Title">You have a radio playing</translate>
</h3> </h3>
<p><translate translate-context="Sidebar/Player/Paragraph">New tracks will be appended here automatically.</translate></p> <p><translate translate-context="Sidebar/Player/Paragraph">New tracks will be appended here automatically.</translate></p>
<div @click="$store.dispatch('radios/stop')" class="ui basic primary button"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></div> <button @click="$store.dispatch('radios/stop')" class="ui basic primary button"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></button>
</div> </div>
</div> </div>
</div> </div>

17
front/src/components/audio/PlayButton.vue
View File

@ -9,10 +9,9 @@
<i :class="[playIconClass, 'icon']"></i> <i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template> <template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
</button> </button>
<div <button
v-if="!discrete && !iconOnly" v-if="!discrete && !iconOnly"
@click.prevent="clicked = true" @click.prevent="clicked = true"
role="button"
:class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]"> :class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
<i :class="dropdownIconClasses.concat(['icon'])" :title="title" ></i> <i :class="dropdownIconClasses.concat(['icon'])" :title="title" ></i>
<div class="menu" v-if="clicked"> <div class="menu" v-if="clicked">
@ -29,18 +28,19 @@
<i class="feed icon"></i><translate translate-context="*/Queue/Button.Label/Short, Verb">Start radio</translate> <i class="feed icon"></i><translate translate-context="*/Queue/Button.Label/Short, Verb">Start radio</translate>
</button> </button>
<div class="divider"></div> <div class="divider"></div>
<button v-if="filterableArtist" class="item basic" :disabled="!filterableArtist" @click.stop.prevent="filterArtist" :title="labels.hideArtist"> <button v-if="filterableArtist" ref="filterArtist" data-ref="filterArtist" class="item basic" :disabled="!filterableArtist" @click.stop.prevent="filterArtist" :title="labels.hideArtist">
<i class="eye slash outline icon"></i><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Hide content from this artist</translate> <i class="eye slash outline icon"></i><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Hide content from this artist</translate>
</button> </button>
<button <button
v-for="obj in getReportableObjs({track, album, artist, playlist, account, channel})" v-for="obj in getReportableObjs({track, album, artist, playlist, account, channel})"
:key="obj.target.type + obj.target.id" :key="obj.target.type + obj.target.id"
class="item basic" class="item basic"
:ref="`report${obj.target.type}${obj.target.id}`" :data-ref="`report${obj.target.type}${obj.target.id}`"
@click.stop.prevent="$store.dispatch('moderation/report', obj.target)"> @click.stop.prevent="$store.dispatch('moderation/report', obj.target)">
<i class="share icon" /> {{ obj.label }} <i class="share icon" /> {{ obj.label }}
</button> </button>
</div> </div>
</div> </button>
</span> </span>
</template> </template>
@ -270,9 +270,14 @@ export default {
jQuery(this.$el).find('.ui.dropdown').dropdown({ jQuery(this.$el).find('.ui.dropdown').dropdown({
selectOnKeydown: false, selectOnKeydown: false,
action: function (text, value, $el) { action: function (text, value, $el) {
// used ton ensure focusing the dropdown and clicking via keyboard // used to ensure focusing the dropdown and clicking via keyboard
// works as expected // works as expected
self.$refs[$el.data('ref')].click() let button = self.$refs[$el.data('ref')]
if (Array.isArray(button)) {
button[0].click()
} else {
button.click()
}
jQuery(self.$el).find('.ui.dropdown').dropdown('hide') jQuery(self.$el).find('.ui.dropdown').dropdown('hide')
}, },
}) })

99
front/src/components/audio/Player.vue
View File

@ -11,7 +11,7 @@
<div class="controls track-controls queue-not-focused desktop-and-up"> <div class="controls track-controls queue-not-focused desktop-and-up">
<div class="ui tiny image" @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"> <div class="ui tiny image" @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})">
<img alt="" ref="cover" v-if="currentTrack.cover && currentTrack.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)"> <img alt="" ref="cover" v-if="currentTrack.cover && currentTrack.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)">
<img alt="" ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover.urls && currentTrack.album.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)"> <img alt="" ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.urls && currentTrack.album.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)">
<img alt="" v-else src="../../assets/audio/default-cover.png"> <img alt="" v-else src="../../assets/audio/default-cover.png">
</div> </div>
<div @click.stop.prevent="" class="middle aligned content ellipsis"> <div @click.stop.prevent="" class="middle aligned content ellipsis">
@ -59,48 +59,44 @@
</button> </button>
</div> </div>
<div class="player-controls controls queue-not-focused"> <div class="player-controls controls queue-not-focused">
<span <button
role="button"
:title="labels.previous" :title="labels.previous"
:aria-label="labels.previous" :aria-label="labels.previous"
class="control tablet-and-up" class="circular button control tablet-and-up"
@click.prevent.stop="$store.dispatch('queue/previous')" @click.prevent.stop="$store.dispatch('queue/previous')"
:disabled="!hasPrevious"> :disabled="!hasPrevious">
<i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" ></i> <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" ></i>
</span> </button>
<span <button
role="button"
v-if="!playing" v-if="!playing"
:title="labels.play" :title="labels.play"
:aria-label="labels.play" :aria-label="labels.play"
@click.prevent.stop="togglePlay" @click.prevent.stop="togglePlay"
class="control"> class="circular button control">
<i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']"></i> <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']"></i>
</span> </button>
<span <button
role="button"
v-else v-else
:title="labels.pause" :title="labels.pause"
:aria-label="labels.pause" :aria-label="labels.pause"
@click.prevent.stop="togglePlay" @click.prevent.stop="togglePlay"
class="control"> class="circular button control">
<i :class="['ui', 'big', 'pause', {'disabled': !currentTrack}, 'icon']"></i> <i :class="['ui', 'big', 'pause', {'disabled': !currentTrack}, 'icon']"></i>
</span> </button>
<span <button
role="button"
:title="labels.next" :title="labels.next"
:aria-label="labels.next" :aria-label="labels.next"
class="control" class="circular button control"
@click.prevent.stop="$store.dispatch('queue/next')" @click.prevent.stop="$store.dispatch('queue/next')"
:disabled="!hasNext"> :disabled="!hasNext">
<i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" ></i> <i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" ></i>
</span> </button>
</div> </div>
<div class="controls progress-controls queue-not-focused tablet-and-up small align-left"> <div class="controls progress-controls queue-not-focused tablet-and-up small align-left">
<div class="timer"> <div class="timer">
<template v-if="!isLoadingAudio"> <template v-if="!isLoadingAudio">
<span role="button" class="start" @click.stop.prevent="setCurrentTime(0)">{{currentTimeFormatted}}</span> <span class="start" @click.stop.prevent="setCurrentTime(0)">{{currentTimeFormatted}}</span>
| <span class="total">{{durationFormatted}}</span> | <span class="total">{{durationFormatted}}</span>
</template> </template>
<template v-else> <template v-else>
@ -111,102 +107,101 @@
<div class="controls queue-controls when-queue-focused align-right"> <div class="controls queue-controls when-queue-focused align-right">
<div class="group"> <div class="group">
<volume-control class="expandable" /> <volume-control class="expandable" />
<span <button
role="button" class="circular control button"
v-if="looping === 0" v-if="looping === 0"
:title="labels.loopingDisabled" :title="labels.loopingDisabled"
:aria-label="labels.loopingDisabled" :aria-label="labels.loopingDisabled"
@click.prevent.stop="$store.commit('player/looping', 1)" @click.prevent.stop="$store.commit('player/looping', 1)"
:disabled="!currentTrack"> :disabled="!currentTrack">
<i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']"></i> <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']"></i>
</span> </button>
<span <button
role="button" class="looping circular control button"
@click.prevent.stop="$store.commit('player/looping', 2)" @click.prevent.stop="$store.commit('player/looping', 2)"
:title="labels.loopingSingle" :title="labels.loopingSingle"
:aria-label="labels.loopingSingle" :aria-label="labels.loopingSingle"
v-if="looping === 1" v-if="looping === 1"
class="looping"
:disabled="!currentTrack"> :disabled="!currentTrack">
<i <i
class="repeat icon"> class="repeat icon">
<span class="ui circular tiny vibrant label">1</span> <span class="ui circular tiny vibrant label">1</span>
</i> </i>
</span> </button>
<span <button
role="button" class="looping circular control button"
:title="labels.loopingWhole" :title="labels.loopingWhole"
:aria-label="labels.loopingWhole" :aria-label="labels.loopingWhole"
v-if="looping === 2" v-if="looping === 2"
:disabled="!currentTrack" :disabled="!currentTrack"
class="looping"
@click.prevent.stop="$store.commit('player/looping', 0)"> @click.prevent.stop="$store.commit('player/looping', 0)">
<i <i
class="repeat icon"> class="repeat icon">
<span class="ui circular tiny vibrant label">&infin;</span> <span class="ui circular tiny vibrant label">&infin;</span>
</i> </i>
</span> </button>
<span <button
role="button" class="circular control button"
:disabled="queue.tracks.length === 0" :disabled="queue.tracks.length === 0"
:title="labels.shuffle" :title="labels.shuffle"
:aria-label="labels.shuffle" :aria-label="labels.shuffle"
@click.prevent.stop="shuffle()"> @click.prevent.stop="shuffle()">
<div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div> <div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
<i v-else :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']" ></i> <i v-else :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</span> </button>
</div> </div>
<div class="group"> <div class="group">
<div class="fake-dropdown"> <div class="fake-dropdown">
<span class="position control desktop-and-up" role="button" @click.stop="toggleMobilePlayer" aria-expanded="true"> <button class="position circular control button desktop-and-up" @click.stop="toggleMobilePlayer" aria-expanded="true">
<i class="stream icon"></i> <i class="stream icon"></i>
<translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}"> <translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
%{ index } of %{ length } %{ index } of %{ length }
</translate> </translate>
</span> </button>
<span class="position control tablet-and-below" role="button" @click.stop="switchTab"> <button class="position circular control button tablet-and-below" @click.stop="switchTab">
<i class="stream icon"></i> <i class="stream icon"></i>
<translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}"> <translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
%{ index } of %{ length } %{ index } of %{ length }
</translate> </translate>
</span> </button>
<span <button
class="control close-control desktop-and-up" class="circular control button close-control desktop-and-up"
v-if="$store.state.ui.queueFocused" v-if="$store.state.ui.queueFocused"
@click.stop="toggleMobilePlayer"> @click.stop="toggleMobilePlayer">
<i class="large down angle icon"></i> <i class="large down angle icon"></i>
</span> </button>
<span <button
class="control desktop-and-up" class="circular control button desktop-and-up"
v-else v-else
@click.stop="toggleMobilePlayer"> @click.stop="toggleMobilePlayer">
<i class="large up angle icon"></i> <i class="large up angle icon"></i>
</span> </button>
<span <button
class="control close-control tablet-and-below" class="circular control button close-control tablet-and-below"
v-if="$store.state.ui.queueFocused === 'player'" v-if="$store.state.ui.queueFocused === 'player'"
@click.stop="switchTab"> @click.stop="switchTab">
<i class="large up angle icon"></i> <i class="large up angle icon"></i>
</span> </button>
<span <button
class="control tablet-and-below" class="circular control button tablet-and-below"
v-if="$store.state.ui.queueFocused === 'queue'" v-if="$store.state.ui.queueFocused === 'queue'"
@click.stop="switchTab"> @click.stop="switchTab">
<i class="large down angle icon"></i> <i class="large down angle icon"></i>
</span> </button>
</div> </div>
<span <button
class="control close-control tablet-and-below" class="circular control button close-control tablet-and-below"
@click.stop="$store.commit('ui/queueFocused', null)"> @click.stop="$store.commit('ui/queueFocused', null)">
<i class="x icon"></i> <i class="x icon"></i>
</span> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<GlobalEvents <GlobalEvents
@keydown.p.prevent.exact="togglePlay" @keydown.p.prevent.exact="togglePlay"
@keydown.esc.prevent.exact="$store.commit('ui/queueFocused', null)"
@keydown.ctrl.shift.left.prevent.exact="previous" @keydown.ctrl.shift.left.prevent.exact="previous"
@keydown.ctrl.shift.right.prevent.exact="next" @keydown.ctrl.shift.right.prevent.exact="next"
@keydown.shift.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)" @keydown.shift.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
@ -732,7 +727,7 @@ export default {
title: this.currentTrack.title, title: this.currentTrack.title,
artist: this.currentTrack.artist.name, artist: this.currentTrack.artist.name,
} }
if (this.currentTrack.album) { if (this.currentTrack.album && this.currentTrack.album.cover) {
metadata.album = this.currentTrack.album.title metadata.album = this.currentTrack.album.title
metadata.artwork = [ metadata.artwork = [
{ src: this.currentTrack.album.cover.urls.original, sizes: '96x96', type: 'image/png' }, { src: this.currentTrack.album.cover.urls.original, sizes: '96x96', type: 'image/png' },

4
front/src/components/audio/VolumeControl.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave"> <button class="circular control button" :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
<span <span
role="button" role="button"
v-if="sliderVolume === 0" v-if="sliderVolume === 0"
@ -34,7 +34,7 @@
max="1" max="1"
v-model="sliderVolume" /> v-model="sliderVolume" />
</div> </div>
</span> </button class="circular control">
</template> </template>
<script> <script>
import { mapState, mapGetters, mapActions } from "vuex" import { mapState, mapGetters, mapActions } from "vuex"

8
front/src/components/common/AttachmentInput.vue
View File

@ -18,16 +18,16 @@
</div> </div>
<div class="eleven wide column"> <div class="eleven wide column">
<div class="file-input"> <div class="file-input">
<label class="ui basic button" :for="attachmentId"> <label :for="attachmentId">
<translate translate-context="*/*/*">Upload New Picture…</translate> <translate translate-context="*/*/*">Upload New Picture…</translate>
</label> </label>
<input class="ui hidden input" ref="attachment" type="file" :id="attachmentId" accept="image/x-png,image/jpeg" @change="submit" /> <input class="ui input" ref="attachment" type="file" :id="attachmentId" accept="image/x-png,image/jpeg" @change="submit" />
</div> </div>
<div class="ui very small hidden divider"></div> <div class="ui very small hidden divider"></div>
<p><translate translate-context="Content/*/Paragraph">PNG or JPG. Dimensions should be between 1400x1400px and 3000x3000px. Maximum file size allowed is 5MB.</translate></p> <p><translate translate-context="Content/*/Paragraph">PNG or JPG. Dimensions should be between 1400x1400px and 3000x3000px. Maximum file size allowed is 5MB.</translate></p>
<div class="ui basic tiny button" v-if="value" @click.stop.prevent="remove(value)"> <button class="ui basic tiny button" v-if="value" @click.stop.prevent="remove(value)">
<translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate> <translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate>
</div> </button>
<div v-if="isLoading" class="ui active inverted dimmer"> <div v-if="isLoading" class="ui active inverted dimmer">
<div class="ui indeterminate text loader"> <div class="ui indeterminate text loader">
<translate translate-context="Content/*/*/Noun">Uploading file…</translate> <translate translate-context="Content/*/*/Noun">Uploading file…</translate>

4
front/src/components/common/DangerousButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div @click="showModal = true" :class="[{disabled: disabled}]" role="button" :disabled="disabled"> <button @click="showModal = true" :class="[{disabled: disabled}]" :disabled="disabled">
<slot></slot> <slot></slot>
<modal class="small" :show.sync="showModal"> <modal class="small" :show.sync="showModal">
@ -24,7 +24,7 @@
</button> </button>
</div> </div>
</modal> </modal>
</div> </button>
</template> </template>
<script> <script>

7
front/src/components/federation/FetchButton.vue
View File

@ -82,12 +82,11 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div role="button" class="ui basic cancel button"> <button class="ui basic cancel button">
<translate translate-context="*/*/Button.Label/Verb">Close</translate> <translate translate-context="*/*/Button.Label/Verb">Close</translate>
</div> </button @click.prevent="showModal = false; $emit('refresh')" class="ui confirm success button" v-if="fetch && fetch.status === 'finished'">
<div role="button" @click="showModal = false; $emit('refresh')" class="ui confirm success button" v-if="fetch && fetch.status === 'finished'">
<translate translate-context="*/*/Button.Label/Verb">Close and reload page</translate> <translate translate-context="*/*/Button.Label/Verb">Close and reload page</translate>
</div> </button>
</div> </div>
</modal> </modal>
</div> </div>

4
front/src/components/forms/PasswordInput.vue
View File

@ -7,9 +7,9 @@
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
:id="fieldId" :id="fieldId"
:value="value"> :value="value">
<span @click="showPassword = !showPassword" :title="labels.title" class="ui icon button"> <button @click.prevent="showPassword = !showPassword" :title="labels.title" class="ui icon button">
<i class="eye icon"></i> <i class="eye icon"></i>
</span> </button>
<button v-if="copyButton" @click.prevent="copy" class="ui icon button" :title="labels.copy"> <button v-if="copyButton" @click.prevent="copy" class="ui icon button" :title="labels.copy">
<i class="copy icon"></i> <i class="copy icon"></i>
</button> </button>

8
front/src/components/library/AlbumDropdown.vue
View File

@ -12,12 +12,12 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic deny button"> <button class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
<div role="button" class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}"> <button class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
<i class="ellipsis vertical icon"></i> <i class="ellipsis vertical icon"></i>
<div class="menu"> <div class="menu">
<div <div
@ -78,7 +78,7 @@
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</span> </span>
</template> </template>
<script> <script>

14
front/src/components/library/ArtistBase.vue
View File

@ -45,26 +45,26 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui deny button"> <button class="ui deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
<div class="ui buttons"> <div class="ui buttons">
<button class="ui button" @click="$refs.dropdown.click()"> <button class="ui button" @click="$refs.dropdown.click()">
<translate translate-context="*/*/Button.Label/Noun">More…</translate> <translate translate-context="*/*/Button.Label/Noun">More…</translate>
</button> </button>
<div class="ui floating dropdown icon button" ref="dropdown" v-dropdown> <button class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<div <button
role="button" role="button"
v-if="publicLibraries.length > 0" v-if="publicLibraries.length > 0"
@click="showEmbedModal = !showEmbedModal" @click.prevent="showEmbedModal = !showEmbedModal"
class="basic item"> class="basic item">
<i class="code icon"></i> <i class="code icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Embed</translate> <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
</div> </button>
<a :href="wikipediaUrl" target="_blank" rel="noreferrer noopener" class="basic item"> <a :href="wikipediaUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="wikipedia w icon"></i> <i class="wikipedia w icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate> <translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
@ -108,7 +108,7 @@
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
</div> </div>
</div> </div>

4
front/src/components/library/ImportStatusModal.vue
View File

@ -77,9 +77,9 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui deny button"> <button class="ui deny button">
<translate translate-context="*/*/Button.Label/Verb">Close</translate> <translate translate-context="*/*/Button.Label/Verb">Close</translate>
</div> </button>
</div> </div>
</modal> </modal>
</template> </template>

8
front/src/components/library/TrackBase.vue
View File

@ -36,12 +36,12 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic deny button"> <button class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
<div class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}"> <button class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
<i class="ellipsis vertical icon"></i> <i class="ellipsis vertical icon"></i>
<div class="menu" style="right: 0; left: auto"> <div class="menu" style="right: 0; left: auto">
<div <div
@ -102,7 +102,7 @@
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
</div> </div>
</div> </div>

4
front/src/components/library/radios/Filter.vue
View File

@ -51,9 +51,9 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui deny button"> <button class="ui deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
</td> </td>

4
front/src/components/manage/moderation/InstancePolicyModal.vue
View File

@ -31,9 +31,9 @@
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui deny button"> <button class="ui deny button">
<translate translate-context="*/*/Button.Label/Verb">Close</translate> <translate translate-context="*/*/Button.Label/Verb">Close</translate>
</div> </button>
</div> </div>
</modal> </modal>

8
front/src/components/notifications/NotificationRow.vue
View File

@ -9,14 +9,14 @@
</router-link> </router-link>
<template v-else v-html="notificationData.message"></template> <template v-else v-html="notificationData.message"></template>
<template v-if="notificationData.acceptFollow">&nbsp; <template v-if="notificationData.acceptFollow">&nbsp;
<div @click="handleAction(notificationData.acceptFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.acceptFollow.buttonClass || '', 'button']"> <button @click="handleAction(notificationData.acceptFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.acceptFollow.buttonClass || '', 'button']">
<i v-if="notificationData.acceptFollow.icon" :class="[notificationData.acceptFollow.icon, 'icon']" /> <i v-if="notificationData.acceptFollow.icon" :class="[notificationData.acceptFollow.icon, 'icon']" />
{{ notificationData.acceptFollow.label }} {{ notificationData.acceptFollow.label }}
</div> </button>
<div @click="handleAction(notificationData.rejectFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.rejectFollow.buttonClass || '', 'button']"> <button @click="handleAction(notificationData.rejectFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.rejectFollow.buttonClass || '', 'button']">
<i v-if="notificationData.rejectFollow.icon" :class="[notificationData.rejectFollow.icon, 'icon']" /> <i v-if="notificationData.rejectFollow.icon" :class="[notificationData.rejectFollow.icon, 'icon']" />
{{ notificationData.rejectFollow.label }} {{ notificationData.rejectFollow.label }}
</div> </button>
</template> </template>
</td> </td>
<td><human-date :date="item.activity.creation_date" /></td> <td><human-date :date="item.activity.creation_date" /></td>

10
front/src/components/playlists/Editor.vue
View File

@ -33,7 +33,7 @@
</template> </template>
</div> </div>
<div class="ui bottom attached segment"> <div class="ui bottom attached segment">
<div <button
@click="insertMany(queueTracks, false)" @click="insertMany(queueTracks, false)"
:disabled="queueTracks.length === 0" :disabled="queueTracks.length === 0"
:class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']" :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
@ -45,7 +45,7 @@
:translate-params="{count: queueTracks.length}"> :translate-params="{count: queueTracks.length}">
Insert from queue (%{ count } track) Insert from queue (%{ count } track)
</translate> </translate>
</div> </button>
<dangerous-button :disabled="plts.length === 0" class="ui labeled right floated danger icon button" :action="clearPlaylist"> <dangerous-button :disabled="plts.length === 0" class="ui labeled right floated danger icon button" :action="clearPlaylist">
<i class="eraser icon"></i> <translate translate-context="*/Playlist/Button.Label/Verb">Clear playlist</translate> <i class="eraser icon"></i> <translate translate-context="*/Playlist/Button.Label/Verb">Clear playlist</translate>
@ -64,7 +64,7 @@
<tr v-for="(plt, index) in plts" :key="`${index}-${plt.track.id}`"> <tr v-for="(plt, index) in plts" :key="`${index}-${plt.track.id}`">
<td class="left aligned">{{ plt.index + 1}}</td> <td class="left aligned">{{ plt.index + 1}}</td>
<td class="center aligned"> <td class="center aligned">
<img alt="" class="ui mini image" v-if="plt.track.album && plt.track.album.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"> <img alt="" class="ui mini image" v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)">
<img alt="" class="ui mini image" v-else src="../../assets/audio/default-cover.png"> <img alt="" class="ui mini image" v-else src="../../assets/audio/default-cover.png">
</td> </td>
<td colspan="4"> <td colspan="4">
@ -72,7 +72,9 @@
{{ plt.track.artist.name }} {{ plt.track.artist.name }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<i @click.stop="removePlt(index)" class="circular danger trash icon"></i> <button class="ui circular danger basic icon button">
<i @click.stop="removePlt(index)" class="trash icon"></i>
</button>
</td> </td>
</tr> </tr>
</draggable> </draggable>

2
front/src/components/playlists/PlaylistModal.vue
View File

@ -100,7 +100,7 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div> <button class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></button>
</div> </div>
</modal> </modal>
</template> </template>

7
front/src/main.js
View File

@ -66,6 +66,13 @@ Vue.directive('title', function (el, binding) {
Vue.directive('dropdown', function (el, binding) { Vue.directive('dropdown', function (el, binding) {
jQuery(el).dropdown({ jQuery(el).dropdown({
selectOnKeydown: false, selectOnKeydown: false,
action: function (text, value, $el) {
// used to ensure focusing the dropdown and clicking via keyboard
// works as expected
let button = $el[0]
button.click()
jQuery(el).find('.ui.dropdown').dropdown('hide')
},
...(binding.value || {}) ...(binding.value || {})
}) })
}) })

5
front/src/style/components/_play_button.scss
View File

@ -2,4 +2,9 @@
button.item { button.item {
width: 100%; width: 100%;
} }
> .floating.dropdown {
background: transparent;
padding: 0;
border: none;
}
} }

11
front/src/style/components/_player.scss
View File

@ -192,9 +192,6 @@
border: none; border: none;
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
&:focus {
box-shadow: none;
}
} }
.fake-dropdown { .fake-dropdown {
@ -204,13 +201,19 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
min-width: 10em; min-width: 10em;
> * { > .control.button {
padding: 0.5em; padding: 0.5em;
} }
.position.control { .position.control {
padding-right: 1em; padding-right: 1em;
flex-grow: 1; flex-grow: 1;
padding-left: 0;
i.stream.icon {
position: relative;
top: -2px;
left: -2px;
}
} }
.angle.icon { .angle.icon {
margin-right: 0; margin-right: 0;

1
front/src/style/components/_volume_control.scss
View File

@ -4,6 +4,7 @@
align-items: center; align-items: center;
position: relative; position: relative;
overflow: visible; overflow: visible;
top: 3px;
input { input {
max-width: 5.5em; max-width: 5.5em;
height: 4px; height: 4px;

4
front/src/views/admin/ChannelDetail.vue
View File

@ -36,7 +36,7 @@
<i class="info icon"></i> <i class="info icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
</router-link> </router-link>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -56,7 +56,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<dangerous-button <dangerous-button

4
front/src/views/admin/library/AlbumDetail.vue
View File

@ -37,7 +37,7 @@
<i class="info icon"></i> <i class="info icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
</router-link> </router-link>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -61,7 +61,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<router-link <router-link

4
front/src/views/admin/library/ArtistDetail.vue
View File

@ -36,7 +36,7 @@
<i class="info icon"></i> <i class="info icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
</router-link> </router-link>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -60,7 +60,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<router-link <router-link

4
front/src/views/admin/library/LibraryDetail.vue
View File

@ -34,7 +34,7 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -50,7 +50,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<dangerous-button <dangerous-button

4
front/src/views/admin/library/TagDetail.vue
View File

@ -21,7 +21,7 @@
<i class="info icon"></i> <i class="info icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
</router-link> </router-link>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -33,7 +33,7 @@
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<dangerous-button <dangerous-button

4
front/src/views/admin/library/TrackDetail.vue
View File

@ -37,7 +37,7 @@
<i class="info icon"></i> <i class="info icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
</router-link> </router-link>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -61,7 +61,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<router-link <router-link

4
front/src/views/admin/library/UploadDetail.vue
View File

@ -35,7 +35,7 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a <a
@ -51,7 +51,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<a class="ui labeled icon button" v-if="object.audio_file" :href="$store.getters['instance/absoluteUrl'](object.audio_file)" target="_blank" rel="noopener noreferrer"> <a class="ui labeled icon button" v-if="object.audio_file" :href="$store.getters['instance/absoluteUrl'](object.audio_file)" target="_blank" rel="noopener noreferrer">

4
front/src/views/admin/moderation/AccountsDetail.vue
View File

@ -45,7 +45,7 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
</a> </a>
<div class="ui floating dropdown icon button" v-dropdown> <button class="ui floating dropdown icon button" v-dropdown>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<a class="basic item" :href="object.url || object.fid" target="_blank" rel="noopener noreferrer"> <a class="basic item" :href="object.url || object.fid" target="_blank" rel="noopener noreferrer">
@ -53,7 +53,7 @@
<translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp; <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
</a> </a>
</div> </div>
</div> </button>
</div> </div>
</div> </div>
</div> </div>

4
front/src/views/auth/ProfileBase.vue
View File

@ -6,7 +6,7 @@
<div class="ui head vertical stripe segment container"> <div class="ui head vertical stripe segment container">
<div class="ui stackable grid" v-if="object"> <div class="ui stackable grid" v-if="object">
<div class="ui five wide column"> <div class="ui five wide column">
<div class="ui pointing dropdown icon small basic right floated button" ref="dropdown" v-dropdown="{direction: 'downward'}" style="position: absolute; right: 1em; top: 1em;"> <button class="ui pointing dropdown icon small basic right floated button" ref="dropdown" v-dropdown="{direction: 'downward'}" style="position: absolute; right: 1em; top: 1em;">
<i class="ellipsis vertical icon"></i> <i class="ellipsis vertical icon"></i>
<div class="menu"> <div class="menu">
<div <div
@ -24,7 +24,7 @@
<translate translate-context="Content/Moderation/Link">Open in moderation interface</translate> <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
</router-link> </router-link>
</div> </div>
</div> </button>
<h1 class="ui center aligned icon header"> <h1 class="ui center aligned icon header">
<i v-if="!object.icon" class="circular inverted user success icon"></i> <i v-if="!object.icon" class="circular inverted user success icon"></i>
<img alt="" class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)" /> <img alt="" class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)" />

6
front/src/views/auth/ProfileOverview.vue
View File

@ -13,7 +13,7 @@
<h2 class="ui with-actions header"> <h2 class="ui with-actions header">
<translate translate-context="*/*/*">Channels</translate> <translate translate-context="*/*/*">Channels</translate>
<div class="actions" v-if="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"> <div class="actions" v-if="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername">
<a @click.stop.prevent="showCreateModal = true"> <a @click.stop.prevent="showCreateModal = true" href="">
<i class="plus icon"></i> <i class="plus icon"></i>
<translate translate-context="Content/Profile/Button">Add new</translate> <translate translate-context="Content/Profile/Button">Add new</translate>
</a> </a>
@ -53,9 +53,9 @@
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
</div> </div>
<div class="actions"> <div class="actions">
<div v-if="step === 1" class="ui basic deny button"> <button v-if="step === 1" class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
<button v-if="step > 1" class="ui basic button" @click.stop.prevent="step -= 1"> <button v-if="step > 1" class="ui basic button" @click.stop.prevent="step -= 1">
<translate translate-context="*/*/Button.Label/Verb">Previous step</translate> <translate translate-context="*/*/Button.Label/Verb">Previous step</translate>
</button> </button>

16
front/src/views/channels/DetailBase.vue
View File

@ -68,12 +68,12 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic deny button"> <button class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
<div class="ui right floated pointing dropdown icon small basic button" ref="dropdown" v-dropdown="{direction: 'downward'}"> <button class="ui right floated pointing dropdown icon small basic button" ref="dropdown" v-dropdown="{direction: 'downward'}">
<i class="ellipsis vertical icon"></i> <i class="ellipsis vertical icon"></i>
<div class="menu"> <div class="menu">
<div <div
@ -122,7 +122,7 @@
</router-link> </router-link>
</template> </template>
</div> </div>
</div> </button>
</div> </div>
</div> </div>
<h1 class="ui header"> <h1 class="ui header">
@ -166,9 +166,9 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic deny button"> <button class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
<modal :show.sync="showEditModal" v-if="isOwner"> <modal :show.sync="showEditModal" v-if="isOwner">
@ -187,9 +187,9 @@
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui left floated basic deny button"> <button class="ui left floated basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
<button @click.stop="$refs.editForm.submit" :class="['ui', 'primary', 'confirm', {loading: edit.isLoading}, 'button']" :disabled="!edit.submittable"> <button @click.stop="$refs.editForm.submit" :class="['ui', 'primary', 'confirm', {loading: edit.isLoading}, 'button']" :disabled="!edit.submittable">
<translate translate-context="*/Channels/Button.Label">Update channel</translate> <translate translate-context="*/Channels/Button.Label">Update channel</translate>
</button> </button>

4
front/src/views/channels/SubscriptionsList.vue
View File

@ -23,9 +23,9 @@
:redirect="false"></remote-search-form> :redirect="false"></remote-search-form>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic deny button"> <button class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
<button form="remote-search" type="submit" class="ui primary button"> <button form="remote-search" type="submit" class="ui primary button">
<i class="bookmark icon"></i> <i class="bookmark icon"></i>
<translate translate-context="*/*/*/Verb">Subscribe</translate> <translate translate-context="*/*/*/Verb">Subscribe</translate>

2
front/src/views/content/libraries/Home.vue
View File

@ -9,7 +9,7 @@
<p v-if="libraries.length == 0"> <p v-if="libraries.length == 0">
<translate translate-context="Content/Library/Paragraph">Looks like you don't have a library, it's time to create one.</translate> <translate translate-context="Content/Library/Paragraph">Looks like you don't have a library, it's time to create one.</translate>
</p> </p>
<a :aria-expanded="!hiddenForm" @click="hiddenForm = !hiddenForm"> <a :aria-expanded="!hiddenForm" @click="hiddenForm = !hiddenForm" href="">
<i class="plus icon" v-if="hiddenForm" /> <i class="plus icon" v-if="hiddenForm" />
<i class="minus icon" v-else /> <i class="minus icon" v-else />
<translate translate-context="Content/Library/Link/Verb">Create a new library</translate> <translate translate-context="Content/Library/Link/Verb">Create a new library</translate>

19
front/src/views/content/remote/Card.vue
View File

@ -5,17 +5,16 @@
<router-link :to="{name: 'library.detail', params: {id: library.uuid}}"> <router-link :to="{name: 'library.detail', params: {id: library.uuid}}">
{{ library.name }} {{ library.name }}
</router-link> </router-link>
<div class="ui right floated dropdown"> <div class="ui right floated dropdown" v-dropdown>
<i class="ellipsis vertical large icon nomargin"></i> <i class="ellipsis vertical large icon nomargin"></i>
<div class="menu"> <div class="menu">
<div <button
role="button"
v-for="obj in getReportableObjs({library, account: library.actor})" v-for="obj in getReportableObjs({library, account: library.actor})"
:key="obj.target.type + obj.target.id" :key="obj.target.type + obj.target.id"
class="item basic" class="item basic"
@click.stop.prevent="$store.dispatch('moderation/report', obj.target)"> @click.stop.prevent="$store.dispatch('moderation/report', obj.target)">
<i class="share icon" /> {{ obj.label }} <i class="share icon" /> {{ obj.label }}
</div> </button>
</div> </div>
</div> </div>
<span <span
@ -156,18 +155,6 @@ export default {
latestScan: this.library.latest_scan, latestScan: this.library.latest_scan,
} }
}, },
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: { computed: {
labels () { labels () {
let me = this.$pgettext('Content/Library/Card.Help text', 'This library is private and your approval from its owner is needed to access its content') let me = this.$pgettext('Content/Library/Card.Help text', 'This library is private and your approval from its owner is needed to access its content')

4
front/src/views/library/DetailBase.vue
View File

@ -4,7 +4,7 @@
<div v-if="isLoading" class="ui centered active inline loader"></div> <div v-if="isLoading" class="ui centered active inline loader"></div>
<div class="ui stackable grid" v-else-if="object"> <div class="ui stackable grid" v-else-if="object">
<div class="ui five wide column"> <div class="ui five wide column">
<div class="ui pointing dropdown icon small basic right floated button" ref="dropdown" v-dropdown="{direction: 'downward'}" style="position: absolute; right: 1em; top: 1em;"> <button class="ui pointing dropdown icon small basic right floated button" ref="dropdown" v-dropdown="{direction: 'downward'}" style="position: absolute; right: 1em; top: 1em;">
<i class="ellipsis vertical icon"></i> <i class="ellipsis vertical icon"></i>
<div class="menu"> <div class="menu">
<div <div
@ -22,7 +22,7 @@
<translate translate-context="Content/Moderation/Link">Open in moderation interface</translate> <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
</router-link> </router-link>
</div> </div>
</div> </button>
<h1 class="ui header"> <h1 class="ui header">
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<div class="ellipsis content"> <div class="ellipsis content">

8
front/src/views/library/Edit.vue
View File

@ -38,12 +38,12 @@
</span> </span>
</td> </td>
<td> <td>
<div @click="updateApproved(follow, true)" :class="['ui', 'mini', 'icon', 'labeled', 'success', 'button']" v-if="follow.approved === null || follow.approved === false"> <button @click="updateApproved(follow, true)" :class="['ui', 'mini', 'icon', 'labeled', 'success', 'button']" v-if="follow.approved === null || follow.approved === false">
<i class="ui check icon"></i> <translate translate-context="Content/Library/Button.Label">Accept</translate> <i class="ui check icon"></i> <translate translate-context="Content/Library/Button.Label">Accept</translate>
</div> </button>
<div @click="updateApproved(follow, false)" :class="['ui', 'mini', 'icon', 'labeled', 'danger', 'button']" v-if="follow.approved === null || follow.approved === true"> <button @click="updateApproved(follow, false)" :class="['ui', 'mini', 'icon', 'labeled', 'danger', 'button']" v-if="follow.approved === null || follow.approved === true">
<i class="ui x icon"></i> <translate translate-context="Content/Library/Button.Label">Reject</translate> <i class="ui x icon"></i> <translate translate-context="Content/Library/Button.Label">Reject</translate>
</div> </button>
</td> </td>
</tr> </tr>

4
front/src/views/playlists/Detail.vue
View File

@ -58,9 +58,9 @@
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<div class="ui basic deny button"> <button class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div> </button>
</div> </div>
</modal> </modal>
</section> </section>