From 7f22678774f315ab30d7f184dc0b6b443de3f7af Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta@devplant.ro>
Date: Thu, 25 Aug 2022 12:43:14 +0300
Subject: [PATCH] RED-4819: Responsive action panel.

---
 .../user-management.component.html            |  2 +-
 .../user-management.component.scss            | 10 +++++
 .../file-preview-screen.component.html        |  5 ++-
 .../file-preview-screen.component.scss        | 11 +++++-
 .../file-preview-screen.component.ts          | 38 +++++++++++++++++--
 .../file-actions/file-actions.component.html  |  1 +
 .../file-actions/file-actions.component.ts    |  1 +
 .../expandable-file-actions.component.ts      | 32 ++++++++++++----
 8 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
index 04ed8d584..2c16c3499 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
@@ -1,7 +1,7 @@
 <iqser-status-bar [configs]="statusBarConfig$ | async" [small]="true"></iqser-status-bar>
 
 <ng-container *ngIf="stateService.file$ | async as file">
-    <div class="all-caps-label mr-16 ml-8">
+    <div class="all-caps-label mr-16 ml-8 label">
         {{ translations[file.workflowStatus] | translate }}
         <span *ngIf="file.isUnderReview || file.isUnderApproval">{{ 'by' | translate }}:</span>
     </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.scss b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.scss
index cfa1c0158..95ab4b564 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.scss
@@ -15,3 +15,13 @@
         margin-right: 2px;
     }
 }
+
+@media only screen and (max-width: 1015px) {
+    .label {
+        display: none;
+    }
+
+    iqser-status-bar {
+        margin-right: 1rem;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
index 60764d885..4e3f9d474 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
@@ -5,7 +5,7 @@
                 <redaction-view-switch (switchView)="switchView($event)"></redaction-view-switch>
             </div>
 
-            <div class="flex-1 actions-container">
+            <div class="flex-2 actions-container" #actionsWrapper>
                 <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
 
                 <redaction-user-management></redaction-user-management>
@@ -13,7 +13,7 @@
                 <ng-container *ngIf="permissionsService.isApprover(dossier) && !!file.lastReviewer">
                     <div class="vertical-line"></div>
 
-                    <div class="all-caps-label mr-16 ml-8">
+                    <div class="all-caps-label mr-16 ml-8 label">
                         {{ 'file-preview.last-assignee' | translate: { status: file.workflowStatus } }}
                     </div>
 
@@ -30,6 +30,7 @@
                     [file]="file"
                     fileActionsHelpModeKey="document_features_in_editor"
                     type="file-preview"
+                    [minWidth]="width"
                 ></redaction-file-actions>
 
                 <iqser-circle-button
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
index 42f83d042..bdae60f2f 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
@@ -5,11 +5,14 @@
     margin: 0 16px;
 }
 
+.page-header {
+    max-width: 100vw;
+}
+
 .actions-container {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    min-width: fit-content;
 }
 
 .content-inner {
@@ -62,3 +65,9 @@
 redaction-pdf-viewer.hidden {
     visibility: hidden;
 }
+
+@media only screen and (max-width: 1015px) {
+    .label {
+        display: none;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index d02a0e527..ed6c86184 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -1,4 +1,17 @@
-import { ChangeDetectorRef, Component, HostListener, Injector, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    HostListener,
+    Injector,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+} from '@angular/core';
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
 import { Core } from '@pdftron/webviewer';
 import {
@@ -6,6 +19,7 @@ import {
     bool,
     CircleButtonTypes,
     CustomError,
+    Debounce,
     ErrorService,
     FilterService,
     List,
@@ -59,19 +73,24 @@ const textActions = [TextPopups.ADD_DICTIONARY, TextPopups.ADD_FALSE_POSITIVE];
     templateUrl: './file-preview-screen.component.html',
     styleUrls: ['./file-preview-screen.component.scss'],
     providers: filePreviewScreenProviders,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
+export class FilePreviewScreenComponent
+    extends AutoUnsubscribe
+    implements AfterViewInit, OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate
+{
     readonly circleButtonTypes = CircleButtonTypes;
-
     fullScreen = false;
     readonly fileId = this.state.fileId;
     readonly dossierId = this.state.dossierId;
     readonly file$ = this.state.file$.pipe(tap(file => this._fileDataService.loadAnnotations(file)));
+    width: number;
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
         static: false,
     })
     private readonly _filterTemplate: TemplateRef<unknown>;
+    @ViewChild('actionsWrapper', { static: false }) private _actionsWrapper: ElementRef;
 
     constructor(
         readonly pdf: PdfViewer,
@@ -261,6 +280,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this.pdfProxyService.loadViewer();
     }
 
+    ngAfterViewInit() {
+        const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            this._updateItemWidth(entries[0]);
+        });
+        _observer.observe(this._actionsWrapper.nativeElement);
+    }
+
     openManualAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
         return this._ngZone.run(() => {
             const file = this.state.file;
@@ -422,6 +448,12 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         return [oldAnnotations, newAnnotations];
     }
 
+    @Debounce(30)
+    private _updateItemWidth(entry: ResizeObserverEntry): void {
+        this.width = entry.contentRect.width;
+        this._changeRef.detectChanges();
+    }
+
     #getAnnotationsToDraw(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) {
         const currentPage = this.pdf.currentPage;
         const currentPageAnnotations = this._annotationManager.get(a => a.getPageNumber() === currentPage);
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html
index 0df04628f..2693e70d1 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html
@@ -17,6 +17,7 @@
             [buttonType]="buttonType"
             [helpModeKey]="fileActionsHelpModeKey"
             [maxWidth]="maxWidth"
+            [minWidth]="minWidth"
             [tooltipPosition]="tooltipPosition"
         ></redaction-expandable-file-actions>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
index 02e3ca90d..fa93dd704 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
@@ -52,6 +52,7 @@ export class FileActionsComponent implements OnChanges {
     @Input() dossier: Dossier;
     @Input() type: 'file-preview' | 'dossier-overview-list' | 'dossier-overview-workflow';
     @Input() maxWidth: number;
+    @Input() minWidth: number;
     @Input() fileActionsHelpModeKey: 'document_features_in_dossier' | 'document_features_in_editor' = 'document_features_in_dossier';
     toggleTooltip?: string;
     assignTooltip?: string;
diff --git a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
index 07ae9c81c..4b13c96d4 100644
--- a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
@@ -14,6 +14,7 @@ import { firstValueFrom } from 'rxjs';
 })
 export class ExpandableFileActionsComponent implements OnChanges {
     @Input() maxWidth: number;
+    @Input() minWidth: number;
     @Input() actions: Action[];
     @Input() buttonType: CircleButtonType;
     @Input() tooltipPosition: IqserTooltipPosition;
@@ -34,19 +35,34 @@ export class ExpandableFileActionsComponent implements OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        if (changes.actions || changes.maxWidth) {
+        if (changes.actions || changes.maxWidth || changes.minWidth) {
+            let count = 0;
             if (this.maxWidth) {
-                const count = Math.floor(this.maxWidth / 36) || 1;
-                if (count >= this.actions.length) {
-                    this.displayedButtons = [...this.actions];
-                    this.hiddenButtons = [];
-                } else {
-                    this.displayedButtons = this.actions.slice(0, count - 1);
-                    this.hiddenButtons = this.actions.slice(count - 1);
+                count = Math.floor(this.maxWidth / 36) || 1;
+            } else {
+                this.displayedButtons = [...this.actions];
+                this.hiddenButtons = [];
+            }
+
+            if (this.minWidth <= 850) {
+                count = Math.floor(this.minWidth / (this.actions.length * 15)) || 1;
+                if (this.minWidth <= 450) {
+                    this.displayedButtons = [];
+                    this.hiddenButtons = [...this.actions];
+                    return;
                 }
             } else {
                 this.displayedButtons = [...this.actions];
                 this.hiddenButtons = [];
+                return;
+            }
+
+            if (count >= this.actions.length) {
+                this.displayedButtons = [...this.actions];
+                this.hiddenButtons = [];
+            } else {
+                this.displayedButtons = this.actions.slice(0, count - 1);
+                this.hiddenButtons = this.actions.slice(count - 1);
             }
         }