New theming system
This commit is contained in:
Agate
parent
c505f6ff9b
commit
cd422832dd
196 changed files with 3359 additions and 3486 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<main class="main pusher">
|
||||
<main class="main pusher page-about">
|
||||
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
|
||||
<div class="segment-content">
|
||||
<h1 class="ui center aligned large header">
|
||||
|
|
@ -173,22 +173,22 @@
|
|||
<translate translate-context="Content/Home/Header">Statistics</translate>
|
||||
</h3>
|
||||
<p>
|
||||
<i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
|
||||
<i class="user really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
|
||||
</p>
|
||||
<p>
|
||||
<i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
|
||||
<i class="music really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
|
||||
</p>
|
||||
<p v-if="stats.artists">
|
||||
<i class="users grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
|
||||
<i class="users really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
|
||||
</p>
|
||||
<p v-if="stats.albums">
|
||||
<i class="headphones grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
|
||||
<i class="headphones really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
|
||||
</p>
|
||||
<p v-if="stats.tracks">
|
||||
<i class="file grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
|
||||
<i class="file really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
|
||||
</p>
|
||||
<p v-if="stats.listenings">
|
||||
<i class="play grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
|
||||
<i class="play really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -285,38 +285,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
|
||||
.ui.list .list.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1.header, h1 .sub.header {
|
||||
text-shadow: 0 2px 0 rgba(0,0,0,.8);
|
||||
color: #fff !important;
|
||||
}
|
||||
h1.ui.header {
|
||||
font-size: 3em;
|
||||
}
|
||||
h1.ui.header .sub.header {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.main.pusher {
|
||||
margin-top: 0;
|
||||
min-height: 10em;
|
||||
}
|
||||
section.segment.head {
|
||||
padding: 8em 3em;
|
||||
background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
#pod {
|
||||
font-size: 110%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
<h4 v-else class="ui header ellipsis">
|
||||
<span v-translate="{instanceUrl: instanceHostname}" translate-context="Footer/About/Title">About %{instanceUrl}</span>
|
||||
</h4>
|
||||
<div class="ui link list">
|
||||
<router-link class="item" to="/about">
|
||||
<div class="ui list">
|
||||
<router-link class="link item" to="/about">
|
||||
<translate translate-context="Footer/About/List item.Link">About page</translate>
|
||||
</router-link>
|
||||
<a v-if="version" class="item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
|
||||
<a v-if="version" class="link item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
|
||||
<translate translate-context="Footer/*/List item" :translate-params="{version: version}" >Version %{version}</translate>
|
||||
</a>
|
||||
<div role="button" class="item" @click="$emit('show:set-instance-modal')" >
|
||||
<a role="button" class="link item" @click.prevent="$emit('show:set-instance-modal')" >
|
||||
<translate translate-context="Footer/*/List item.Link">Use another instance</translate>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ui form">
|
||||
<div class="ui field">
|
||||
|
|
@ -31,10 +31,10 @@
|
|||
</section>
|
||||
<section class="four wide column">
|
||||
<h4 v-translate class="ui header" translate-context="Footer/*/Title">Using Funkwhale</h4>
|
||||
<div class="ui link list">
|
||||
<a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
|
||||
<a href="https://funkwhale.audio/apps" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
|
||||
<div role="button" class="item" @click="$emit('show:shortcuts-modal')"><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></div>
|
||||
<div class="ui list">
|
||||
<a href="https://docs.funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
|
||||
<a href="https://funkwhale.audio/apps" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
|
||||
<a role="button" class="link item" @click.prevent="$emit('show:shortcuts-modal')"><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></a>
|
||||
</div>
|
||||
<div class="ui form">
|
||||
<div class="ui field">
|
||||
|
|
@ -47,18 +47,18 @@
|
|||
</section>
|
||||
<section class="four wide column">
|
||||
<h4 v-translate translate-context="Footer/*/Link" class="ui header">Getting help</h4>
|
||||
<div class="ui link list">
|
||||
<a href="https://governance.funkwhale.audio/g/kQgxNq15/funkwhale" class="item" target="_blank"><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
|
||||
<a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
|
||||
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
|
||||
<div class="ui list">
|
||||
<a href="https://governance.funkwhale.audio/g/kQgxNq15/funkwhale" class="link item" target="_blank"><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
|
||||
<a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
|
||||
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="four wide column">
|
||||
<h4 v-translate class="ui header" translate-context="Footer/*/Title/Short">About Funkwhale</h4>
|
||||
<div class="ui link list">
|
||||
<a href="https://funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
|
||||
<a href="https://contribute.funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
|
||||
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
|
||||
<div class="ui list">
|
||||
<a href="https://funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
|
||||
<a href="https://contribute.funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
|
||||
<a href="https://dev.funkwhale.audio/funkwhale/funkwhale" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
|
||||
</div>
|
||||
<div class="ui hidden divider"></div>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<main class="main pusher" v-title="labels.title">
|
||||
<main class="main pusher page-home" v-title="labels.title">
|
||||
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
|
||||
<div class="segment-content">
|
||||
<h1 class="ui center aligned large header">
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<div v-if="truncatedDescription" class="ui hidden divider"></div>
|
||||
<div class="ui relaxed list">
|
||||
<div class="item" v-if="truncatedDescription">
|
||||
<i class="arrow right grey icon"></i>
|
||||
<i class="arrow right icon"></i>
|
||||
<div class="content">
|
||||
<router-link class="ui link" :to="{name: 'about'}">
|
||||
<translate translate-context="Content/Home/Link">Learn more</translate>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item" v-if="rules">
|
||||
<i class="book open grey icon"></i>
|
||||
<i class="book open icon"></i>
|
||||
<div class="content">
|
||||
<router-link class="ui link" v-if="rules" :to="{name: 'about', hash: '#rules'}">
|
||||
<translate translate-context="Content/Home/Link">Server rules</translate>
|
||||
|
|
@ -56,10 +56,10 @@
|
|||
<translate translate-context="Content/Home/Header">Statistics</translate>
|
||||
</h3>
|
||||
<p>
|
||||
<i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
|
||||
<i class="user icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
|
||||
</p>
|
||||
<p>
|
||||
<i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
|
||||
<i class="music icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
|
||||
</p>
|
||||
|
||||
</template>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<h3 class="sub header">
|
||||
<translate translate-context="Content/Home/Header/Name">Contact</translate>
|
||||
</h3>
|
||||
<i class="at grey icon"></i>
|
||||
<i class="at icon"></i>
|
||||
<a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
|
||||
</template>
|
||||
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
<h3 class="header">
|
||||
<translate translate-context="Head/Login/Title">Log In</translate>
|
||||
</h3>
|
||||
<login-form button-classes="basic green" :show-signup="false"></login-form>
|
||||
<login-form button-classes="basic success" :show-signup="false"></login-form>
|
||||
<div class="ui hidden clearing divider"></div>
|
||||
</div>
|
||||
<div class="four wide column">
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<p v-if="defaultUploadQuota">
|
||||
<translate translate-context="Content/Home/Paragraph" :translate-params="{quota: humanSize(defaultUploadQuota * 1000 * 1000)}">Users on this pod also get %{ quota } of free storage to upload their own content!</translate>
|
||||
</p>
|
||||
<signup-form button-classes="basic green" :show-login="false"></signup-form>
|
||||
<signup-form button-classes="basic success" :show-login="false"></signup-form>
|
||||
</template>
|
||||
<div v-else>
|
||||
<p translate-context="Content/Home/Paragraph">Registrations are closed on this pod. You can signup on another pod using the link below.</p>
|
||||
|
|
@ -288,39 +288,3 @@ export default {
|
|||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import "../style/vendor/media";
|
||||
|
||||
.ui.list .list.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1.header, h1 .sub.header {
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
|
||||
color: #fff !important;
|
||||
}
|
||||
h1.ui.header {
|
||||
@include media(">tablet") {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
h1.ui.header .sub.header {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.main.pusher {
|
||||
margin-top: 0;
|
||||
min-height: 10em;
|
||||
}
|
||||
section.segment.head {
|
||||
padding: 8em 3em;
|
||||
background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
#pod {
|
||||
font-size: 110%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if='maxPage > 1' class="ui pagination menu" role="navigation" :aria-label="labels.pagination">
|
||||
<div v-if='maxPage > 1' class="ui pagination menu component-pagination" role="navigation" :aria-label="labels.pagination">
|
||||
<a href
|
||||
:disabled="current - 1 < 1"
|
||||
@click.prevent.stop="selectPage(current - 1)"
|
||||
|
|
@ -95,10 +95,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.ui.pagination.menu .item {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<section class="main with-background" :aria-label="labels.queue">
|
||||
<section class="main with-background component-queue" :aria-label="labels.queue">
|
||||
<div :class="['ui vertical stripe queue segment', playerFocused ? 'player-focused' : '']">
|
||||
<div class="ui fluid container">
|
||||
<div class="ui stackable grid" id="queue-grid">
|
||||
<div class="ui six wide column current-track">
|
||||
<div class="ui six wide column current-track">
|
||||
<div class="ui basic segment" id="player">
|
||||
<template v-if="currentTrack">
|
||||
<img class="ui image" v-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.square_crop)">
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<div class="progress-area" v-if="currentTrack && !errored">
|
||||
<div
|
||||
ref="progress"
|
||||
:class="['ui', 'small', 'orange', {'indicating': isLoadingAudio}, 'progress']"
|
||||
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
|
||||
@click="touchProgress">
|
||||
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
|
||||
<div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<div class="progress-area" v-else>
|
||||
<div
|
||||
ref="progress"
|
||||
:class="['ui', 'small', 'orange', 'progress']">
|
||||
:class="['ui', 'small', 'vibrant', 'progress']">
|
||||
<div class="buffer bar"></div>
|
||||
<div class="position bar"></div>
|
||||
</div>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui sixteen wide mobile ten wide computer column queue-column">
|
||||
<div class="ui ten wide column queue-column">
|
||||
<div class="ui basic clearing fixed-header segment">
|
||||
<h2 class="ui header">
|
||||
<div class="content">
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
:key="index"
|
||||
:class="['queue-item', {'active': index === queue.currentIndex}]">
|
||||
<td class="handle">
|
||||
<i class="grip lines grey icon"></i>
|
||||
<i class="grip lines icon"></i>
|
||||
</td>
|
||||
<td class="image-cell" @click="$store.dispatch('queue/currentIndex', index)">
|
||||
<img class="ui mini image" v-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.square_crop)">
|
||||
|
|
@ -374,204 +374,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../style/vendor/media";
|
||||
|
||||
.main {
|
||||
position: absolute;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
z-index: 1000;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
.main > .button {
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
z-index: 9999999;
|
||||
@include media("<desktop") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.queue.segment:not(.player-focused) {
|
||||
#player {
|
||||
@include media("<desktop") {
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.queue.segment #player {
|
||||
padding: 0em;
|
||||
> * {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
.player-focused .grid > .ui.queue-column {
|
||||
@include media("<desktop") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.queue-column {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.queue-column .table {
|
||||
margin-top: 4em !important;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.ui.table > tbody > tr > td.controls {
|
||||
text-align: right;
|
||||
}
|
||||
.ui.table > tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
td:first-child {
|
||||
padding-left: 1em !important;
|
||||
}
|
||||
td:last-child {
|
||||
padding-right: 1em !important;
|
||||
}
|
||||
.image-cell {
|
||||
width: 4em;
|
||||
}
|
||||
.queue.segment {
|
||||
@include media("<desktop") {
|
||||
padding: 0;
|
||||
}
|
||||
> .container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
.handle {
|
||||
@include media("<desktop") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.duration-cell {
|
||||
@include media("<tablet") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
@include media("<desktop") {
|
||||
padding: 1em;
|
||||
}
|
||||
@include media(">desktop") {
|
||||
right: 1em;
|
||||
left: 38%;
|
||||
}
|
||||
.header .content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.current-track #player {
|
||||
font-size: 1.8em;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 32%;
|
||||
@include media("<desktop") {
|
||||
padding: 0.5em;
|
||||
font-size: 1.5em;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
> .image {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
> *:not(.image) {
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
.progress-area {
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-wrapper, .warning.message {
|
||||
max-width: 25em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ui.progress .buffer.bar {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.ui.progress:not([data-percent]):not(.indeterminate)
|
||||
.bar.position:not(.buffer) {
|
||||
background: #ff851b;
|
||||
}
|
||||
|
||||
.indicating.progress .bar {
|
||||
left: -46px;
|
||||
width: 200% !important;
|
||||
color: grey;
|
||||
background: repeating-linear-gradient(
|
||||
-55deg,
|
||||
grey 1px,
|
||||
grey 10px,
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
) !important;
|
||||
|
||||
animation-name: MOVE-BG;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.ui.progress {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.timer {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.progress {
|
||||
cursor: pointer;
|
||||
.bar {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
.control:not(:first-child) {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.icon {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.handle {
|
||||
cursor: grab;
|
||||
}
|
||||
.sortable-chosen {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.queue-item.sortable-ghost {
|
||||
td {
|
||||
border-top: 3px dashed rgba(0, 0, 0, 0.15) !important;
|
||||
border-bottom: 3px dashed rgba(0, 0, 0, 0.15) !important;
|
||||
&:first-child {
|
||||
border-left: 3px dashed rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 3px dashed rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -142,6 +142,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
|
||||
<aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar', 'component-sidebar']">
|
||||
<header class="ui basic segment header-wrapper">
|
||||
<router-link :title="'Funkwhale'" :to="{name: logoUrl}">
|
||||
<i class="logo bordered inverted orange big icon">
|
||||
<i class="logo bordered inverted vibrant big icon">
|
||||
<logo class="logo"></logo>
|
||||
</i>
|
||||
</router-link>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
|
||||
<span
|
||||
@click="isCollapsed = !isCollapsed"
|
||||
:class="['ui', 'basic', 'big', {'orange': !isCollapsed}, 'inverted icon', 'collapse', 'button']">
|
||||
:class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']">
|
||||
<i class="sidebar icon"></i></span>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -343,239 +343,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import "../style/vendor/media";
|
||||
|
||||
$sidebar-color: #2D2F33;
|
||||
|
||||
.sidebar {
|
||||
background: $sidebar-color;
|
||||
z-index: 1;
|
||||
@include media(">desktop") {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
> nav {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@include media(">desktop") {
|
||||
.menu .item.collapse-button-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.collapse.button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media("<=desktop") {
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
&.collapsed {
|
||||
.player-wrapper,
|
||||
.search,
|
||||
.signup.segment,
|
||||
nav.secondary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
margin: 0;
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
.menu.vertical {
|
||||
background: $sidebar-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.vertical.menu {
|
||||
.item .item {
|
||||
font-size: 1em;
|
||||
> i.icon {
|
||||
float: none;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
&:not(.active) {
|
||||
// color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
.item.active {
|
||||
border-right: 5px solid #F2711C;
|
||||
border-radius: 0 !important;
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
.item.collapsed {
|
||||
&:not(:focus) > .menu {
|
||||
display: none;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.collaspable.item .header {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.ui.secondary.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
justify-content: space-between;
|
||||
@include media("<=desktop") {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
.ui.tab.active {
|
||||
display: flex;
|
||||
}
|
||||
.tab[data-tab="queue"] {
|
||||
flex-direction: column;
|
||||
tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
td:nth-child(2) {
|
||||
width: 55px;
|
||||
}
|
||||
}
|
||||
.item .header .angle.icon {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.tab[data-tab="library"] {
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
> .menu {
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
> .player-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sidebar .segment {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.menu .item.inline.admin-dropdown.dropdown > .menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.ui.segment.header-wrapper {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4em;
|
||||
nav {
|
||||
> .item, > .menu > .item > .item {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.top.title-menu {
|
||||
flex-grow: 1;
|
||||
.item {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.collapsed .search-wrapper {
|
||||
@include media("<desktop") {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.ui.search {
|
||||
display: flex;
|
||||
}
|
||||
.ui.message.black {
|
||||
background: $sidebar-color;
|
||||
}
|
||||
|
||||
.ui.mini.image {
|
||||
width: 100%;
|
||||
}
|
||||
nav.top {
|
||||
align-items: self-end;
|
||||
padding: 0.5em 0;
|
||||
> .item, > .right.menu > .item {
|
||||
// color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-size: 1.2em;
|
||||
&:hover, > .dropdown > .icon {
|
||||
// color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
> .label, > .dropdown > .label {
|
||||
font-size: 0.5em;
|
||||
right: 1.7em;
|
||||
bottom: -0.5em;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui.user-dropdown > .text > .label {
|
||||
margin-right: 0;
|
||||
}
|
||||
.logo-wrapper {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
@include media("<desktop") {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@include media(">tablet") {
|
||||
img {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
aside.ui.sidebar {
|
||||
overflow-y: visible !important;
|
||||
.ui.search .input {
|
||||
flex: 1;
|
||||
.prompt {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.ui.search .results {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.search .name {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.ui.tiny.avatar.image {
|
||||
position: relative;
|
||||
top: -0.5em;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
:not(.active) button.title {
|
||||
outline-color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form :id="group.id" class="ui form" @submit.prevent="save">
|
||||
<form :id="group.id" class="ui form component-settings-group" @submit.prevent="save">
|
||||
<div class="ui divider" />
|
||||
<h3 class="ui header">{{ group.label }}</h3>
|
||||
<div v-if="errors.length > 0" class="ui negative message">
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'green', 'button']">
|
||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']">
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Save</translate>
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -176,10 +176,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.ui.checkbox p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="album-entries">
|
||||
<div :class="[{active: currentTrack && isPlaying && track.id === currentTrack.id}, 'album-entry']" v-for="track in tracks" :key="track.id">
|
||||
<div class="actions">
|
||||
<play-button class="basic circular icon" :button-classes="['circular inverted orange icon button']" :discrete="true" :icon-only="true" :track="track"></play-button>
|
||||
<play-button class="basic circular icon" :button-classes="['circular inverted vibrant icon button']" :discrete="true" :icon-only="true" :track="track"></play-button>
|
||||
</div>
|
||||
<div class="position">{{ prettyPosition(track.position) }}</div>
|
||||
<div class="content ellipsis">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div
|
||||
@click="$router.push({name: 'channels.detail', params: {id: urlId}})"
|
||||
:class="['ui', 'head-image', {'circular': object.artist.content_category != 'podcast'}, {'padded': object.artist.content_category === 'podcast'}, 'image', {'default-cover': !object.artist.cover}]" v-lazy:background-image="imageUrl">
|
||||
<play-button :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :artist="object.artist"></play-button>
|
||||
<play-button :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']" :artist="object.artist"></play-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
class="right floated basic icon"
|
||||
:dropdown-only="true"
|
||||
:is-playable="true"
|
||||
:dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :artist="object.artist" :channel="object" :account="object.attributed_to"></play-button>
|
||||
:dropdown-icon-classes="['ellipsis', 'horizontal', 'large really discrete']" :artist="object.artist" :channel="object" :account="object.attributed_to"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -58,14 +58,9 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
imageUrl () {
|
||||
let url = '../../assets/audio/default-cover.png'
|
||||
|
||||
if (this.object.artist.cover) {
|
||||
url = this.$store.getters['instance/absoluteUrl'](this.object.artist.cover.medium_square_crop)
|
||||
} else {
|
||||
return null
|
||||
return this.$store.getters['instance/absoluteUrl'](this.object.artist.cover.medium_square_crop)
|
||||
}
|
||||
return url
|
||||
},
|
||||
urlId () {
|
||||
if (this.object.actor && this.object.actor.is_local) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="[{active: currentTrack && isPlaying && entry.id === currentTrack.id}, 'channel-entry-card']">
|
||||
<div class="controls">
|
||||
<play-button class="basic circular icon" :discrete="true" :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'inverted orange', 'icon', 'button']" :track="entry"></play-button>
|
||||
<play-button class="basic circular icon" :discrete="true" :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'inverted vibrant', 'icon', 'button']" :track="entry"></play-button>
|
||||
</div>
|
||||
<img
|
||||
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
|
||||
|
|
@ -62,16 +62,6 @@ export default {
|
|||
isPlaying () {
|
||||
return this.$store.state.player.playing
|
||||
},
|
||||
imageUrl () {
|
||||
let url = '../../assets/audio/default-cover.png'
|
||||
let cover = this.cover
|
||||
if (cover && cover.original) {
|
||||
url = this.$store.getters['instance/absoluteUrl'](cover.medium_square_crop)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
return url
|
||||
},
|
||||
cover () {
|
||||
if (this.entry.cover) {
|
||||
return this.entry.cover
|
||||
|
|
@ -88,7 +78,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<play-button :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'orange', 'icon', 'button']" :album="serie"></play-button>
|
||||
<play-button :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'vibrant', 'icon', 'button']" :album="serie"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -36,16 +36,6 @@ export default {
|
|||
PlayButton,
|
||||
},
|
||||
computed: {
|
||||
imageUrl () {
|
||||
let url = '../../assets/audio/default-cover.png'
|
||||
let cover = this.cover
|
||||
if (cover && cover.original) {
|
||||
url = this.$store.getters['instance/absoluteUrl'](cover.medium_square_crop)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
return url
|
||||
},
|
||||
cover () {
|
||||
if (this.serie.cover) {
|
||||
return this.serie.cover
|
||||
|
|
@ -60,10 +50,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.default-cover {
|
||||
background-image: url("../../assets/audio/default-cover.png") !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -115,12 +115,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
p.message {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,3 @@ export default {
|
|||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span :title="title" :class="['ui', {'tiny': discrete}, {'icon': !discrete}, {'buttons': !dropdownOnly && !iconOnly}, 'play-button']">
|
||||
<span :title="title" :class="['ui', {'tiny': discrete}, {'icon': !discrete}, {'buttons': !dropdownOnly && !iconOnly}, 'play-button component-play-button']">
|
||||
<button
|
||||
v-if="!dropdownOnly"
|
||||
:title="labels.playNow"
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
<div
|
||||
v-if="!discrete && !iconOnly"
|
||||
@click.prevent="clicked = true"
|
||||
role="button"
|
||||
:class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
|
||||
<i :class="dropdownIconClasses.concat(['icon'])" :title="title" ></i>
|
||||
<div class="menu" v-if="clicked">
|
||||
|
|
@ -288,14 +289,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
button.item {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<section v-if="currentTrack" class="player-wrapper ui bottom-player">
|
||||
<section v-if="currentTrack" class="player-wrapper ui bottom-player component-player">
|
||||
<div class="ui inverted segment fixed-controls" @click.prevent.stop="toggleMobilePlayer">
|
||||
<div
|
||||
:class="['ui', 'top attached', 'small', 'orange', 'inverted', {'indicating': isLoadingAudio}, 'progress']">
|
||||
:class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']">
|
||||
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
|
||||
<div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
|
||||
</div>
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
:disabled="!currentTrack">
|
||||
<i
|
||||
class="repeat icon">
|
||||
<span class="ui circular tiny orange label">1</span>
|
||||
<span class="ui circular tiny vibrant label">1</span>
|
||||
</i>
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
@click.prevent.stop="$store.commit('player/looping', 0)">
|
||||
<i
|
||||
class="repeat icon">
|
||||
<span class="ui circular tiny orange label">∞</span>
|
||||
<span class="ui circular tiny vibrant label">∞</span>
|
||||
</i>
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -436,7 +436,6 @@ export default {
|
|||
param = "token"
|
||||
value = this.$store.state.auth.scopedTokens.listen
|
||||
}
|
||||
console.log('HELLO', param, value, this.$store.state.auth.scopedTokens)
|
||||
sources.forEach(e => {
|
||||
e.url = url.updateQueryString(e.url, param, value)
|
||||
})
|
||||
|
|
@ -777,77 +776,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import "../../style/vendor/media";
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.controls .icon.big {
|
||||
cursor: pointer;
|
||||
font-size: 2em !important;
|
||||
}
|
||||
|
||||
.controls .icon {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.timer {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.looping {
|
||||
i {
|
||||
position: relative;
|
||||
}
|
||||
.ui.circular.label {
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
font-size: 0.5em !important;
|
||||
bottom: -0.7rem;
|
||||
right: -0.7rem;
|
||||
padding: 2px 0 !important;
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
min-width: 15px !important;
|
||||
min-height: 15px !important;
|
||||
@include media(">desktop") {
|
||||
font-size: 0.6em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shuffling.loader.inline {
|
||||
margin: 0;
|
||||
}
|
||||
.control.circular.button {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
.fake-dropdown {
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 10em;
|
||||
> * {
|
||||
padding: 0.5em;
|
||||
|
||||
}
|
||||
.position.control {
|
||||
padding-right: 1em;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.angle.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -236,7 +236,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span :class="['volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
|
||||
<span :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
|
||||
<span
|
||||
role="button"
|
||||
v-if="sliderVolume === 0"
|
||||
|
|
@ -82,37 +82,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.volume-control {
|
||||
display: flex;
|
||||
line-height: inherit;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
input {
|
||||
max-width: 5.5em;
|
||||
height: 4px;
|
||||
}
|
||||
&.expandable {
|
||||
.popup {
|
||||
background-color: #1B1C1D;
|
||||
position: absolute;
|
||||
left: -4em;
|
||||
top: -7em;
|
||||
transform: rotate(-90deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.5em;
|
||||
padding: 0 0.5em;
|
||||
box-shadow: 1px 1px 3px rgba(125, 125, 125, 0.5);
|
||||
}
|
||||
input {
|
||||
max-width: 8.5em;
|
||||
}
|
||||
&:not(:hover):not(.expanded) .popup {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="card app-card">
|
||||
<div class="card app-card component-album-card">
|
||||
<div
|
||||
@click="$router.push({name: 'library.albums.detail', params: {id: album.id}})"
|
||||
:class="['ui', 'head-image', 'image', {'default-cover': !album.cover.original}]" v-lazy:background-image="imageUrl">
|
||||
<play-button :icon-only="true" :is-playable="album.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :album="album"></play-button>
|
||||
<play-button :icon-only="true" :is-playable="album.is_playable" :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']" :album="album"></play-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
<div class="extra content">
|
||||
<translate translate-context="*/*/*" :translate-params="{count: album.tracks.length}" :translate-n="album.tracks.length" translate-plural="%{ count } tracks">%{ count } track</translate>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="album.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :album="album"></play-button>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="album.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large really discrete']" :album="album"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -38,28 +38,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
imageUrl () {
|
||||
let url = '../../../assets/audio/default-cover.png'
|
||||
|
||||
if (this.album.cover.original) {
|
||||
url = this.$store.getters['instance/absoluteUrl'](this.album.cover.medium_square_crop)
|
||||
} else {
|
||||
return null
|
||||
return this.$store.getters['instance/absoluteUrl'](this.album.cover.medium_square_crop)
|
||||
}
|
||||
return url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
|
||||
.default-cover {
|
||||
background-image: url("../../../assets/audio/default-cover.png") !important;
|
||||
}
|
||||
|
||||
.card.app-card > .head-image > .icon {
|
||||
margin: 0.5em;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,18 +91,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.cards {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.ui.cards .ui.button {
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div
|
||||
@click="$router.push({name: 'library.artists.detail', params: {id: artist.id}})"
|
||||
:class="['ui', 'head-image', 'circular', 'image', {'default-cover': !cover.original}]" v-lazy:background-image="imageUrl">
|
||||
<play-button :icon-only="true" :is-playable="artist.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :artist="artist"></play-button>
|
||||
<play-button :icon-only="true" :is-playable="artist.is_playable" :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']" :artist="artist"></play-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div class="extra content">
|
||||
<translate translate-context="*/*/*" :translate-params="{count: artist.tracks_count}" :translate-n="artist.tracks_count" translate-plural="%{ count } tracks">%{ count } track</translate>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="artist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :artist="artist"></play-button>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="artist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large really discrete']" :artist="artist"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -39,14 +39,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
imageUrl () {
|
||||
let url = '../../../assets/audio/default-cover.png'
|
||||
let cover = this.cover
|
||||
if (cover.original) {
|
||||
url = this.$store.getters['instance/absoluteUrl'](cover.medium_square_crop)
|
||||
} else {
|
||||
return null
|
||||
return this.$store.getters['instance/absoluteUrl'](cover.medium_square_crop)
|
||||
}
|
||||
return url
|
||||
},
|
||||
cover () {
|
||||
if (this.artist.cover && this.artist.cover.original) {
|
||||
|
|
@ -61,10 +57,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.default-cover {
|
||||
background-image: url("../../../assets/audio/default-cover.png") !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -90,27 +90,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../../style/vendor/media";
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.cards {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ui.three.cards .card {
|
||||
width: 100%;
|
||||
}
|
||||
@include media(">tablet") {
|
||||
.ui.three.cards .card {
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.ui.cards .ui.button {
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
<play-button :class="['basic', {orange: currentTrack && isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button>
|
||||
<play-button :class="['basic', {vibrant: currentTrack && isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button>
|
||||
</td>
|
||||
<td>
|
||||
<img class="ui mini image" v-if="track.album && track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
|
||||
|
|
@ -12,17 +12,17 @@
|
|||
<template v-if="displayPosition && track.position">
|
||||
{{ track.position }}.
|
||||
</template>
|
||||
{{ track.title }}
|
||||
{{ track.title|truncate(40) }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
|
||||
{{ track.artist.name }}
|
||||
{{ track.artist.name|truncate(40) }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<router-link v-if="track.album" class="album discrete link" :title="track.album.title" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
|
||||
{{ track.album.title }}
|
||||
{{ track.album.title|truncate(40) }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td colspan="4" v-if="track.uploads && track.uploads.length > 0">
|
||||
|
|
@ -32,17 +32,17 @@
|
|||
<translate translate-context="*/*/*">N/A</translate>
|
||||
</td>
|
||||
<td colspan="2" v-if="displayActions" class="align right">
|
||||
<track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
|
||||
<play-button
|
||||
class="play-button basic icon"
|
||||
:dropdown-only="true"
|
||||
:is-playable="track.is_playable"
|
||||
:dropdown-icon-classes="['ellipsis', 'vertical', 'large', 'grey']"
|
||||
:dropdown-icon-classes="['ellipsis', 'vertical', 'large really discrete']"
|
||||
:track="track"
|
||||
></play-button>
|
||||
<track-playlist-icon
|
||||
v-if="$store.state.auth.authenticated"
|
||||
:track="track"></track-playlist-icon>
|
||||
<track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
|
@ -83,13 +83,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
tr:not(:hover) {
|
||||
.favorite-icon:not(.favorited),
|
||||
.playlist-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="table-wrapper">
|
||||
<div class="table-wrapper component-track-table">
|
||||
<inline-search-bar v-model="query" v-if="search" @search="additionalTracks = []; loadMore()"></inline-search-bar>
|
||||
<slot v-if="!isLoading && allTracks.length === 0" name="empty-state">
|
||||
<empty-state @refresh="fetchData" :refresh="true"></empty-state>
|
||||
|
|
@ -90,16 +90,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
tr:not(:hover) .favorite-icon:not(.favorited) {
|
||||
display: none;
|
||||
}
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.table-wrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="component-track-widget">
|
||||
<h3 class="ui header">
|
||||
<slot name="title"></slot>
|
||||
<span v-if="showCount" class="ui tiny circular label">{{ count }}</span>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="ui tiny image">
|
||||
<img v-if="object.track.album && object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)">
|
||||
<img v-else src="../../../assets/audio/default-cover.png">
|
||||
<play-button class="play-overlay" :icon-only="true" :button-classes="['ui', 'circular', 'tiny', 'orange', 'icon', 'button']" :track="object.track"></play-button>
|
||||
<play-button class="play-overlay" :icon-only="true" :button-classes="['ui', 'circular', 'tiny', 'vibrant', 'icon', 'button']" :track="object.track"></play-button>
|
||||
</div>
|
||||
<div class="middle aligned content">
|
||||
<div class="ui unstackable grid">
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
class="basic icon"
|
||||
:account="object.actor"
|
||||
:dropdown-only="true"
|
||||
:dropdown-icon-classes="['ellipsis', 'vertical', 'large', 'grey']"
|
||||
:dropdown-icon-classes="['ellipsis', 'vertical', 'large really discrete']"
|
||||
:track="object.track"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,37 +151,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../../style/vendor/media";
|
||||
|
||||
.play-overlay {
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
left: 4em;
|
||||
@include media(">tablet") {
|
||||
top: 2.5em;
|
||||
left: 2.5em;
|
||||
}
|
||||
}
|
||||
.refresh.icon {
|
||||
float: right;
|
||||
}
|
||||
.ui.divided.items > .item:last-child {
|
||||
padding-bottom: 1em !important;
|
||||
}
|
||||
|
||||
@include media(">tablet") {
|
||||
.divided.items > .track-item.inline {
|
||||
width: 25em;
|
||||
float: left;
|
||||
border-top: none;
|
||||
&,
|
||||
&:first-child {
|
||||
margin-top: 0.5em !important;
|
||||
margin-right: 0.5em !important;
|
||||
padding: 1em 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
|
||||
<form class="ui form" @submit.prevent="submit()">
|
||||
<form class="ui form component-form" @submit.prevent="submit()">
|
||||
<div v-if="errors.length > 0" class="ui negative message">
|
||||
<div class="header"><translate translate-context="Content/*/Error message.Title">We cannot save your changes</translate></div>
|
||||
<ul class="list">
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<button :class="['ui', {'loading': isLoading}, 'green', 'button']" type="submit">
|
||||
<button :class="['ui', {'loading': isLoading}, 'success', 'button']" type="submit">
|
||||
<translate v-if="updating" key="2" translate-context="Content/Applications/Button.Label/Verb">Update application</translate>
|
||||
<translate v-else key="2" translate-context="Content/Applications/Button.Label/Verb">Create application</translate>
|
||||
</button>
|
||||
|
|
@ -173,13 +173,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.parent.checkbox {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.child.checkbox {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@
|
|||
<form v-else-if="application && !code" :class="['ui', {loading: isLoading}, 'form']" @submit.prevent="submit">
|
||||
<h3><translate translate-context="Content/Auth/Title" :translate-params="{app: application.name}">%{ app } wants to access your Funkwhale account</translate></h3>
|
||||
|
||||
<h4 v-for="topic in topicScopes" class="ui header">
|
||||
<span v-if="topic.write && !topic.read" :class="['ui', 'basic', 'right floated', 'tiny', 'label']">
|
||||
<h4 v-for="topic in topicScopes" class="ui header vertical-align">
|
||||
<span v-if="topic.write && !topic.read" :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']">
|
||||
<i class="pencil icon"></i>
|
||||
<translate translate-context="Content/Auth/Label/Noun">Write-only</translate>
|
||||
</span>
|
||||
<span v-else-if="!topic.write && topic.read" :class="['ui', 'basic', 'right floated', 'tiny', 'label']">
|
||||
<span v-else-if="!topic.write && topic.read" :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']">
|
||||
<translate translate-context="Content/Auth/Label/Noun">Read-only</translate>
|
||||
</span>
|
||||
<span v-else-if="topic.write && topic.read" :class="['ui', 'basic', 'right floated', 'tiny', 'label']">
|
||||
<span v-else-if="topic.write && topic.read" :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']">
|
||||
<i class="pencil icon"></i>
|
||||
<translate translate-context="Content/Auth/Label/Noun">Full access</translate>
|
||||
</span>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</ul>
|
||||
|
||||
</div>
|
||||
<button class="ui green labeled icon button" type="submit">
|
||||
<button class="ui success labeled icon button" type="submit">
|
||||
<i class="lock open icon"></i>
|
||||
<translate translate-context="Content/Signup/Button.Label/Verb" :translate-params="{app: application.name}">Authorize %{ app }</translate>
|
||||
</button>
|
||||
|
|
@ -189,13 +189,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.ui.header .content {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.header > .ui.label {
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ import PasswordInput from "@/components/forms/PasswordInput"
|
|||
export default {
|
||||
props: {
|
||||
next: { type: String, default: "/library" },
|
||||
buttonClasses: { type: String, default: "green" },
|
||||
buttonClasses: { type: String, default: "success" },
|
||||
showSignup: { type: Boolean, default: true},
|
||||
},
|
||||
components: {
|
||||
|
|
@ -117,7 +117,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
<password-input required v-model="new_password" />
|
||||
</div>
|
||||
<dangerous-button
|
||||
:class="['ui', {'loading': isLoading}, 'yellow', 'button']"
|
||||
:class="['ui', {'loading': isLoading}, 'warning', 'button']"
|
||||
:action="submitPassword">
|
||||
<translate translate-context="Content/Settings/Button.Label">Change password</translate>
|
||||
<p slot="modal-header"><translate translate-context="Popup/Settings/Title">Change your password?</translate></p>
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
</td>
|
||||
<td>
|
||||
<dangerous-button
|
||||
class="ui tiny basic red button"
|
||||
class="ui tiny basic danger button"
|
||||
@confirm="revokeApp(app.client_id)">
|
||||
<translate translate-context="*/*/*/Verb">Revoke</translate>
|
||||
<p slot="modal-header" v-translate="{application: app.name}" translate-context="Popup/Settings/Title">Revoke access for application "%{ application }"?</p>
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
</div>
|
||||
</h2>
|
||||
<p><translate translate-context="Content/Settings/Paragraph">This is the list of applications that you have created.</translate></p>
|
||||
<router-link class="ui basic green button" :to="{name: 'settings.applications.new'}">
|
||||
<router-link class="ui basic success button" :to="{name: 'settings.applications.new'}">
|
||||
<translate translate-context="Content/Settings/Button.Label">Create a new application</translate>
|
||||
</router-link>
|
||||
<table v-if="ownedApps.length > 0" class="ui compact very basic unstackable table">
|
||||
|
|
@ -233,11 +233,11 @@
|
|||
<human-date :date="app.created" />
|
||||
</td>
|
||||
<td>
|
||||
<router-link class="ui basic tiny green button" :to="{name: 'settings.applications.edit', params: {id: app.client_id}}">
|
||||
<router-link class="ui basic tiny success button" :to="{name: 'settings.applications.edit', params: {id: app.client_id}}">
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
|
||||
</router-link>
|
||||
<dangerous-button
|
||||
class="ui tiny basic red button"
|
||||
class="ui tiny basic danger button"
|
||||
@confirm="deleteApp(app.client_id)">
|
||||
<translate translate-context="*/*/*/Verb">Delete</translate>
|
||||
<p slot="modal-header" v-translate="{application: app.name}" translate-context="Popup/Settings/Title">Delete application "%{ application }"?</p>
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
<password-input required v-model="password" />
|
||||
</div>
|
||||
<dangerous-button
|
||||
:class="['ui', {'loading': isDeletingAccount}, {disabled: !password}, 'red', 'button']"
|
||||
:class="['ui', {'loading': isDeletingAccount}, {disabled: !password}, 'danger', 'button']"
|
||||
:action="deleteAccount">
|
||||
<translate translate-context="*/*/Button.Label">Delete my account…</translate>
|
||||
<p slot="modal-header"><translate translate-context="Popup/Settings/Title">Do you want to delete your account?</translate></p>
|
||||
|
|
@ -534,7 +534,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<h2><translate translate-context="Content/Login/Title/Verb">Log in to your Funkwhale account</translate></h2>
|
||||
<login-form button-classes="basic green" :show-signup="false"></login-form>
|
||||
<login-form button-classes="basic success" :show-signup="false"></login-form>
|
||||
</div>
|
||||
<form
|
||||
v-else
|
||||
|
|
@ -93,7 +93,7 @@ export default {
|
|||
props: {
|
||||
defaultInvitation: { type: String, required: false, default: null },
|
||||
next: { type: String, default: "/" },
|
||||
buttonClasses: { type: String, default: "green" },
|
||||
buttonClasses: { type: String, default: "success" },
|
||||
customization: { type: Object, default: null},
|
||||
fetchDescriptionHtml: { type: Boolean, default: false},
|
||||
fetchDescriptionHtml: { type: Boolean, default: false},
|
||||
|
|
@ -176,7 +176,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
<dangerous-button
|
||||
v-if="token"
|
||||
:class="['ui', {'loading': isLoading}, 'grey', 'button']"
|
||||
:class="['ui', {'loading': isLoading}, 'button']"
|
||||
:action="requestNewToken">
|
||||
<translate translate-context="*/Settings/Button.Label/Verb">Request a new password</translate>
|
||||
<p slot="modal-header"><translate translate-context="Popup/Settings/Title">Request a new Subsonic API password?</translate></p>
|
||||
|
|
@ -42,12 +42,12 @@
|
|||
</dangerous-button>
|
||||
<button
|
||||
v-else
|
||||
color="grey"
|
||||
color=""
|
||||
:class="['ui', {'loading': isLoading}, 'button']"
|
||||
@click="requestNewToken"><translate translate-context="Content/Settings/Button.Label/Verb">Request a password</translate></button>
|
||||
<dangerous-button
|
||||
v-if="token"
|
||||
:class="['ui', {'loading': isLoading}, 'yellow', 'button']"
|
||||
:class="['ui', {'loading': isLoading}, 'warning', 'button']"
|
||||
:action="disable">
|
||||
<translate translate-context="Content/Settings/Button.Label/Verb">Disable Subsonic access</translate>
|
||||
<p slot="modal-header"><translate translate-context="Popup/Settings/Title">Disable Subsonic API access?</translate></p>
|
||||
|
|
@ -135,7 +135,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,3 @@ export default {
|
|||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form @submit.stop.prevent :class="['ui', {loading: isLoadingStep1}, 'form']">
|
||||
<form @submit.stop.prevent :class="['ui', {loading: isLoadingStep1}, 'form component-file-upload']">
|
||||
<div v-if="errors.length > 0" class="ui negative message">
|
||||
<div class="header"><translate translate-context="Content/*/Error message.Title">Error while publishing</translate></div>
|
||||
<ul class="list">
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<div
|
||||
v-if="file.error"
|
||||
@click.stop.prevent="selectedUploadId = file.response.uuid"
|
||||
class="ui basic red icon label"
|
||||
class="ui basic danger icon label"
|
||||
:title="file.error">
|
||||
<i class="warning sign icon"></i>
|
||||
</div>
|
||||
|
|
@ -402,9 +402,9 @@ export default {
|
|||
} else {
|
||||
d.icon = "user"
|
||||
if (c.artist.content_category === 'podcast') {
|
||||
d.iconClass = "bordered grey icon"
|
||||
d.iconClass = "bordered icon"
|
||||
} else {
|
||||
d.iconClass = "circular grey icon"
|
||||
d.iconClass = "circular icon"
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<span class="feedback" v-if="isLoading || isDone">
|
||||
<span v-if="isLoading" :class="['ui', 'active', size, 'inline', 'loader']"></span>
|
||||
<i v-if="isDone" :class="['green', size, 'check', 'icon']"></i>
|
||||
<i v-if="isDone" :class="['success', size, 'check', 'icon']"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="table-wrapper">
|
||||
<div class="table-wrapper component-action-table">
|
||||
<table class="ui compact very basic unstackable table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="field">
|
||||
<dangerous-button
|
||||
v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
|
||||
:confirm-color="currentAction.confirmColor || 'green'"
|
||||
:confirm-color="currentAction.confirmColor || 'success'"
|
||||
@confirm="launchAction">
|
||||
<translate translate-context="Content/*/Button.Label/Short, Verb">Go</translate>
|
||||
<p slot="modal-header">
|
||||
|
|
@ -300,11 +300,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.count.field {
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui.form .inline.fields {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.ui.circular.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</template>
|
||||
</div>
|
||||
<div class="ui bottom attached segment">
|
||||
<span :class="['right', 'floated', {'ui red text': remainingChars < 0}]" v-if="charLimit">
|
||||
<span :class="['right', 'floated', {'ui danger text': remainingChars < 0}]" v-if="charLimit">
|
||||
{{ remainingChars }}
|
||||
</span>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="ui fluid action input">
|
||||
<div class="ui fluid action input component-copy-input">
|
||||
<p class="message" v-if="copied">
|
||||
<translate translate-context="Content/*/Paragraph">Text copied to clipboard!</translate>
|
||||
</p>
|
||||
|
|
@ -39,14 +39,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.message {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -3em;
|
||||
padding: 0.3em;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
||||
background-color: white;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
props: {
|
||||
action: {type: Function, required: false},
|
||||
disabled: {type: Boolean, default: false},
|
||||
confirmColor: {type: String, default: "red", required: false}
|
||||
confirmColor: {type: String, default: "danger", required: false}
|
||||
},
|
||||
components: {
|
||||
Modal
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="ui small placeholder segment">
|
||||
<div class="ui small placeholder segment component-placeholder component-empty-state">
|
||||
<div class="ui header">
|
||||
<div class="content">
|
||||
<slot name="title">
|
||||
|
|
@ -28,13 +28,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ui.small.placeholder.segment {
|
||||
min-height: auto;
|
||||
}
|
||||
.ui.header .content {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span>
|
||||
<span class="component-user-link">
|
||||
<template v-if="avatar">
|
||||
<img
|
||||
class="ui tiny circular avatar"
|
||||
|
|
@ -32,9 +32,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tiny.circular.avatar {
|
||||
width: 1.7em;
|
||||
height: 1.7em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
translate-context="Content/Home/Placeholder"
|
||||
>No tracks have been added to your favorites yet</translate>
|
||||
</div>
|
||||
<router-link :to="'/library'" class="ui green labeled icon button">
|
||||
<router-link :to="'/library'" class="ui success labeled icon button">
|
||||
<i class="headphones icon"></i>
|
||||
<translate translate-context="Content/*/Verb">Browse the library</translate>
|
||||
</router-link>
|
||||
|
|
@ -178,7 +178,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,3 @@ export default {
|
|||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
<div role="button" class="ui basic cancel button">
|
||||
<translate translate-context="*/*/Button.Label/Verb">Close</translate>
|
||||
</div>
|
||||
<div role="button" @click="showModal = false; $emit('refresh')" class="ui confirm green 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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<translate v-else translate-context="*/*/*" :translate-params="{count: totalTracks}" :translate-n="totalTracks" translate-plural="%{ count } tracks">%{ count } track</translate>
|
||||
</template>
|
||||
<div class="ui small hidden divider"></div>
|
||||
<play-button class="orange" :tracks="object.tracks"></play-button>
|
||||
<play-button class="vibrant" :tracks="object.tracks"></play-button>
|
||||
<div class="ui hidden horizontal divider"></div>
|
||||
<album-dropdown
|
||||
:object="object"
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
</template>
|
||||
<human-duration v-if="totalDuration > 0" :duration="totalDuration"></human-duration>
|
||||
<div class="ui small hidden divider"></div>
|
||||
<play-button class="orange" :tracks="object.tracks"></play-button>
|
||||
<play-button class="vibrant" :tracks="object.tracks"></play-button>
|
||||
<div class="ui horizontal hidden divider"></div>
|
||||
<album-dropdown
|
||||
:object="object"
|
||||
|
|
|
|||
|
|
@ -58,7 +58,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
item-selector=".column"
|
||||
percent-position="true"
|
||||
stagger="0"
|
||||
class="ui stackable three column doubling grid">
|
||||
class="">
|
||||
<div
|
||||
v-if="result.results.length > 0"
|
||||
class="ui app-cards cards">
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
:to="{name: 'content.index'}"
|
||||
class="ui green button labeled icon">
|
||||
class="ui success button labeled icon">
|
||||
<i class="upload icon"></i>
|
||||
<translate translate-context="Content/*/Verb">
|
||||
Add some music
|
||||
|
|
@ -223,7 +223,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
</div>
|
||||
<div class="ui buttons">
|
||||
<play-button :is-playable="isPlayable" class="orange" :artist="object">
|
||||
<play-button :is-playable="isPlayable" class="vibrant" :artist="object">
|
||||
<translate translate-context="Content/Artist/Button.Label/Verb">Play all albums</translate>
|
||||
</play-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
:to="{name: 'content.index'}"
|
||||
class="ui green button labeled icon">
|
||||
class="ui success button labeled icon">
|
||||
<i class="upload icon"></i>
|
||||
<translate translate-context="Content/*/Verb">
|
||||
Add some music
|
||||
|
|
@ -214,24 +214,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import "../../style/vendor/media";
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.cards {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ui.three.cards .card {
|
||||
width: 100%;
|
||||
}
|
||||
@include media(">tablet") {
|
||||
.ui.three.cards .card {
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,19 +18,19 @@
|
|||
|
||||
<span class="right floated">
|
||||
<span v-if="obj.is_approved && obj.is_applied">
|
||||
<i class="green check icon"></i>
|
||||
<i class="success check icon"></i>
|
||||
<translate translate-context="Content/Library/Card/Short">Approved and applied</translate>
|
||||
</span>
|
||||
<span v-else-if="obj.is_approved">
|
||||
<i class="green check icon"></i>
|
||||
<i class="success check icon"></i>
|
||||
<translate translate-context="Content/*/*/Short">Approved</translate>
|
||||
</span>
|
||||
<span v-else-if="obj.is_approved === null">
|
||||
<i class="yellow hourglass icon"></i>
|
||||
<i class="warning hourglass icon"></i>
|
||||
<translate translate-context="Content/Admin/*/Noun">Pending review</translate>
|
||||
</span>
|
||||
<span v-else-if="obj.is_approved === false">
|
||||
<i class="red x icon"></i>
|
||||
<i class="dangerx icon"></i>
|
||||
<translate translate-context="Content/Library/*/Short">Rejected</translate>
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -95,18 +95,18 @@
|
|||
<button
|
||||
v-if="canApprove && obj.is_approved !== true"
|
||||
@click="approve(true)"
|
||||
:class="['ui', {loading: isLoading}, 'green', 'basic', 'button']">
|
||||
:class="['ui', {loading: isLoading}, 'success', 'basic', 'button']">
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Approve</translate>
|
||||
</button>
|
||||
<button
|
||||
v-if="canApprove && obj.is_approved === null"
|
||||
@click="approve(false)"
|
||||
:class="['ui', {loading: isLoading}, 'yellow', 'basic', 'button']">
|
||||
:class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']">
|
||||
<translate translate-context="Content/Library/Button.Label">Reject</translate>
|
||||
</button>
|
||||
<dangerous-button
|
||||
v-if="canDelete"
|
||||
:class="['ui', {loading: isLoading}, 'basic red button']"
|
||||
:class="['ui', {loading: isLoading}, 'basic danger button']"
|
||||
:action="remove">
|
||||
<translate translate-context="*/*/*/Verb">Delete</translate>
|
||||
<p slot="modal-header"><translate translate-context="Popup/Library/Title">Delete this suggestion?</translate></p>
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
>
|
||||
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
|
||||
</router-link>
|
||||
<button :class="['ui', {'loading': isLoading}, 'right', 'floated', 'green', 'button']" type="submit" :disabled="isLoading || !mutationPayload">
|
||||
<button :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']" type="submit" :disabled="isLoading || !mutationPayload">
|
||||
<translate v-if="canEdit" key="1" translate-context="Content/Library/Button.Label/Verb">Submit and apply edit</translate>
|
||||
<translate v-else key="2" translate-context="Content/Library/Button.Label/Verb">Submit suggestion</translate>
|
||||
</button>
|
||||
|
|
@ -256,8 +256,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.reset.button {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="component-file-upload">
|
||||
<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 :class="['item', {active: currentTab === 'uploads'}]" @click="currentTab = 'uploads'">
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
<div v-if="files.length === 0" class="ui label">
|
||||
0
|
||||
</div>
|
||||
<div v-else-if="files.length > uploadedFilesCount + erroredFilesCount" class="ui yellow label">
|
||||
<div v-else-if="files.length > uploadedFilesCount + erroredFilesCount" class="ui warning label">
|
||||
{{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
|
||||
</div>
|
||||
<div v-else :class="['ui', {'green': erroredFilesCount === 0}, {'red': erroredFilesCount > 0}, 'label']">
|
||||
<div v-else :class="['ui', {'success': erroredFilesCount === 0}, {'danger': erroredFilesCount > 0}, 'label']">
|
||||
{{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -19,10 +19,10 @@
|
|||
<div v-if="processableFiles === 0" class="ui label">
|
||||
0
|
||||
</div>
|
||||
<div v-else-if="processableFiles > processedFilesCount" class="ui yellow label">
|
||||
<div v-else-if="processableFiles > processedFilesCount" class="ui warning label">
|
||||
{{ processedFilesCount }}/{{ processableFiles }}
|
||||
</div>
|
||||
<div v-else :class="['ui', {'green': uploads.errored === 0}, {'red': uploads.errored > 0}, 'label']">
|
||||
<div v-else :class="['ui', {'success': uploads.errored === 0}, {'danger': uploads.errored > 0}, 'label']">
|
||||
{{ processedFilesCount }}/{{ processableFiles }}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -54,12 +54,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="ui green button"><translate translate-context="Content/Library/Button.Label">Proceed</translate></button>
|
||||
<button type="submit" class="ui success button"><translate translate-context="Content/Library/Button.Label">Proceed</translate></button>
|
||||
</form>
|
||||
</div>
|
||||
<div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'uploads'}]">
|
||||
<div :class="['ui', {loading: isLoadingQuota}, 'container']">
|
||||
<div :class="['ui', {red: remainingSpace === 0}, {yellow: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']">
|
||||
<div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']">
|
||||
<div class="label">
|
||||
<translate translate-context="Content/Library/Paragraph">Remaining storage space</translate>
|
||||
</div>
|
||||
|
|
@ -113,14 +113,14 @@
|
|||
<td>{{ file.size | humanSize }}</td>
|
||||
<td>
|
||||
<span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
|
||||
<span class="ui red icon label">
|
||||
<span class="ui danger icon label">
|
||||
<i class="question circle outline icon" /> {{ file.error }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-else-if="file.success" class="ui green label">
|
||||
<span v-else-if="file.success" class="ui success label">
|
||||
<translate translate-context="Content/Library/Table" key="1">Uploaded</translate>
|
||||
</span>
|
||||
<span v-else-if="file.active" class="ui yellow label">
|
||||
<span v-else-if="file.active" class="ui warning label">
|
||||
<translate translate-context="Content/Library/Table" key="2">Uploading…</translate>
|
||||
({{ parseInt(file.progress) }}%)
|
||||
</span>
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
</button>
|
||||
</template>
|
||||
<template v-else-if="!file.success">
|
||||
<button class="ui tiny basic red icon right floated button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
|
||||
<button class="ui tiny basic danger icon right floated button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -396,16 +396,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.file-uploads.ui.button {
|
||||
display: block;
|
||||
padding: 2em 1em;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
border-style: dashed !important;
|
||||
border: 3px solid rgba(50, 50, 50, 0.5);
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="main library pusher">
|
||||
<div class="main pusher page-library">
|
||||
<router-view :key="$router.currentRoute.name"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,35 +21,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss">
|
||||
@import "../../style/vendor/media";
|
||||
|
||||
.library {
|
||||
.ui.segment.head {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 0;
|
||||
.segment-content {
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
@include media(">tablet") {
|
||||
padding: 4em;
|
||||
}
|
||||
}
|
||||
&.with-background {
|
||||
.header {
|
||||
&,
|
||||
.sub {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
.segment-content {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<h3 class="ui header">
|
||||
<translate translate-context="Content/Radio/Title">User radios</translate>
|
||||
</h3>
|
||||
<router-link class="ui green basic button" to="/library/radios/build" exact>
|
||||
<router-link class="ui success basic button" to="/library/radios/build" exact>
|
||||
<translate translate-context="Content/Radio/Button.Label/Verb">Create your own radio</translate>
|
||||
</router-link>
|
||||
<div class="ui hidden divider"></div>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
:to="{name: 'library.radios.build'}"
|
||||
class="ui green button labeled icon">
|
||||
class="ui success button labeled icon">
|
||||
<i class="rss icon"></i>
|
||||
<translate translate-context="Content/*/Verb">
|
||||
Create a radio
|
||||
|
|
@ -215,7 +215,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<main v-title="labels.title">
|
||||
<section class="ui vertical stripe segment">
|
||||
<h2 class="ui header">
|
||||
<span class="ui circular huge hashtag label">
|
||||
<span class="ui circular huge hashtag label component-label">
|
||||
{{ labels.title }}
|
||||
</span>
|
||||
</h2>
|
||||
|
|
@ -83,11 +83,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.ui.circular.label {
|
||||
padding-left: 1em !important;
|
||||
padding-right: 1em !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -82,11 +82,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ui.form .field > .selection.dropdown {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</h1>
|
||||
</div>
|
||||
<div class="eight wide right aligned column button-group">
|
||||
<play-button class="orange" :track="track">
|
||||
<play-button class="vibrant" :track="track">
|
||||
<translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate>
|
||||
</play-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -232,11 +232,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
.table.center.aligned {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<label for="public"><translate translate-context="Content/Radio/Checkbox.Label/Verb">Display publicly</translate></label>
|
||||
</div>
|
||||
<div class="ui hidden divider"></div>
|
||||
<button :disabled="!canSave" @click="save" :class="['ui', 'green', {loading: isLoading}, 'button']">
|
||||
<button :disabled="!canSave" @click="save" :class="['ui', 'success', {loading: isLoading}, 'button']">
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Save</translate>
|
||||
</button>
|
||||
<radio-button v-if="id" type="custom" :custom-radio-id="id"></radio-button>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<span
|
||||
@click="showCandidadesModal = !showCandidadesModal"
|
||||
v-if="checkResult"
|
||||
:class="['ui', {'green': checkResult.candidates.count > 10}, 'label']">
|
||||
:class="['ui', {'success': checkResult.candidates.count > 10}, 'label']">
|
||||
{{ checkResult.candidates.count }} tracks matching filter
|
||||
</span>
|
||||
<modal v-if="checkResult" :show.sync="showCandidadesModal">
|
||||
|
|
@ -49,14 +49,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui basic black deny button">
|
||||
<div class="ui basic deny button">
|
||||
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</td>
|
||||
<td>
|
||||
<button @click="$emit('delete', index)" class="ui basic red button"><translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate></button>
|
||||
<button @click="$emit('delete', index)" class="ui basic danger button"><translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate></button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ export default {
|
|||
// confirmationMessage: confirmationMessage,
|
||||
// isDangerous: true,
|
||||
// allowAll: false,
|
||||
// confirmColor: 'red',
|
||||
// confirmColor: 'danger',
|
||||
// },
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ export default {
|
|||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'red',
|
||||
confirmColor: 'danger',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ export default {
|
|||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'red',
|
||||
confirmColor: 'danger',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -211,7 +211,7 @@ export default {
|
|||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'red',
|
||||
confirmColor: 'danger',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export default {
|
|||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'red',
|
||||
confirmColor: 'danger',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export default {
|
|||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'red',
|
||||
confirmColor: 'danger',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ export default {
|
|||
confirmationMessage: confirmationMessage,
|
||||
isDangerous: true,
|
||||
allowAll: false,
|
||||
confirmColor: 'red',
|
||||
confirmColor: 'danger',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<td>
|
||||
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.name }}">
|
||||
{{ scope.obj.name }}
|
||||
<i v-if="allowListEnabled && scope.obj.allowed" class="green check icon" :title="labels.allowListTitle"></i>
|
||||
<i v-if="allowListEnabled && scope.obj.allowed" class="success check icon" :title="labels.allowListTitle"></i>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,11 +54,11 @@
|
|||
<button @click.prevent="$emit('cancel')" class="ui basic left floated button">
|
||||
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
|
||||
</button>
|
||||
<button :class="['ui', 'right', 'floated', 'green', {'disabled loading': isLoading}, 'button']" :disabled="isLoading">
|
||||
<button :class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']" :disabled="isLoading">
|
||||
<translate translate-context="Content/Moderation/Card.Button.Label/Verb" v-if="object" key="1">Update</translate>
|
||||
<translate translate-context="Content/Moderation/Card.Button.Label/Verb" v-else key="2">Create</translate>
|
||||
</button>
|
||||
<dangerous-button v-if="object" class="ui right floated basic red button" @confirm="remove">
|
||||
<dangerous-button v-if="object" class="ui right floated basic danger button" @confirm="remove">
|
||||
<translate translate-context="*/*/*/Verb">Delete</translate>
|
||||
<p slot="modal-header">
|
||||
<translate translate-context="Popup/Moderation/Title">Delete this moderation rule?</translate>
|
||||
|
|
@ -200,15 +200,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ui.placeholder.segment .field,
|
||||
.ui.placeholder.segment textarea,
|
||||
.ui.placeholder.segment > .ui.input,
|
||||
.ui.placeholder.segment .button {
|
||||
max-width: 100%;
|
||||
}
|
||||
.segment .right.floated.button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
<div class="meta">
|
||||
<dangerous-button
|
||||
:class="['ui', {loading: isLoading}, 'basic borderless mini grey button']"
|
||||
:class="['ui', {loading: isLoading}, 'basic borderless mini button']"
|
||||
@confirm="remove(note)">
|
||||
<i class="trash icon"></i>
|
||||
<translate translate-context="*/*/*/Verb">Delete</translate>
|
||||
|
|
|
|||
|
|
@ -59,12 +59,12 @@
|
|||
</td>
|
||||
<td v-if="obj.is_handled">
|
||||
<span v-if="obj.is_handled">
|
||||
<i class="green check icon"></i>
|
||||
<i class="success check icon"></i>
|
||||
<translate translate-context="Content/*/*/Short">Resolved</translate>
|
||||
</span>
|
||||
</td>
|
||||
<td v-else>
|
||||
<i class="red x icon"></i>
|
||||
<i class="dangerx icon"></i>
|
||||
<translate translate-context="Content/*/*/Short">Unresolved</translate>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -215,14 +215,14 @@
|
|||
v-if="obj.is_handled === false"
|
||||
@click="resolve(true)"
|
||||
:class="['ui', {loading: isLoading}, 'button']">
|
||||
<i class="green check icon"></i>
|
||||
<i class="success check icon"></i>
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Resolve</translate>
|
||||
</button>
|
||||
<button
|
||||
v-if="obj.is_handled === true"
|
||||
@click="resolve(false)"
|
||||
:class="['ui', {loading: isLoading}, 'button']">
|
||||
<i class="yellow redo icon"></i>
|
||||
<i class="warning redo icon"></i>
|
||||
<translate translate-context="Content/*/Button.Label">Unresolve</translate>
|
||||
</button>
|
||||
<template v-for="action in actions">
|
||||
|
|
@ -357,7 +357,7 @@ export default {
|
|||
modalContent: this.$pgettext('Content/Moderation/Popup,Paragraph', 'This will delete the object associated with this report and mark the report as resolved. The deletion is irreversible.'),
|
||||
modalConfirmLabel: this.$pgettext('*/*/*/Verb', 'Delete'),
|
||||
icon: 'x',
|
||||
iconColor: 'red',
|
||||
iconColor: 'danger',
|
||||
show: (obj) => { return !!obj.target },
|
||||
dangerous: true,
|
||||
handler: () => {
|
||||
|
|
|
|||
|
|
@ -41,15 +41,15 @@
|
|||
</td>
|
||||
<td>
|
||||
<template v-if="obj.status === 'pending'">
|
||||
<i class="yellow hourglass icon"></i>
|
||||
<i class="warning hourglass icon"></i>
|
||||
<translate translate-context="Content/Library/*/Short">Pending</translate>
|
||||
</template>
|
||||
<template v-else-if="obj.status === 'refused'">
|
||||
<i class="red x icon"></i>
|
||||
<i class="dangerx icon"></i>
|
||||
<translate translate-context="Content/*/*/Short">Refused</translate>
|
||||
</template>
|
||||
<template v-else-if="obj.status === 'approved'">
|
||||
<i class="green check icon"></i>
|
||||
<i class="success check icon"></i>
|
||||
<translate translate-context="Content/*/*/Short">Approved</translate>
|
||||
</template>
|
||||
</td>
|
||||
|
|
@ -118,14 +118,14 @@
|
|||
v-if="obj.status === 'pending' || obj.status === 'refused'"
|
||||
@click="approve(true)"
|
||||
:class="['ui', {loading: isLoading}, 'button']">
|
||||
<i class="green check icon"></i>
|
||||
<i class="success check icon"></i>
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Approve</translate>
|
||||
</button>
|
||||
<button
|
||||
v-if="obj.status === 'pending'"
|
||||
@click="approve(false)"
|
||||
:class="['ui', {loading: isLoading}, 'button']">
|
||||
<i class="red x icon"></i>
|
||||
<i class="dangerx icon"></i>
|
||||
<translate translate-context="Content/*/Button.Label">Refuse</translate>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -82,6 +82,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
<router-link :to="{name: 'manage.users.users.detail', params: {id: scope.obj.id }}">{{ scope.obj.owner.username }}</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="scope.obj.users.length > 0" class="ui green basic label"><translate translate-context="Content/Admin/Table">Used</translate></span>
|
||||
<span v-else-if="moment().isAfter(scope.obj.expiration_date)" class="ui red basic label"><translate translate-context="Content/Admin/Table">Expired</translate></span>
|
||||
<span v-if="scope.obj.users.length > 0" class="ui success basic label"><translate translate-context="Content/Admin/Table">Used</translate></span>
|
||||
<span v-else-if="moment().isAfter(scope.obj.expiration_date)" class="ui danger basic label"><translate translate-context="Content/Admin/Table">Expired</translate></span>
|
||||
<span v-else class="ui basic label"><translate translate-context="Content/Admin/Table">Not used</translate></span>
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@
|
|||
<span>{{ scope.obj.email }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="scope.obj.is_active" class="ui basic green label"><translate translate-context="Content/Admin/Table">Active</translate></span>
|
||||
<span v-else class="ui basic grey label"><translate translate-context="Content/Admin/Table">Inactive</translate></span>
|
||||
<span v-if="scope.obj.is_active" class="ui basic success label"><translate translate-context="Content/Admin/Table">Active</translate></span>
|
||||
<span v-else class="ui basic label"><translate translate-context="Content/Admin/Table">Inactive</translate></span>
|
||||
</td>
|
||||
<td>
|
||||
<human-date :date="scope.obj.date_joined"></human-date>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div>
|
||||
<div :class="['ui', 'green', {loading: isLoading}, 'button']" @click="hide"><translate translate-context="Popup/*/Button.Label">Hide content</translate></div>
|
||||
<div :class="['ui', 'success', {loading: isLoading}, 'button']" @click="hide"><translate translate-context="Popup/*/Button.Label">Hide content</translate></div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
|
@ -102,7 +102,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
<div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div>
|
||||
<button
|
||||
v-if="canSubmit"
|
||||
:class="['ui', 'green', {loading: isLoading}, 'button']"
|
||||
:class="['ui', 'success', {loading: isLoading}, 'button']"
|
||||
type="submit" form="report-form">
|
||||
<translate translate-context="Popup/*/Button.Label">Submit report</translate>
|
||||
</button>
|
||||
|
|
@ -204,7 +204,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
</td>
|
||||
<td><human-date :date="item.activity.creation_date" /></td>
|
||||
<td class="read collapsing">
|
||||
<span @click="markRead(false)" v-if="item.is_read" :title="labels.markUnread">
|
||||
<span @click="markRead(false)" role="button" v-if="item.is_read" :title="labels.markUnread">
|
||||
<i class="redo icon" />
|
||||
</span>
|
||||
<span @click="markRead(true)" v-else :title="labels.markRead">
|
||||
<span @click="markRead(true)" role="button" v-else :title="labels.markRead">
|
||||
<i class="check icon" />
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -68,13 +68,13 @@ export default {
|
|||
if (a.related_object.approved === null) {
|
||||
message = this.labels.libraryPendingFollowMessage
|
||||
acceptFollow = {
|
||||
buttonClass: 'green',
|
||||
buttonClass: 'success',
|
||||
icon: 'check',
|
||||
label: this.$pgettext('Content/*/Button.Label/Verb', 'Approve'),
|
||||
handler: () => { self.approveLibraryFollow(a.related_object) }
|
||||
},
|
||||
rejectFollow = {
|
||||
buttonClass: 'red',
|
||||
buttonClass: 'danger',
|
||||
icon: 'x',
|
||||
label: this.$pgettext('Content/*/Button.Label/Verb', 'Reject'),
|
||||
handler: () => { self.rejectLibraryFollow(a.related_object) }
|
||||
|
|
@ -146,8 +146,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.read > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
|
||||
:class="['ui', 'head-image', 'squares']">
|
||||
<img v-lazy="url" v-for="(url, idx) in images" :key="idx" />
|
||||
<play-button :icon-only="true" :is-playable="playlist.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :playlist="playlist"></play-button>
|
||||
<play-button :icon-only="true" :is-playable="playlist.is_playable" :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']" :playlist="playlist"></play-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
<div class="extra content">
|
||||
<translate translate-context="*/*/*" :translate-params="{count: playlist.tracks_count}" :translate-n="playlist.tracks_count" translate-plural="%{ count } tracks">%{ count } track</translate>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="playlist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :playlist="playlist"></play-button>
|
||||
<play-button class="right floated basic icon" :dropdown-only="true" :is-playable="playlist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large really discrete']" :playlist="playlist"></play-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="ui text container">
|
||||
<div class="ui text container component-playlist-editor">
|
||||
<playlist-form @updated="$emit('playlist-updated', $event)" :title="false" :playlist="playlist"></playlist-form>
|
||||
<h3 class="ui top attached header">
|
||||
<translate translate-context="Content/Playlist/Title">Playlist editor</translate>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<translate translate-context="Content/Playlist/Paragraph">Syncing changes to server…</translate>
|
||||
</template>
|
||||
<template v-else-if="status === 'errored'">
|
||||
<i class="red close icon"></i>
|
||||
<i class="dangerclose icon"></i>
|
||||
<translate translate-context="Content/Playlist/Error message.Title">An error occurred while saving your changes</translate>
|
||||
<div v-if="errors.length > 0" class="ui negative message">
|
||||
<ul class="list">
|
||||
|
|
@ -21,15 +21,15 @@
|
|||
<div v-else-if="status === 'confirmDuplicateAdd'" class="ui warning message">
|
||||
<p translate-context="Content/Playlist/Paragraph"
|
||||
v-translate="{playlist: playlist.name}">Some tracks in your queue are already in this playlist:</p>
|
||||
<ul id="duplicateTrackList" class="ui relaxed divided list">
|
||||
<ul class="ui relaxed divided list duplicate-tracks-list">
|
||||
<li v-for="track in duplicateTrackAddInfo.tracks" class="ui item">{{ track }}</li>
|
||||
</ul>
|
||||
<button
|
||||
class="ui small green button"
|
||||
class="ui small success button"
|
||||
@click="insertMany(queueTracks, true)"><translate translate-context="*/Playlist/Button.Label/Verb">Add anyways</translate></button>
|
||||
</div>
|
||||
<template v-else-if="status === 'saved'">
|
||||
<i class="green check icon"></i> <translate translate-context="Content/Playlist/Paragraph">Changes synced with server</translate>
|
||||
<i class="success check icon"></i> <translate translate-context="Content/Playlist/Paragraph">Changes synced with server</translate>
|
||||
</template>
|
||||
</div>
|
||||
<div class="ui bottom attached segment">
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</translate>
|
||||
</div>
|
||||
|
||||
<dangerous-button :disabled="plts.length === 0" class="ui labeled right floated yellow icon button" :action="clearPlaylist">
|
||||
<dangerous-button :disabled="plts.length === 0" class="ui labeled right floated warning icon button" :action="clearPlaylist">
|
||||
<i class="eraser icon"></i> <translate translate-context="*/Playlist/Button.Label/Verb">Clear playlist</translate>
|
||||
<p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title" :translate-params="{playlist: playlist.name}">
|
||||
Do you want to clear the playlist "%{ playlist }"?
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
{{ plt.track.artist.name }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<i @click.stop="removePlt(index)" class="circular red trash icon"></i>
|
||||
<i @click.stop="removePlt(index)" class="circular danger trash icon"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
|
|
@ -220,11 +220,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
#duplicateTrackList {
|
||||
max-height: 10em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -130,7 +130,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
class="ui small basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
|
||||
</button>
|
||||
<button
|
||||
class="ui small green button"
|
||||
class="ui small success button"
|
||||
@click="addToPlaylist(lastSelectedPlaylist, true)">
|
||||
<translate translate-context="*/Playlist/Button.Label/Verb">Add anyways</translate></button>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<td>
|
||||
<div
|
||||
v-if="track"
|
||||
class="ui green icon basic small right floated button"
|
||||
class="ui success icon basic small right floated button"
|
||||
:title="labels.addToPlaylist"
|
||||
@click="addToPlaylist(playlist.id, false)">
|
||||
<i class="plus icon"></i> <translate translate-context="Popup/Playlist/Table.Button.Label/Verb">Add track</translate>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<template v-else>
|
||||
<div class="ui small placeholder segment">
|
||||
<div class="ui small placeholder segment component-placeholder">
|
||||
<div class="ui header">
|
||||
<translate translate-context="Popup/Playlist/EmptyState">No results matching your filter</translate>
|
||||
</div>
|
||||
|
|
@ -197,10 +197,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.ui.small.placeholder.segment {
|
||||
min-height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<button
|
||||
v-if="$store.state.auth.authenticated"
|
||||
@click="$store.commit('playlists/chooseTrack', null)"
|
||||
class="ui green icon labeled button"
|
||||
class="ui success icon labeled button"
|
||||
>
|
||||
<i class="list icon"></i>
|
||||
<translate translate-context="Content/Home/CreatePlaylist">
|
||||
|
|
@ -105,8 +105,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.refresh.icon {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'icon', 'labeled', 'button']">
|
||||
<i class="ui feed icon"></i>
|
||||
<button @click="toggleRadio" :class="['ui', 'primary', {'inverted': running}, 'icon', 'labeled', 'button']">
|
||||
<i class="ui feed icon" role="button"></i>
|
||||
<template v-if="running"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></template>
|
||||
<template v-else><translate translate-context="*/Queue/Button.Label/Short, Verb">Start radio</translate></template>
|
||||
</button>
|
||||
|
|
@ -43,10 +43,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="ui hidden divider"></div>
|
||||
<radio-button class="right floated button" :type="type" :custom-radio-id="customRadioId" :object-id="objectId"></radio-button>
|
||||
<router-link
|
||||
class="ui basic yellow button right floated"
|
||||
class="ui basic warning button right floated"
|
||||
v-if="$store.state.auth.authenticated && type === 'custom' && radio.user.id === $store.state.auth.profile.id"
|
||||
:to="{name: 'library.radios.edit', params: {id: customRadioId }}">
|
||||
<translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
|
||||
|
|
@ -55,8 +55,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,3 @@ export default {
|
|||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tag-list">
|
||||
<div class="component-tags-list">
|
||||
<router-link
|
||||
:to="{name: detailRoute, params: {id: tag}}"
|
||||
:class="['ui', 'circular', 'hashtag', 'label', labelClasses]"
|
||||
|
|
@ -38,12 +38,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ui.circular.label {
|
||||
padding-left: 1em !important;
|
||||
padding-right: 1em !important;
|
||||
}
|
||||
.hashtag {
|
||||
margin: 0.25em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue