Merge branch '890-mod-ui-improvements-round2' into 'develop'

See #890: minor improvements to report UI

See merge request funkwhale/funkwhale!876

front/src/components/manage/moderation/ReportCard.vue

@@ -120,6 +120,10 @@
           <div v-if="!obj.target" class="ui warning message">
             <translate translate-context="Content/Moderation/Message">The object associated with this report was deleted.</translate>
           </div>
+          <router-link class="ui basic button" v-if="target && configs[target.type].urls.getDetail" :to="configs[target.type].urls.getDetail(obj.target_state)">
+            <i class="eye icon"></i>
+            <translate translate-context="Content/Moderation/Link">View public page</translate>
+          </router-link>
           <router-link class="ui basic button" v-if="target && configs[target.type].urls.getAdminDetail" :to="configs[target.type].urls.getAdminDetail(obj.target_state)">
             <i class="wrench icon"></i>
             <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
@@ -223,7 +227,7 @@
             </button>
             <template v-for="action in actions">
               <dangerous-button
-                v-if="action.dangerous"
+                v-if="action.dangerous && action.show(obj)"
                 :class="['ui', {loading: isLoading}, 'button']"
                 color=""
                 :action="action.handler">
@@ -352,15 +356,17 @@ export default {
         actions.push({
           label: this.$pgettext('Content/Moderation/Button/Verb', 'Delete reported object'),
           modalHeader: this.$pgettext('Content/Moderation/Popup/Header', 'Delete reported object?'),
-          modalContent: this.$pgettext('Content/Moderation/Popup,Paragraph', 'This will delete the object associated with this report. This action is irreversible.'),
+          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',
+          show: (obj) => { return !!obj.target },
           dangerous: true,
           handler: () => {
             axios.delete(deleteUrl).then((response) => {
               console.log('Target deleted')
               self.obj.target = null
+              self.resolve(true)
             }, error => {
               console.log('Error while deleting target')
             })

front/src/components/moderation/ReportModal.vue

@@ -19,19 +19,24 @@
         <translate translate-context="*/Moderation/Popup,Paragraph">Use this form to submit a report to our moderation team.</translate>
       </p>
       <form v-if="canSubmit" id="report-form" class="ui form" @submit.prevent="submit">
-        <div v-if="!$store.state.auth.authenticated" class="ui inline required field">
+        <div class="fields">
-          <label for="report-submitter-email">
+          <report-category-dropdown
-            <translate translate-context="Content/*/*/Noun">Email</translate>
+            class="ui required eight wide field"
-          </label>
+            v-model="category"
-          <input type="email" v-model="submitterEmail" name="report-submitter-email" id="report-submitter-email" required>
+            :required="true"
+            :empty="true"
+            :restrict-to="allowedCategories"
+            :label="true"></report-category-dropdown>
+          <div v-if="!$store.state.auth.authenticated" class="ui eight wide required field">
+            <label for="report-submitter-email">
+              <translate translate-context="Content/*/*/Noun">Email</translate>
+            </label>
+            <input type="email" v-model="submitterEmail" name="report-submitter-email" id="report-submitter-email" required>
+            <p>
+              <translate translate-context="*/*/Field,Help">We'll use this email if we need to contact you regarding this report.</translate>
+            </p>
+          </div>
         </div>
-        <report-category-dropdown
-          class="ui inline required field"
-          v-model="category"
-          :required="true"
-          :empty="true"
-          :restrict-to="allowedCategories"
-          :label="true"></report-category-dropdown>
         <div class="ui field">
           <label for="report-summary">
             <translate translate-context="*/*/Field.Label/Noun">Message</translate>

front/src/entities.js

@@ -15,7 +15,8 @@ export default {
           return `manage/library/artists/${obj.id}/`
         },
         urls: {
-          getAdminDetail: (obj) => { return {name: 'manage.library.artists.detail', params: {id: obj.id}}}
+          getDetail: (obj) => { return {name: 'library.artists.detail', params: {id: obj.id}}},
+          getAdminDetail: (obj) => { return {name: 'manage.library.artists.detail', params: {id: obj.id}}},
         },
         moderatedFields: [
           {
@@ -49,6 +50,7 @@ export default {
           return `manage/library/albums/${obj.id}/`
         },
         urls: {
+          getDetail: (obj) => { return {name: 'library.albums.detail', params: {id: obj.id}}},
           getAdminDetail: (obj) => { return {name: 'manage.library.albums.detail', params: {id: obj.id}}}
         },
         moderatedFields: [
@@ -89,6 +91,7 @@ export default {
           return `manage/library/tracks/${obj.id}/`
         },
         urls: {
+          getDetail: (obj) => { return {name: 'library.tracks.detail', params: {id: obj.id}}},
           getAdminDetail: (obj) => { return {name: 'manage.library.tracks.detail', params: {id: obj.id}}}
         },
         moderatedFields: [
@@ -156,6 +159,7 @@ export default {
         label: this.$pgettext('*/*/*', 'Playlist'),
         icon: 'list',
         urls: {
+          getDetail: (obj) => { return {name: 'library.playlists.detail', params: {id: obj.id}}},
           // getAdminDetail: (obj) => { return {name: 'manage.playlists.detail', params: {id: obj.id}}}
         },
         moderatedFields: [

front/src/style/_main.scss

@@ -166,6 +166,9 @@ body {
   @include media(">widedesktop") {
     left: $widedesktop-sidebar-width;
   }
+  > .ui.message {
+    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.7);
+  }
 }
 .main-pusher {
   padding: 1.5rem 0;

front/src/views/admin/moderation/ReportsList.vue

@@ -55,7 +55,7 @@
         <empty-state @refresh="fetchData()" :refresh="true"></empty-state>
       </div>
       <div v-else-if="mode === 'card'">
-        <report-card :obj="obj" v-for="obj in result.results" :key="obj.uuid" />
+        <report-card @handled="fetchData" :obj="obj" v-for="obj in result.results" :key="obj.uuid" />
       </div>
     </section>
   </main>