Fixed some unfocusable links/buttons

This commit is contained in:
Agate 2020-08-11 14:07:06 +02:00
parent 541e3f0e7d
commit d4a256b2f9
21 changed files with 104 additions and 97 deletions

View File

@ -72,7 +72,7 @@
</div> </div>
<div class="progress"> <div class="progress">
<template v-if="!isLoadingAudio"> <template v-if="!isLoadingAudio">
<span role="button" class="left floated timer start" @click="setCurrentTime(0)">{{currentTimeFormatted}}</span> <a href="" :aria-label="labels.restart" class="left floated timer discrete start" @click.prevent="setCurrentTime(0)">{{currentTimeFormatted}}</a>
<span class="right floated timer total">{{durationFormatted}}</span> <span class="right floated timer total">{{durationFormatted}}</span>
</template> </template>
<template v-else> <template v-else>
@ -272,7 +272,8 @@ export default {
return { return {
queue: this.$pgettext('*/*/*', 'Queue'), queue: this.$pgettext('*/*/*', 'Queue'),
duration: this.$pgettext('*/*/*', 'Duration'), duration: this.$pgettext('*/*/*', 'Duration'),
addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…') addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…'),
restart: this.$pgettext('*/*/*', 'Restart track'),
} }
}, },
timeLeft () { timeLeft () {

View File

@ -90,10 +90,10 @@
</template> </template>
<div class="item collapse-button-wrapper"> <div class="item collapse-button-wrapper">
<span <button
@click="isCollapsed = !isCollapsed" @click="isCollapsed = !isCollapsed"
:class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']"> :class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']">
<i class="sidebar icon"></i></span> <i class="sidebar icon"></i></button>
</div> </div>
</nav> </nav>
</header> </header>
@ -115,7 +115,7 @@
<section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu"> <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu">
<nav class="ui vertical large fluid inverted menu" role="navigation" :aria-label="labels.mainMenu"> <nav class="ui vertical large fluid inverted menu" role="navigation" :aria-label="labels.mainMenu">
<div :class="[{collapsed: !exploreExpanded}, 'collaspable item']"> <div :class="[{collapsed: !exploreExpanded}, 'collaspable item']">
<h2 class="header" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true"> <h2 class="header" role="button" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
<translate translate-context="*/*/*/Verb">Explore</translate> <translate translate-context="*/*/*/Verb">Explore</translate>
<i class="angle right icon" v-if="!exploreExpanded"></i> <i class="angle right icon" v-if="!exploreExpanded"></i>
</h2> </h2>
@ -128,7 +128,7 @@
</div> </div>
</div> </div>
<div :class="[{collapsed: !myLibraryExpanded}, 'collaspable item']" v-if="$store.state.auth.authenticated"> <div :class="[{collapsed: !myLibraryExpanded}, 'collaspable item']" v-if="$store.state.auth.authenticated">
<h3 class="header" @click="myLibraryExpanded = true" tabindex="0" @focus="myLibraryExpanded = true"> <h3 class="header" role="button" @click="myLibraryExpanded = true" tabindex="0" @focus="myLibraryExpanded = true">
<translate translate-context="*/*/*/Noun">My Library</translate> <translate translate-context="*/*/*/Noun">My Library</translate>
<i class="angle right icon" v-if="!myLibraryExpanded"></i> <i class="angle right icon" v-if="!myLibraryExpanded"></i>
</h3> </h3>

View File

@ -80,15 +80,15 @@
<td> <td>
<i <i
:disabled="idx === 0" :disabled="idx === 0"
@click="move(idx, -1)" rel="button" @click="move(idx, -1)" role="button"
:title="labels.up" :title="labels.up"
:class="['up', 'arrow', {disabled: idx === 0}, 'icon']"></i> :class="['up', 'arrow', {disabled: idx === 0}, 'icon']"></i>
<i <i
:disabled="idx >= local.fields.length - 1" :disabled="idx >= local.fields.length - 1"
@click="move(idx, 1)" rel="button" @click="move(idx, 1)" role="button"
:title="labels.down" :title="labels.down"
:class="['down', 'arrow', {disabled: idx >= local.fields.length - 1}, 'icon']"></i> :class="['down', 'arrow', {disabled: idx >= local.fields.length - 1}, 'icon']"></i>
<i @click="remove(idx)" rel="button" :title="labels.delete" class="x icon"></i> <i @click="remove(idx)" role="button" :title="labels.delete" class="x icon"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>

View File

@ -48,13 +48,13 @@
</p> </p>
<div :aria-label="labels.performAction" slot="modal-confirm"><translate translate-context="Modal/*/Button.Label/Short, Verb">Launch</translate></div> <div :aria-label="labels.performAction" slot="modal-confirm"><translate translate-context="Modal/*/Button.Label/Short, Verb">Launch</translate></div>
</dangerous-button> </dangerous-button>
<div <button
v-else v-else
@click="launchAction" @click="launchAction"
:disabled="checked.length === 0" :disabled="checked.length === 0"
:aria-label="labels.performAction" :aria-label="labels.performAction"
:class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"> :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
<translate translate-context="Content/*/Button.Label/Short, Verb">Go</translate></div> <translate translate-context="Content/*/Button.Label/Short, Verb">Go</translate></button>
</div> </div>
<div class="count field"> <div class="count field">
<translate translate-context="Content/*/Paragraph" <translate translate-context="Content/*/Paragraph"
@ -76,7 +76,7 @@
%{ count } on %{ total } selected %{ count } on %{ total } selected
</translate> </translate>
<template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length"> <template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
<a @click="selectAll = true" v-if="!selectAll"> <a @click.prevent="selectAll = true" v-if="!selectAll" href="">
<translate translate-context="Content/*/Link/Verb" <translate translate-context="Content/*/Link/Verb"
key="3" key="3"
:translate-n="objectsData.count" :translate-n="objectsData.count"
@ -85,7 +85,7 @@
Select all %{ total } elements Select all %{ total } elements
</translate> </translate>
</a> </a>
<a @click="selectAll = false" v-else> <a @click.prevent="selectAll = false" v-else href="">
<translate translate-context="Content/*/Link/Verb" key="4">Select only current page</translate> <translate translate-context="Content/*/Link/Verb" key="4">Select only current page</translate>
</a> </a>
</template> </template>

View File

@ -4,10 +4,10 @@
<div v-html="html"></div> <div v-html="html"></div>
<template v-if="isTruncated"> <template v-if="isTruncated">
<div class="ui small hidden divider"></div> <div class="ui small hidden divider"></div>
<a @click.stop.prevent="showMore = true" v-if="showMore === false"> <a href="" @click.stop.prevent="showMore = true" v-if="showMore === false">
<translate translate-context="*/*/Button,Label">Show more</translate> <translate translate-context="*/*/Button,Label">Show more</translate>
</a> </a>
<a @click.stop.prevent="showMore = false" v-else="showMore === true"> <a href="" @click.stop.prevent="showMore = false" v-else="showMore === true">
<translate translate-context="*/*/Button,Label">Show less</translate> <translate translate-context="*/*/Button,Label">Show less</translate>
</a> </a>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="component-file-upload"> <div class="component-file-upload">
<div class="ui top attached tabular menu"> <div class="ui top attached tabular menu">
<a :class="['item', {active: currentTab === 'summary'}]" @click="currentTab = 'summary'"><translate translate-context="Content/Library/Tab.Title/Short">Summary</translate></a> <a href="" :class="['item', {active: currentTab === 'summary'}]" @click.prevent="currentTab = 'summary'"><translate translate-context="Content/Library/Tab.Title/Short">Summary</translate></a>
<a :class="['item', {active: currentTab === 'uploads'}]" @click="currentTab = 'uploads'"> <a href="" :class="['item', {active: currentTab === 'uploads'}]" @click.prevent="currentTab = 'uploads'">
<translate translate-context="Content/Library/Tab.Title/Short">Uploading</translate> <translate translate-context="Content/Library/Tab.Title/Short">Uploading</translate>
<div v-if="files.length === 0" class="ui label"> <div v-if="files.length === 0" class="ui label">
0 0
@ -14,7 +14,7 @@
{{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }} {{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
</div> </div>
</a> </a>
<a :class="['item', {active: currentTab === 'processing'}]" @click="currentTab = 'processing'"> <a href="" :class="['item', {active: currentTab === 'processing'}]" @click.prevent="currentTab = 'processing'">
<translate translate-context="Content/Library/Tab.Title/Short">Processing</translate> <translate translate-context="Content/Library/Tab.Title/Short">Processing</translate>
<div v-if="processableFiles === 0" class="ui label"> <div v-if="processableFiles === 0" class="ui label">
0 0

View File

@ -35,12 +35,13 @@
</div> </div>
</td> </td>
<td> <td>
<span <a
@click="showCandidadesModal = !showCandidadesModal" href=""
@click.prevent="showCandidadesModal = !showCandidadesModal"
v-if="checkResult" v-if="checkResult"
:class="['ui', {'success': checkResult.candidates.count > 10}, 'label']"> :class="['ui', {'success': checkResult.candidates.count > 10}, 'label']">
{{ checkResult.candidates.count }} tracks matching filter {{ checkResult.candidates.count }} tracks matching filter
</span> </a>
<modal v-if="checkResult" :show.sync="showCandidadesModal"> <modal v-if="checkResult" :show.sync="showCandidadesModal">
<h4 class="header"> <h4 class="header">
<translate translate-context="Popup/Radio/Title/Noun">Tracks matching filter</translate> <translate translate-context="Popup/Radio/Title/Noun">Tracks matching filter</translate>

View File

@ -62,7 +62,7 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<span class="visually-hidden">{{ labels.openModeration }}</span> <span class="visually-hidden">{{ labels.openModeration }}</span>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('account', scope.obj.attributed_to.full_username)">{{ scope.obj.attributed_to.preferred_username }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('account', scope.obj.attributed_to.full_username)">{{ scope.obj.attributed_to.preferred_username }}</a>
</td> </td>
<td> <td>
<template v-if="!scope.obj.is_local"> <template v-if="!scope.obj.is_local">
@ -70,12 +70,12 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<span class="visually-hidden">{{ labels.openModeration }}</span> <span class="visually-hidden">{{ labels.openModeration }}</span>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">{{ scope.obj.attributed_to.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)">{{ scope.obj.attributed_to.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
</span> </a>
</td> </td>
<td> <td>
{{ scope.obj.artist.albums_count }} {{ scope.obj.artist.albums_count }}

View File

@ -53,7 +53,7 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<span class="visually-hidden">{{ labels.openModeration }}</span> <span class="visually-hidden">{{ labels.openModeration }}</span>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('artist', scope.obj.artist.name)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('artist', scope.obj.artist.name)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</a>
</td> </td>
<td> <td>
<template v-if="!scope.obj.is_local"> <template v-if="!scope.obj.is_local">
@ -61,12 +61,12 @@
<i class="wrench icon"></i> <i class="wrench icon"></i>
<span class="visually-hidden">{{ labels.openModeration }}</span> <span class="visually-hidden">{{ labels.openModeration }}</span>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)">{{ scope.obj.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)">{{ scope.obj.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
</span> </a>
</td> </td>
<td> <td>
{{ scope.obj.tracks_count }} {{ scope.obj.tracks_count }}

View File

@ -63,12 +63,12 @@
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
</span> </a>
</td> </td>
<td> <td>
{{ scope.obj.albums_count }} {{ scope.obj.albums_count }}

View File

@ -62,28 +62,28 @@
<router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}"> <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('account', scope.obj.actor.full_username)" :title="scope.obj.actor.full_username">{{ scope.obj.actor.preferred_username }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('account', scope.obj.actor.full_username)" :title="scope.obj.actor.full_username">{{ scope.obj.actor.preferred_username }}</a>
</td> </td>
<td> <td>
<template v-if="!scope.obj.is_local"> <template v-if="!scope.obj.is_local">
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
</span> </a>
</td> </td>
<td> <td>
<span <a
role="button" href=""
class="discrete link" class="discrete link"
@click="addSearchToken('privacy_level', scope.obj.privacy_level)" @click.prevent="addSearchToken('privacy_level', scope.obj.privacy_level)"
:title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level]"> :title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level]">
{{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level] }} {{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.privacy_level] }}
</span> </a>
</td> </td>
<td> <td>
{{ scope.obj.uploads_count }} {{ scope.obj.uploads_count }}

View File

@ -53,29 +53,29 @@
<router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}"> <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('album_id', scope.obj.album.id)" :title="scope.obj.album.title">{{ scope.obj.album.title }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('album_id', scope.obj.album.id)" :title="scope.obj.album.title">{{ scope.obj.album.title }}</a>
</template> </template>
</td> </td>
<td> <td>
<router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}"> <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('artist_id', scope.obj.artist.id)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)" :title="scope.obj.artist.name">{{ scope.obj.artist.name }}</a>
</td> </td>
<td> <td>
<template v-if="!scope.obj.is_local"> <template v-if="!scope.obj.is_local">
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
</span> </a>
</td> </td>
<td> <td>
<span role="button" v-if="scope.obj.license" class="discrete link" @click="addSearchToken('license', scope.obj.license)" :title="scope.obj.license">{{ scope.obj.license }}</span> <a href="" v-if="scope.obj.license" class="discrete link" @click.prevent="addSearchToken('license', scope.obj.license)" :title="scope.obj.license">{{ scope.obj.license }}</a>
<translate v-else translate-context="*/*/*">N/A</translate> <translate v-else translate-context="*/*/*">N/A</translate>
</td> </td>
<td> <td>

View File

@ -77,42 +77,42 @@
<router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}"> <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" <a href="" class="discrete link"
@click="addSearchToken('library_id', scope.obj.library.id)" @click.prevent="addSearchToken('library_id', scope.obj.library.id)"
:title="scope.obj.library.name"> :title="scope.obj.library.name">
{{ scope.obj.library.name | truncate(20) }} {{ scope.obj.library.name | truncate(20) }}
</span> </a>
</td> </td>
<td> <td>
<router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.library.actor.full_username }}"> <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.library.actor.full_username }}">
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('account', scope.obj.library.actor.full_username)" :title="scope.obj.library.actor.full_username">{{ scope.obj.library.actor.preferred_username }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('account', scope.obj.library.actor.full_username)" :title="scope.obj.library.actor.full_username">{{ scope.obj.library.actor.preferred_username }}</a>
</td> </td>
<td> <td>
<template v-if="!scope.obj.is_local"> <template v-if="!scope.obj.is_local">
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
</span> </a>
</td> </td>
<td> <td>
<span <a
role="button" href=""
class="discrete link" class="discrete link"
@click="addSearchToken('privacy_level', scope.obj.library.privacy_level)" @click.prevent="addSearchToken('privacy_level', scope.obj.library.privacy_level)"
:title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level]"> :title="sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level]">
{{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level] }} {{ sharedLabels.fields.privacy_level.shortChoices[scope.obj.library.privacy_level] }}
</span> </a>
</td> </td>
<td> <td>
<span class="discrete link" @click="addSearchToken('status', scope.obj.import_status)" :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help"> <a href="" class="discrete link" @click.prevent="addSearchToken('status', scope.obj.import_status)" :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help">
{{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }} {{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}
</span> </a>
<button class="ui tiny basic icon button" :title="sharedLabels.fields.import_status.detailTitle" @click="detailedUpload = scope.obj; showUploadDetailModal = true"> <button class="ui tiny basic icon button" :title="sharedLabels.fields.import_status.detailTitle" @click="detailedUpload = scope.obj; showUploadDetailModal = true">
<i class="question circle outline icon"></i> <i class="question circle outline icon"></i>
</button> </button>

View File

@ -53,12 +53,12 @@
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
<i class="wrench icon"></i> <i class="wrench icon"></i>
</router-link> </router-link>
<span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span> <a href="" class="discrete link" @click.prevent="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</a>
</template> </template>
<span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)"> <a href="" v-else class="ui tiny accent icon link label" @click.prevent="addSearchToken('domain', scope.obj.domain)">
<i class="home icon"></i> <i class="home icon"></i>
<translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate> <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
</span> </a>
</td> </td>
<td> <td>
{{ scope.obj.uploads_count }} {{ scope.obj.uploads_count }}

View File

@ -21,12 +21,12 @@
</td> </td>
<td><human-date :date="item.activity.creation_date" /></td> <td><human-date :date="item.activity.creation_date" /></td>
<td class="read collapsing"> <td class="read collapsing">
<span @click="markRead(false)" role="button" v-if="item.is_read" :title="labels.markUnread"> <a href="" :aria-label="labels.markUnread" @click.prevent="markRead(false)" class="discrete link" v-if="item.is_read" :title="labels.markUnread">
<i class="redo icon" /> <i class="redo icon" />
</span> </a>
<span @click="markRead(true)" role="button" v-else :title="labels.markRead"> <a href="" :aria-label="labels.markRead" @click.prevent="markRead(true)" class="discrete link" v-else :title="labels.markRead">
<i class="check icon" /> <i class="check icon" />
</span> </a>
</td> </td>
</tr> </tr>
</template> </template>

View File

@ -69,13 +69,13 @@
<td><human-date :date="playlist.modification_date"></human-date></td> <td><human-date :date="playlist.modification_date"></human-date></td>
<td>{{ playlist.tracks_count }}</td> <td>{{ playlist.tracks_count }}</td>
<td> <td>
<div <button
v-if="track" v-if="track"
class="ui success icon basic small right floated button" class="ui success icon basic small right floated button"
:title="labels.addToPlaylist" :title="labels.addToPlaylist"
@click="addToPlaylist(playlist.id, false)"> @click.prevent="addToPlaylist(playlist.id, false)">
<i class="plus icon"></i> <translate translate-context="Popup/Playlist/Table.Button.Label/Verb">Add track</translate> <i class="plus icon"></i> <translate translate-context="Popup/Playlist/Table.Button.Label/Verb">Add track</translate>
</div> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>

View File

@ -72,13 +72,13 @@
<input id="show-read-notifications" v-model="filters.is_read" type="checkbox"> <input id="show-read-notifications" v-model="filters.is_read" type="checkbox">
<label for="show-read-notifications"><translate translate-context="Content/Notifications/Form.Label/Verb">Show read notifications</translate></label> <label for="show-read-notifications"><translate translate-context="Content/Notifications/Form.Label/Verb">Show read notifications</translate></label>
</div> </div>
<div <button
v-if="filters.is_read === false && notifications.count > 0" v-if="filters.is_read === false && notifications.count > 0"
@click="markAllAsRead" @click.prevent="markAllAsRead"
class="ui basic labeled icon right floated button"> class="ui basic labeled icon right floated button">
<i class="ui check icon" /> <i class="ui check icon" />
<translate translate-context="Content/Notifications/Button.Label/Verb">Mark all as read</translate> <translate translate-context="Content/Notifications/Button.Label/Verb">Mark all as read</translate>
</div> </button>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"> <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">

View File

@ -76,32 +76,32 @@
<button 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 <a
role="button" href=""
v-if="totalTracks > 0" v-if="totalTracks > 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> </a>
<div class="divider"></div> <div class="divider"></div>
<div <a
role="button" href=""
class="basic item" class="basic item"
v-for="obj in getReportableObjs({account: object.attributed_to, channel: object})" v-for="obj in getReportableObjs({account: object.attributed_to, channel: object})"
:key="obj.target.type + obj.target.id" :key="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 }}
</div> </a>
<template v-if="isOwner"> <template v-if="isOwner">
<div class="divider"></div> <div class="divider"></div>
<div <a
class="item" class="item"
role="button" href=""
@click.stop="showEditModal = true"> @click.stop.prevent="showEditModal = true">
<translate translate-context="*/*/*/Verb">Edit</translate> <translate translate-context="*/*/*/Verb">Edit</translate>
</div> </a>
<dangerous-button <dangerous-button
:class="['ui', {loading: isLoading}, 'item']" :class="['ui', {loading: isLoading}, 'item']"
v-if="object" v-if="object"

View File

@ -130,17 +130,19 @@
</router-link> </router-link>
</td> </td>
<td> <td>
<span <a
href=""
class="discrete link" class="discrete link"
@click="addSearchToken('artist', scope.obj.track.artist.name)" @click.prevent="addSearchToken('artist', scope.obj.track.artist.name)"
>{{ scope.obj.track.artist.name|truncate(20) }}</span> >{{ scope.obj.track.artist.name|truncate(20) }}</a>
</td> </td>
<td> <td>
<span <a
href=""
v-if="scope.obj.track.album" v-if="scope.obj.track.album"
class="discrete link" class="discrete link"
@click="addSearchToken('album', scope.obj.track.album.title)" @click.prevent="addSearchToken('album', scope.obj.track.album.title)"
>{{ scope.obj.track.album.title|truncate(20) }}</span> >{{ scope.obj.track.album.title|truncate(20) }}</a>
</td> </td>
</template> </template>
<template v-else> <template v-else>
@ -152,11 +154,12 @@
<human-date :date="scope.obj.creation_date"></human-date> <human-date :date="scope.obj.creation_date"></human-date>
</td> </td>
<td> <td>
<span <a
href=""
class="discrete link" class="discrete link"
@click="addSearchToken('status', scope.obj.import_status)" @click.prevent="addSearchToken('status', scope.obj.import_status)"
:title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help" :title="sharedLabels.fields.import_status.choices[scope.obj.import_status].help"
>{{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}</span> >{{ sharedLabels.fields.import_status.choices[scope.obj.import_status].label }}</a>
<button <button
class="ui tiny basic icon button" class="ui tiny basic icon button"
:title="sharedLabels.fields.import_status.detailTitle" :title="sharedLabels.fields.import_status.detailTitle"

View File

@ -65,11 +65,11 @@
<i class="warning download icon"></i> <i class="warning download icon"></i>
<translate translate-context="Content/Library/Card.List item">Scanned with errors</translate> <translate translate-context="Content/Library/Card.List item">Scanned with errors</translate>
</template> </template>
<span class="link right floated" @click="showScan = !showScan"> <a href="" class="link right floated" @click.prevent="showScan = !showScan">
<translate translate-context="Content/Library/Card.Button.Label/Noun">Details</translate> <translate translate-context="Content/Library/Card.Button.Label/Noun">Details</translate>
<i v-if="showScan" class="angle down icon" /> <i v-if="showScan" class="angle down icon" />
<i v-else class="angle right icon" /> <i v-else class="angle right icon" />
</span> </a>
<div v-if="showScan"> <div v-if="showScan">
<template v-if="latestScan.modification_date"> <template v-if="latestScan.modification_date">
<translate translate-context="Content/Library/Card.List item/Noun">Last update:</translate><human-date :date="latestScan.modification_date" /><br /> <translate translate-context="Content/Library/Card.List item/Noun">Last update:</translate><human-date :date="latestScan.modification_date" /><br />
@ -78,9 +78,9 @@
</div> </div>
</div> </div>
<div v-if="displayScan && canLaunchScan" class="clearfix"> <div v-if="displayScan && canLaunchScan" class="clearfix">
<span class="right floated link" @click="launchScan"> <a href="" class="right floated link" @click.prevent="launchScan">
<translate translate-context="Content/Library/Card.Button.Label/Verb">Scan now</translate> <i class="paper plane icon" /> <translate translate-context="Content/Library/Card.Button.Label/Verb">Scan now</translate> <i class="paper plane icon" />
</span> </a>
</div> </div>
</div> </div>
<div class="extra content"> <div class="extra content">

View File

@ -13,7 +13,9 @@
</div> </div>
<template v-if="existingFollows && existingFollows.count > 0"> <template v-if="existingFollows && existingFollows.count > 0">
<h2><translate translate-context="Content/Library/Title">Known libraries</translate></h2> <h2><translate translate-context="Content/Library/Title">Known libraries</translate></h2>
<i @click="fetch()" :class="['ui', 'circular', 'refresh', 'icon']" /> <translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate> <a href="" class="discrete link" @click.prevent="fetch()" >
<i :class="['ui', 'circular', 'refresh', 'icon']" /> <translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate>
</a>
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<div class="ui two cards"> <div class="ui two cards">
<library-card <library-card