Skip to content
Snippets Groups Projects
Commit 1cc5ed88 authored by Agate's avatar Agate :speech_balloon:
Browse files

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

parent 945b54bc
No related branches found
No related tags found
No related merge requests found
Showing
with 123 additions and 107 deletions
...@@ -194,7 +194,7 @@ ...@@ -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>
......
...@@ -9,10 +9,9 @@ ...@@ -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 @@ ...@@ -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 { ...@@ -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')
}, },
}) })
......
...@@ -11,7 +11,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 { ...@@ -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' },
......
<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 @@ ...@@ -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"
......
...@@ -18,16 +18,16 @@ ...@@ -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>
......
<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 @@ ...@@ -24,7 +24,7 @@
</button> </button>
</div> </div>
</modal> </modal>
</div> </button>
</template> </template>
<script> <script>
......
...@@ -82,12 +82,11 @@ ...@@ -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>
......
...@@ -7,9 +7,9 @@ ...@@ -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>
......
...@@ -12,12 +12,12 @@ ...@@ -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 @@ ...@@ -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>
......
...@@ -45,26 +45,26 @@ ...@@ -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 @@ ...@@ -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>
......
...@@ -77,9 +77,9 @@ ...@@ -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>
......
...@@ -36,12 +36,12 @@ ...@@ -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 @@ ...@@ -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>
......
...@@ -51,9 +51,9 @@ ...@@ -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>
......
...@@ -31,9 +31,9 @@ ...@@ -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>
......
...@@ -9,14 +9,14 @@ ...@@ -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>
......
...@@ -33,7 +33,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
......
...@@ -100,7 +100,7 @@ ...@@ -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>
......
...@@ -66,6 +66,13 @@ Vue.directive('title', function (el, binding) { ...@@ -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 || {})
}) })
}) })
......
...@@ -2,4 +2,9 @@ ...@@ -2,4 +2,9 @@
button.item { button.item {
width: 100%; width: 100%;
} }
> .floating.dropdown {
background: transparent;
padding: 0;
border: none;
}
} }
...@@ -192,9 +192,6 @@ ...@@ -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 @@ ...@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment