Switching to a named filters/single input on video-abuse

9 files changed, 62 insertions, 27 deletions

diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index cf06401cf..26c2a30d4 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -12,6 +12,7 @@
 
   input {
     @include peertube-input-text(250px);
+    flex-grow: 1;
   }
 }
 
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 2f6e12d1c..b55b18333 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -7,10 +7,32 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="ml-auto">
-        <input
-          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event)"
-        >
+        <div class="input-group">
+          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+            <div class="input-group-text" ngbDropdownToggle>
+              <span class="caret" aria-haspopup="menu" role="button"></span>
+            </div>
+
+            <div role="menu" ngbDropdownMenu>
+              <h6 class="dropdown-header" i18n>Filter reports</h6>
+
+              <!-- TODO:
+              <div class="dropdown-item" i18n>Reports opened by admins</div>
+              <div class="dropdown-item" i18n>Reports on videos with multiple reports</div>
+              <div class="dropdown-item" i18n>Unassigned reports</div>
+              -->
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'is:blocked' }" class="dropdown-item" i18n>Reports with blocked videos</a>
+              <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'is:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onSearch($event)"
+          >
+        </div>
       </div>
     </div>
   </ng-template>
@@ -100,7 +122,7 @@
 
       <td class="action-cell">
         <my-action-dropdown
-          [ngClass]="{ 'show': expanded }" placement="bottom-right auto" container="body"
+          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
           i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"
         ></my-action-dropdown>
       </td>
@@ -118,7 +140,7 @@
               <div class="d-flex">
                 <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
                 <span class="col-9 moderation-expanded-text">
-                  <div class="chip">
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="chip">
                     <img
                       class="avatar"
                       [src]="videoAbuse.reporterAccount.avatar.path"
@@ -128,8 +150,8 @@
                     <div>
                       <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
                     </div>
-                  </div>
-                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': videoAbuse.reporterAccount.displayName }" class="ml-auto text-muted video-details-links" i18n>
+                  </a>
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' + videoAbuse.reporterAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
                     {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                   </a>
                 </span>
@@ -149,7 +171,7 @@
                       <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
                     </div>
                   </div>
-                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': videoAbuse.video.channel.ownerAccount.displayName }" class="ml-auto text-muted video-details-links" i18n>
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:&quot;' +videoAbuse.video.channel.ownerAccount.displayName + '&quot;' }" class="ml-auto text-muted video-details-links" i18n>
                     {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                   </a>
                 </span>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
index d6bc34935..8eee15b64 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@@ -13,3 +13,11 @@
 .video-abuse-states .glyphicon-comment {
   margin-left: 0.5rem;
 }
+
+.input-group {
+  @include peertube-input-group(300px);
+
+  .dropdown-toggle::after {
+    margin-left: 0;
+  }
+}
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
index 217d585af..5cd93f6af 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -16,7 +16,3 @@ input[type=submit] {
 
   margin-top: 10px;
 }
-
-.input-group-append {
-  height: 30px;
-}
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index 8f8af655c..ba27ee7ff 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -19,10 +19,6 @@ my-actor-avatar-info {
   @include peertube-input-group(fit-content);
 }
 
-.input-group-append {
-  height: 30px;
-}
-
 input {
   &[type=text] {
     @include peertube-input-text(340px);
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index e135b5cb4..cc60ef524 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -58,10 +58,6 @@
   @include peertube-input-group(400px);
 }
 
-.input-group-append {
-  height: 30px;
-}
-
 input:not([type=submit]) {
   @include peertube-input-text(400px);
 
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index 5283a6cc3..b739c5ae2 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -88,10 +88,6 @@
     }
   }
 
-  .dropdown-header {
-    padding-left: 1rem;
-  }
-
   ::ng-deep form {
     padding: 0.25rem 1rem;
   }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 377c85070..50f1dafed 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -41,6 +41,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
 
+  .dropdown-header {
+    padding-left: 1rem;
+  }
+
   .dropdown-item {
     padding: 3px 15px;
 
@@ -262,6 +266,18 @@ ngb-tooltip-window {
   }
 }
 
-.input-group > .form-control {
-  flex: initial;
+.input-group {
+  & > .form-control {
+    flex: initial;
+  }
+
+  .input-group-prepend,
+  .input-group-append {
+    height: 30px;
+  }
+
+  .input-group-prepend + input {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
 }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index b3cd7cf51..eab2b2dfd 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -32,6 +32,10 @@ p-table {
       height: 40px;
       display: flex;
       align-items: center;
+
+      .input-group-text {
+        background-color: transparent;
+      }
     }
   }