Commit 8666afc6 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch '890-report-library' into 'develop'

See #890: UI for reporting libraries

See merge request funkwhale/funkwhale!882
parents 9d0e593b 08eeab4d
<script>
export default {
methods: {
getReportableObjs ({track, album, artist, playlist, account}) {
getReportableObjs ({track, album, artist, playlist, account, library}) {
let reportableObjs = []
if (account) {
let accountLabel = this.$pgettext('*/Moderation/*/Verb', "Report @%{ username }…")
......@@ -57,17 +57,28 @@ export default {
}
})
}
if (this.playlist) {
if (playlist) {
reportableObjs.push({
label: this.$pgettext('*/Moderation/*/Verb', "Report this playlist…"),
target: {
type: 'playlist',
id: this.playlist.id,
label: this.playlist.name,
id: playlist.id,
label: playlist.name,
typeLabel: this.$pgettext("*/*/*", 'Playlist'),
}
})
}
if (library) {
reportableObjs.push({
label: this.$pgettext('*/Moderation/*/Verb', "Report this library…"),
target: {
type: 'library',
uuid: library.uuid,
label: library.name,
typeLabel: this.$pgettext("*/*/*", 'Library'),
}
})
}
return reportableObjs
},
}
......
......@@ -184,7 +184,7 @@ body {
}
}
.ellipsis {
.ellipsis:not(.icon) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
......@@ -250,6 +250,9 @@ a {
display: none;
}
.nomargin {
margin: 0 !important;
}
button.reset {
border: none;
margin: 0;
......
......@@ -3,17 +3,30 @@
<div class="content">
<div class="header">
{{ library.name }}
<div class="ui right floated dropdown">
<i class="ellipsis vertical grey large icon nomargin"></i>
<div class="menu">
<div
role="button"
v-for="obj in getReportableObjs({library, account: library.actor})"
:key="obj.target.type + obj.target.id"
class="item basic"
@click.stop.prevent="$store.dispatch('moderation/report', obj.target)">
<i class="share icon" /> {{ obj.label }}
</div>
</div>
</div>
<span
v-if="library.privacy_level === 'me'"
class="right floated"
:data-tooltip="labels.tooltips.me">
<i class="small lock icon"></i>
<i class="small lock grey icon"></i>
</span>
<span
v-else-if="library.privacy_level === 'everyone'"
class="right floated"
:data-tooltip="labels.tooltips.everyone">
<i class="small globe icon"></i>
<i class="small globe grey icon"></i>
</span>
</div>
<div class="meta">
......@@ -120,8 +133,11 @@
</template>
<script>
import axios from 'axios'
import ReportMixin from '@/components/mixins/Report'
import jQuery from 'jquery'
export default {
mixins: [ReportMixin],
props: {
library: {type: Object, required: true},
displayFollow: {type: Boolean, default: true},
......@@ -136,6 +152,18 @@ export default {
latestScan: this.library.latest_scan,
}
},
mounted () {
let self = this
jQuery(this.$el).find('.ui.dropdown').dropdown({
selectOnKeydown: false,
action: function (text, value, $el) {
// used ton ensure focusing the dropdown and clicking via keyboard
// works as expected
self.$refs[$el.data('ref')].click()
jQuery(self.$el).find('.ui.dropdown').dropdown('hide')
}
})
},
computed: {
labels () {
let me = this.$pgettext('Content/Library/Card.Help text', 'This library is private and your approval from its owner is needed to access its content')
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment