Display document info over workload

apps/red-ui/src/app/components/document-info/document-info.component.html

@@ -15,8 +15,9 @@
     </div>
 </div>
 
+<div class="content" redactionHasScrollbar>
     <div class="section">
-    Attributes go here
+        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">
@@ -37,3 +38,4 @@
             <span>{{ 'file-preview.tabs.document-info.details.due' | translate: { date: project.project.dueDate | date: 'mediumDate' } }}</span>
         </div>
     </div>
+</div>

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 {

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html

@@ -203,11 +203,10 @@
             ></redaction-pdf-viewer>
         </div>
 
-        <div class="right-container" redactionHasScrollbar>
+        <div class="right-container">
-            <redaction-document-info *ngIf="viewDocumentInfo" [file]="fileData.fileStatus" (closeDocumentInfoView)="viewDocumentInfo = false">
+            <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
@@ -320,7 +319,6 @@
                     </div>
                 </div>
             </div>
-            </ng-container>
         </div>
     </div>
 </section>

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;
-
+    position: relative;
-    &.has-scrollbar:hover {
-        ::ng-deep redaction-document-info .right-title,
-        ::ng-deep redaction-document-info .section {
-            padding-right: 13px;
-        }
-    }
 
     ::ng-deep.right-title {
         height: 70px;

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 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);
-        }
-    }
 
     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;