diff --git a/front/src/components/mixins/Report.vue b/front/src/components/mixins/Report.vue index 94e72a96c4238fc79507ccdecde64f378e68d423..160f7dc9485ee907bba5285fd69d5dd4bd8d3462 100644 --- a/front/src/components/mixins/Report.vue +++ b/front/src/components/mixins/Report.vue @@ -1,7 +1,7 @@ <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 }, } diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss index c53edd14c970cefaa51c87bfe5970170b760896d..72bd6963790bb771d609364868c46a5b90df83ca 100644 --- a/front/src/style/_main.scss +++ b/front/src/style/_main.scss @@ -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; diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue index b78f7f220af0b02438d87740e3ab3c1d2d7981be..0fbb94c0cc76d7d6f10e5221ea6e4aa29797e3a6 100644 --- a/front/src/views/content/remote/Card.vue +++ b/front/src/views/content/remote/Card.vue @@ -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')