From 55fd25aa710aeb453281fe86bdf20881a29fc13e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 9 Oct 2020 01:14:10 +0300
Subject: [PATCH] File preview layout

---
 .../file-preview-screen.component.html        | 50 +++++++++++--------
 .../file-preview-screen.component.scss        | 15 ++----
 .../file/pdf-viewer/pdf-viewer.component.scss |  3 +-
 .../project-listing-screen.component.html     |  4 +-
 .../project-overview-screen.component.html    |  4 +-
 apps/red-ui/src/assets/i18n/en.json           | 11 ++++
 .../src/assets/styles/red-page-layout.scss    |  4 +-
 7 files changed, 51 insertions(+), 40 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 d149bb06b..5ae6e4c2e 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
@@ -1,30 +1,36 @@
-<section [class.hidden]="!viewReady">
-  <div class="red-top-bar">
-    <div class="top-bar-row">
-      <div class="menu left">
-        <div class="btn-group">
-          <button class="btn-group-btn" [class.active]="activeViewer === 'ANNOTATED'" (click)="activateViewer('ANNOTATED')">Annotated
-          </button>
-          <button class="btn-group-btn" [class.active]="activeViewer === 'REDACTED'" (click)="activateViewer('REDACTED')">Redacted
-          </button>
-        </div>
-      </div>
-      <div class="menu right ">
-        <div class="heading-l clamp-1">
-          {{appStateService.activeFile?.filename}}
-        </div>
+<section class="" [class.hidden]="!viewReady">
+  <div class="page-header">
+    <div class="flex-row">
+      <div class="btn-group">
+        <button class="btn-group-btn" [class.active]="activeViewer === 'ANNOTATED'"
+                (click)="activateViewer('ANNOTATED')"
+                translate="file-preview.annotated.label">
+        </button>
+        <button class="btn-group-btn" [class.active]="activeViewer === 'REDACTED'"
+                (click)="activateViewer('REDACTED')"
+                translate="file-preview.redacted.label">
+        </button>
       </div>
     </div>
+
+    <button color="warn" mat-flat-button
+            translate="file-preview.download-redacted.label"></button>
   </div>
 
-  <div class="view-container">
-    <redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
-                          [fileStatus]="appStateService.activeFile"
-                          (fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
-    <redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
-                          (fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
-  </div>
+  <div class="flex red-content-inner">
+    <div class="left-container">
+      <redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
+                            [fileStatus]="appStateService.activeFile"
+                            (fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
+      <redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
+                            (fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
+    </div>
 
+    <div class="right-fixed-container">
+      test
+    </div>
+
+  </div>
   <button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
     <mat-icon svgIcon="red:info"></mat-icon>
   </button>
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 5501ba1d8..013e2b042 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
@@ -1,18 +1,13 @@
 
 redaction-pdf-viewer {
+
   position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
+  width: calc(100vw - 379px);
+  height: calc(100vh - 110px);
+  top: 110px;
 
   &.visible {
-    z-index: 100;
+    z-index: 2;
   }
 }
 
-.view-container{
-  width: 100%;
-  height: calc(100vh - 122px);
-  position: relative;
-}
-
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss
index 3cf8bf021..b422b059c 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss
@@ -6,6 +6,5 @@
 }
 
 .viewer {
-  width: 100%;
-  height: calc(100vh - 122px)
+  height: 100%;
 }
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 3f33cf2c6..00fe7ff0a 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -1,4 +1,4 @@
-<section class="center-section" *ngIf="viewReady">
+<section *ngIf="viewReady">
 
   <div class="page-header">
     <div class="filters flex-row">
@@ -15,7 +15,7 @@
   <div *ngIf="appStateService.allProjects?.length === 0 " translate="projects.no-projects.label"></div>
 
   <div class="flex red-content-inner">
-    <div class="table-container">
+    <div class="left-container">
       <div class="table-header">
         <span class="subheading">
           {{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 575db46ca..89477b61b 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -1,4 +1,4 @@
-<section class="center-section" *ngIf="viewReady">
+<section *ngIf="viewReady">
   <div *ngIf="!appStateService.activeProject"
        [innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}"
        class="heading-l"></div>
@@ -19,7 +19,7 @@
   </div>
 
   <div class="flex red-content-inner">
-    <div class="table-container">
+    <div class="left-container">
       <div class="table-header">
         <span class="subheading">
           {{'project-overview.table-header.title.label'| translate:{ length: appStateService.projectFiles?.length || 0 } }}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index d4f289e75..fa41f5aef 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -273,6 +273,17 @@
       "label": "Requested project: {{projectId}} does not exist! <a href='/ui/projects'>Back to Project Listing. <a/>"
     }
   },
+  "file-preview": {
+    "annotated": {
+      "label": "Annotated"
+    },
+    "redacted": {
+      "label": "Redacted"
+    },
+    "download-redacted": {
+      "label": "Download Redacted"
+    }
+  },
   "initials-avatar": {
     "unassigned": {
       "label": "Unassigned"
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 232f4784a..7c9dad431 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -21,7 +21,7 @@ html, body {
   width: 100vw;
   box-sizing: border-box;
   background-color: $white;
-  z-index: 1;
+  z-index: 3;
 }
 
 .red-content-inner {
@@ -71,7 +71,7 @@ html, body {
   margin-top: 20px;
 }
 
-.table-container {
+.left-container {
   height: calc(100vh - 61px - 50px);
   width: calc(100vw - 379px);
 }