See #890: UI for reporting libraries

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
     },
   }

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;

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')