From de19b9a287f10bb8b4b7d753d74f86858e03334c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 19 Oct 2020 00:17:34 +0300
Subject: [PATCH] Expandable filters

---
 .../file-preview-screen.component.html              | 13 +++++++++----
 .../file-preview-screen.component.scss              |  2 +-
 .../file-preview-screen.component.ts                |  6 ++++++
 apps/red-ui/src/assets/styles/red-menu.scss         | 13 +++++++++++--
 apps/red-ui/src/assets/styles/red-page-layout.scss  |  2 +-
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 29af6b76f..7da724bd3 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -51,7 +51,7 @@
             <mat-icon>arrow_drop_down</mat-icon>
           </button>
           <div class="dot" *ngIf="hasActiveFilters"></div>
-          <mat-menu class="filter-menu" #filterMenu="matMenu" xPosition="before">
+          <mat-menu #filterMenu="matMenu" xPosition="before">
             <div class="filter-menu-header">
               <div class="all-caps-label" translate="file-preview.filter-menu.filter-types.label"></div>
               <div class="actions">
@@ -62,7 +62,11 @@
               </div>
             </div>
             <div *ngFor="let key of filterKeys()">
-              <div class="mat-menu-item" (click)="$event.stopPropagation()">
+              <div class="mat-menu-item flex" (click)="$event.stopPropagation()">
+                <div class="arrow-wrapper" *ngIf="hasSubsections(filters[key])">
+                  <mat-icon *ngIf="expandedFilters[key]" (click)="setExpanded(key, false, $event)">arrow_drop_down</mat-icon>
+                  <mat-icon *ngIf="!expandedFilters[key]" (click)="setExpanded(key, true, $event)">arrow_right</mat-icon>
+                </div>
                 <mat-checkbox [checked]="isChecked(key)"
                               [indeterminate]="isIndeterminate(key)"
                               (change)="setAllFilters(filters[key], $event.checked, hasSubsections(filters[key]) ? null : key)"
@@ -71,7 +75,7 @@
                   {{"file-preview.filter-menu." + key + ".label" | translate }}
                 </mat-checkbox>
               </div>
-              <div *ngIf="hasSubsections(filters[key])">
+              <div *ngIf="hasSubsections(filters[key]) && expandedFilters[key]">
                 <div *ngFor="let subkey of filterKeys(key)"
                      class="padding-left mat-menu-item"
                      (click)="$event.stopPropagation()"
@@ -111,7 +115,8 @@
                  (click)="selectAnnotation(annotation)"
             >
 
-              <redaction-annotation-icon [type]="getType(annotation) + ' ' + getDictionary(annotation)"></redaction-annotation-icon>
+              <redaction-annotation-icon
+                [type]="getType(annotation) + ' ' + getDictionary(annotation)"></redaction-annotation-icon>
               <div class="flex-1">
                 <div><strong>{{getType(annotation) | translate}}</strong></div>
                 <div><strong><span translate="dictionary"></span>: </strong>{{getDictionary(annotation)}}</div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index b4080f61c..7b53dc8a5 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -143,8 +143,8 @@ redaction-pdf-viewer {
 .filter-menu-header {
   display: flex;
   justify-content: space-between;
-  width: 250px;
   padding: 7px 15px 15px;
+  width: 350px;
 
   .actions {
     display: flex;
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index d0b873eff..28d166832 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -48,6 +48,7 @@ export class FilePreviewScreenComponent implements OnInit {
   public displayedAnnotations: { [key: number]: { annotations: Annotations.Annotation[] } } = {};
   public selectedAnnotation: Annotations.Annotation;
   public filters: AnnotationFilters;
+  public expandedFilters: AnnotationFilters = { hint: false };
   public activeViewerPage: number;
 
   private _manualRedactionEntry: AddRedactionRequest;
@@ -308,4 +309,9 @@ export class FilePreviewScreenComponent implements OnInit {
   public hasSubsections(filter: AnnotationFilters | boolean) {
     return AnnotationUtils.hasSubsections(filter);
   }
+
+  public setExpanded(key: string, value: boolean, $event: MouseEvent) {
+    $event.stopPropagation();
+    this.expandedFilters[key] = value;
+  }
 }
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index e030e4d30..dc12d76f7 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -3,18 +3,27 @@
 .mat-menu-panel {
   border-radius: 8px !important;
   box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
+  max-width: none !important;
 
   .mat-menu-item {
     font-family: 'Inter', sans-serif;
     font-size: 13px;
     color: $accent;
 
+    .arrow-wrapper {
+      width: 24px;
+
+      mat-icon {
+        width: 14px;
+      }
+    }
+
     &.padding-left {
-      padding-left: 40px;
+      padding-left: 64px;
     }
 
     .mat-checkbox-layout {
-      width: 100%;
+      margin-left: 4px;
 
       .mat-checkbox-inner-container {
         margin-left: 0;
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index d84095c1f..0263fd26e 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -73,7 +73,7 @@ html, body {
 }
 
 .flex {
-  display: flex;
+  display: flex !important;
 }
 
 .flex-1 {