From f2687264021307d321dac4526ef202b3fffee4d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 24 Mar 2021 23:24:13 +0200
Subject: [PATCH] Display document info over workload

---
 .../document-info.component.html              |  40 ++--
 .../document-info.component.scss              |  27 ++-
 .../file-preview-screen.component.html        | 198 +++++++++---------
 .../file-preview-screen.component.scss        |   8 +-
 .../file-preview-screen.component.ts          |  24 +--
 .../red-ui/src/assets/styles/red-loading.scss |   2 +-
 6 files changed, 149 insertions(+), 150 deletions(-)

diff --git a/apps/red-ui/src/app/components/document-info/document-info.component.html b/apps/red-ui/src/app/components/document-info/document-info.component.html
index ed28e1bde..95cbe235a 100644
--- a/apps/red-ui/src/app/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/components/document-info/document-info.component.html
@@ -15,25 +15,27 @@
     </div>
 </div>
 
-<div class="section">
-    Attributes go here
-</div>
+<div class="content" redactionHasScrollbar>
+    <div class="section">
+        1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
+    </div>
 
-<div class="section small-label stats-subtitle">
-    <div>
-        <mat-icon svgIcon="red:folder"></mat-icon>
-        <span>{{ 'file-preview.tabs.document-info.details.project' | translate: { projectName: project.name } }}</span>
-    </div>
-    <div>
-        <mat-icon svgIcon="red:document"></mat-icon>
-        <span>{{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: file.numberOfPages } }}</span>
-    </div>
-    <div>
-        <mat-icon svgIcon="red:calendar"></mat-icon>
-        <span>{{ 'file-preview.tabs.document-info.details.created-on' | translate: { date: file.added | date: 'mediumDate' } }}</span>
-    </div>
-    <div *ngIf="project.project.dueDate">
-        <mat-icon svgIcon="red:lightning"></mat-icon>
-        <span>{{ 'file-preview.tabs.document-info.details.due' | translate: { date: project.project.dueDate | date: 'mediumDate' } }}</span>
+    <div class="section small-label stats-subtitle">
+        <div>
+            <mat-icon svgIcon="red:folder"></mat-icon>
+            <span>{{ 'file-preview.tabs.document-info.details.project' | translate: { projectName: project.name } }}</span>
+        </div>
+        <div>
+            <mat-icon svgIcon="red:document"></mat-icon>
+            <span>{{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: file.numberOfPages } }}</span>
+        </div>
+        <div>
+            <mat-icon svgIcon="red:calendar"></mat-icon>
+            <span>{{ 'file-preview.tabs.document-info.details.created-on' | translate: { date: file.added | date: 'mediumDate' } }}</span>
+        </div>
+        <div *ngIf="project.project.dueDate">
+            <mat-icon svgIcon="red:lightning"></mat-icon>
+            <span>{{ 'file-preview.tabs.document-info.details.due' | translate: { date: project.project.dueDate | date: 'mediumDate' } }}</span>
+        </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/components/document-info/document-info.component.scss b/apps/red-ui/src/app/components/document-info/document-info.component.scss
index 87eaf014a..5f677f05a 100644
--- a/apps/red-ui/src/app/components/document-info/document-info.component.scss
+++ b/apps/red-ui/src/app/components/document-info/document-info.component.scss
@@ -1,4 +1,29 @@
 @import '../../../assets/styles/red-variables';
+@import '../../../assets/styles/red-mixins';
+
+:host {
+    display: block;
+    position: absolute;
+    height: 100%;
+    background: white;
+    z-index: 1;
+    width: 100%;
+    @include inset-shadow;
+}
+
+.content {
+    max-height: calc(100% - 71px);
+    @include scroll-bar;
+    overflow: hidden;
+
+    &:hover {
+        overflow: auto;
+    }
+
+    &.has-scrollbar .section {
+        padding-right: 13px;
+    }
+}
 
 .right-title > div {
     display: flex;
@@ -9,7 +34,7 @@
 }
 
 .section {
-    padding: 25px;
+    padding: 24px;
     flex-direction: column;
 
     > div {
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 cc7d8f9ce..243552329 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
@@ -203,124 +203,122 @@
             ></redaction-pdf-viewer>
         </div>
 
-        <div class="right-container" redactionHasScrollbar>
-            <redaction-document-info *ngIf="viewDocumentInfo" [file]="fileData.fileStatus" (closeDocumentInfoView)="viewDocumentInfo = false">
+        <div class="right-container">
+            <redaction-document-info *ngIf="viewReady && viewDocumentInfo" [file]="fileData.fileStatus" (closeDocumentInfoView)="viewDocumentInfo = false">
             </redaction-document-info>
 
-            <ng-container *ngIf="!viewDocumentInfo">
-                <div class="right-title heading" translate="file-preview.tabs.annotations.label">
-                    <div>
-                        <redaction-filter
-                            (filtersChanged)="filtersChanged($event)"
-                            [chevron]="true"
-                            [filterTemplate]="annotationFilterTemplate"
-                            [actionsTemplate]="annotationFilterActionTemplate"
-                            [filters]="annotationFilters"
-                        ></redaction-filter>
+            <div class="right-title heading" translate="file-preview.tabs.annotations.label">
+                <div>
+                    <redaction-filter
+                        (filtersChanged)="filtersChanged($event)"
+                        [chevron]="true"
+                        [filterTemplate]="annotationFilterTemplate"
+                        [actionsTemplate]="annotationFilterActionTemplate"
+                        [filters]="annotationFilters"
+                    ></redaction-filter>
+                </div>
+            </div>
+            <div class="right-content">
+                <div
+                    #quickNavigation
+                    (keydown)="preventKeyDefault($event)"
+                    (keyup)="preventKeyDefault($event)"
+                    [class.active-panel]="pagesPanelActive"
+                    class="quick-navigation"
+                    tabindex="0"
+                >
+                    <div
+                        class="jump"
+                        [class.disabled]="!quickScrollFirstEnabled"
+                        [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
+                        matTooltipPosition="above"
+                        (click)="quickScrollFirstEnabled && scrollQuickNavFirst()"
+                    >
+                        <mat-icon svgIcon="red:nav-first"></mat-icon>
+                    </div>
+                    <div class="pages" (scroll)="computeQuickNavButtonsState()" id="pages">
+                        <redaction-page-indicator
+                            (pageSelected)="pageSelectedByClick($event)"
+                            *ngFor="let pageNumber of displayedPages"
+                            [active]="pageNumber === activeViewerPage"
+                            [number]="pageNumber"
+                            [viewedPages]="fileData.viewedPages"
+                        >
+                        </redaction-page-indicator>
+                    </div>
+                    <div
+                        class="jump"
+                        [class.disabled]="!quickScrollLastEnabled"
+                        [matTooltip]="'file-preview.quick-nav.jump-last' | translate"
+                        matTooltipPosition="above"
+                        (click)="scrollQuickNavLast()"
+                    >
+                        <mat-icon svgIcon="red:nav-last"></mat-icon>
                     </div>
                 </div>
-                <div class="right-content">
+
+                <div style="overflow: hidden; width: 100%;">
+                    <div attr.anotation-page-header="{{ activeViewerPage }}" class="page-separator">
+                        <span *ngIf="!!activeViewerPage" class="all-caps-label"
+                            ><span translate="page"></span> {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }}
+                            <span [translate]="displayedAnnotations[activeViewerPage]?.annotations?.length === 1 ? 'annotation' : 'annotations'"></span
+                        ></span>
+                    </div>
+
                     <div
-                        #quickNavigation
+                        #annotationsElement
                         (keydown)="preventKeyDefault($event)"
                         (keyup)="preventKeyDefault($event)"
-                        [class.active-panel]="pagesPanelActive"
-                        class="quick-navigation"
-                        tabindex="0"
+                        [class.active-panel]="!pagesPanelActive"
+                        redactionHasScrollbar
+                        class="annotations"
+                        tabindex="1"
                     >
-                        <div
-                            class="jump"
-                            [class.disabled]="!quickScrollFirstEnabled"
-                            [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
-                            matTooltipPosition="above"
-                            (click)="quickScrollFirstEnabled && scrollQuickNavFirst()"
-                        >
-                            <mat-icon svgIcon="red:nav-first"></mat-icon>
-                        </div>
-                        <div class="pages" (scroll)="computeQuickNavButtonsState()" id="pages">
-                            <redaction-page-indicator
-                                (pageSelected)="pageSelectedByClick($event)"
-                                *ngFor="let pageNumber of displayedPages"
-                                [active]="pageNumber === activeViewerPage"
-                                [number]="pageNumber"
-                                [viewedPages]="fileData.viewedPages"
-                            >
-                            </redaction-page-indicator>
-                        </div>
-                        <div
-                            class="jump"
-                            [class.disabled]="!quickScrollLastEnabled"
-                            [matTooltip]="'file-preview.quick-nav.jump-last' | translate"
-                            matTooltipPosition="above"
-                            (click)="scrollQuickNavLast()"
-                        >
-                            <mat-icon svgIcon="red:nav-last"></mat-icon>
-                        </div>
-                    </div>
-
-                    <div style="overflow: hidden; width: 100%;">
-                        <div attr.anotation-page-header="{{ activeViewerPage }}" class="page-separator">
-                            <span *ngIf="!!activeViewerPage" class="all-caps-label"
-                                ><span translate="page"></span> {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }}
-                                <span [translate]="displayedAnnotations[activeViewerPage]?.annotations?.length === 1 ? 'annotation' : 'annotations'"></span
-                            ></span>
+                        <div *ngIf="!displayedAnnotations[activeViewerPage]" class="heading-l no-annotations">
+                            {{ 'file-preview.no-annotations-for-page' | translate }}
                         </div>
 
                         <div
-                            #annotationsElement
-                            (keydown)="preventKeyDefault($event)"
-                            (keyup)="preventKeyDefault($event)"
-                            [class.active-panel]="!pagesPanelActive"
-                            redactionHasScrollbar
-                            class="annotations"
-                            tabindex="1"
+                            (click)="annotationClicked(annotation)"
+                            class="annotation-wrapper"
+                            *ngFor="let annotation of displayedAnnotations[activeViewerPage]?.annotations"
+                            attr.annotation-id="{{ annotation.id }}"
+                            attr.annotation-page="{{ activeViewerPage }}"
+                            [class.active]="annotationIsSelected(annotation)"
                         >
-                            <div *ngIf="!displayedAnnotations[activeViewerPage]" class="heading-l no-annotations">
-                                {{ 'file-preview.no-annotations-for-page' | translate }}
-                            </div>
-
-                            <div
-                                (click)="annotationClicked(annotation)"
-                                class="annotation-wrapper"
-                                *ngFor="let annotation of displayedAnnotations[activeViewerPage]?.annotations"
-                                attr.annotation-id="{{ annotation.id }}"
-                                attr.annotation-page="{{ activeViewerPage }}"
-                                [class.active]="annotationIsSelected(annotation)"
-                            >
-                                <div class="active-marker"></div>
-                                <div class="annotation" [class.removed]="annotation.isChangeLogRemoved">
-                                    <redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
-                                        <div class="details">
-                                            <redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
-                                            <div class="flex-1">
-                                                <div>
-                                                    <strong>{{ annotation.typeLabel | translate }}</strong>
-                                                </div>
-                                                <div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
-                                                    <strong
-                                                        ><span>{{ annotation.descriptor | translate }}</span
-                                                        >: </strong
-                                                    >{{ annotation.dictionary | humanize: false }}
-                                                </div>
-                                                <div *ngIf="annotation.content && !annotation.isHint">
-                                                    <strong><span translate="content"></span>: </strong>{{ annotation.content }}
-                                                </div>
+                            <div class="active-marker"></div>
+                            <div class="annotation" [class.removed]="annotation.isChangeLogRemoved">
+                                <redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
+                                    <div class="details">
+                                        <redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
+                                        <div class="flex-1">
+                                            <div>
+                                                <strong>{{ annotation.typeLabel | translate }}</strong>
+                                            </div>
+                                            <div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
+                                                <strong
+                                                    ><span>{{ annotation.descriptor | translate }}</span
+                                                    >: </strong
+                                                >{{ annotation.dictionary | humanize: false }}
+                                            </div>
+                                            <div *ngIf="annotation.content && !annotation.isHint">
+                                                <strong><span translate="content"></span>: </strong>{{ annotation.content }}
                                             </div>
-                                            <redaction-annotation-actions
-                                                (annotationsChanged)="annotationsChangedByReviewAction($event)"
-                                                [annotation]="annotation"
-                                                [canPerformAnnotationActions]="canPerformAnnotationActions"
-                                                [viewer]="activeViewer"
-                                            ></redaction-annotation-actions>
                                         </div>
-                                    </redaction-hidden-action>
-                                    <redaction-comments [annotation]="annotation"></redaction-comments>
-                                </div>
+                                        <redaction-annotation-actions
+                                            (annotationsChanged)="annotationsChangedByReviewAction($event)"
+                                            [annotation]="annotation"
+                                            [canPerformAnnotationActions]="canPerformAnnotationActions"
+                                            [viewer]="activeViewer"
+                                        ></redaction-annotation-actions>
+                                    </div>
+                                </redaction-hidden-action>
+                                <redaction-comments [annotation]="annotation"></redaction-comments>
                             </div>
                         </div>
                     </div>
                 </div>
-            </ng-container>
+            </div>
         </div>
     </div>
 </section>
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 b5e7470f2..3e6be62b9 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
@@ -29,13 +29,7 @@
     padding: 0;
     width: 350px;
     min-width: 350px;
-
-    &.has-scrollbar:hover {
-        ::ng-deep redaction-document-info .right-title,
-        ::ng-deep redaction-document-info .section {
-            padding-right: 13px;
-        }
-    }
+    position: relative;
 
     ::ng-deep.right-title {
         height: 70px;
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 1f00a497f..a792fe1c7 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
@@ -146,21 +146,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
 
     hideSkipped = false;
 
-    private _viewDocumentInfo = false;
-
-    public get viewDocumentInfo(): boolean {
-        return this._viewDocumentInfo;
-    }
-
-    public set viewDocumentInfo(value: boolean) {
-        this._viewDocumentInfo = value;
-        if (!value) {
-            setTimeout(() => {
-                this._scrollQuickNavigation();
-                this.scrollToSelectedAnnotation();
-            }, 0);
-        }
-    }
+    public viewDocumentInfo = false;
 
     updateViewMode() {
         const allAnnotations = this._instance.annotManager.getAnnotationsList();
@@ -345,16 +331,13 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
 
     @debounce()
     private _scrollViews() {
-        if (this.viewDocumentInfo) {
-            return;
-        }
         this._scrollQuickNavigation();
         this._scrollAnnotations();
     }
 
     @debounce()
     private scrollToSelectedAnnotation() {
-        if (this.viewDocumentInfo || !this.selectedAnnotations || this.selectedAnnotations.length === 0) {
+        if (!this.selectedAnnotations || this.selectedAnnotations.length === 0) {
             return;
         }
         const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation.id}"].active`);
@@ -621,9 +604,6 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     }
 
     public computeQuickNavButtonsState() {
-        if (this.viewDocumentInfo) {
-            return;
-        }
         const element: HTMLElement = this._quickNavigationElement.nativeElement.querySelector(`#pages`);
         const { scrollTop, scrollHeight, clientHeight } = element;
         this.quickScrollFirstEnabled = scrollTop !== 0;
diff --git a/apps/red-ui/src/assets/styles/red-loading.scss b/apps/red-ui/src/assets/styles/red-loading.scss
index fb32d9e04..ac53e50bc 100644
--- a/apps/red-ui/src/assets/styles/red-loading.scss
+++ b/apps/red-ui/src/assets/styles/red-loading.scss
@@ -1,5 +1,5 @@
 .loading:after {
-    content: ' .';
+    content: '.';
     animation: dots 1s steps(5, end) infinite;
 }