From f340b487de224c9b00fb737ca576ca97996be83f Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Thu, 8 Oct 2020 11:07:42 +0300
Subject: [PATCH] Color Scheme update

---
 .../file-preview-screen.component.html        | 19 ++++-----
 .../file-preview-screen.component.ts          | 12 ++++--
 .../file/pdf-viewer/pdf-viewer.component.ts   | 16 ++++---
 .../file/service/viwer-sync.service.ts        |  4 ++
 .../src/assets/styles/red-controls.scss       | 35 ++++++++++++++++
 .../src/assets/styles/red-material-theme.scss | 42 +++++++++----------
 apps/red-ui/src/assets/styles/red-theme.scss  |  1 +
 .../src/assets/styles/red-variables.scss      |  5 +++
 8 files changed, 90 insertions(+), 44 deletions(-)
 create mode 100644 apps/red-ui/src/assets/styles/red-controls.scss

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 47f052825..d149bb06b 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
@@ -2,11 +2,12 @@
   <div class="red-top-bar">
     <div class="top-bar-row">
       <div class="menu left">
-        <mat-button-toggle-group #group="matButtonToggleGroup" name="type" value="ANNOTATED"
-                                 (change)="viewerChanged(group.value)">
-          <mat-button-toggle value="ANNOTATED">Annotated</mat-button-toggle>
-          <mat-button-toggle value="REDACTED">Redacted</mat-button-toggle>
-        </mat-button-toggle-group>
+        <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">
@@ -17,13 +18,11 @@
   </div>
 
   <div class="view-container">
-    <redaction-pdf-viewer [class.visible]="group.value === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
+    <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]="group.value === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
-                          (fileReady)="fileReady('REDACTED')">
-      [fileStatus]="appStateService.activeFile">
-    </redaction-pdf-viewer>
+    <redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
+                          (fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
   </div>
 
   <button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
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 0b25c1d94..d0bd0c2e4 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
@@ -51,10 +51,6 @@ export class FilePreviewScreenComponent implements OnInit {
     });
   }
 
-  viewerChanged(value: any) {
-    this._viewerSyncService.activateViewer(value);
-  }
-
   fileReady(viewer: string) {
     this._readyViewers.push(viewer);
   }
@@ -62,4 +58,12 @@ export class FilePreviewScreenComponent implements OnInit {
   get viewReady() {
     return this._readyViewers.length >= 2;
   }
+
+  get activeViewer() {
+    return this._viewerSyncService.activeViewer;
+  }
+
+  activateViewer(value: string) {
+    this._viewerSyncService.activateViewer(value);
+  }
 }
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
index 31a7b65e5..ff94d803f 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@@ -29,9 +29,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('viewer', {static: true}) viewer: ElementRef;
   wvInstance: WebViewerInstance;
 
-  _annotatedFileData: Blob;
-  _originalFileData: Blob;
-  _redactedFileData: Blob;
+  _fileData: Blob;
 
 
   constructor(
@@ -82,20 +80,20 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
     let fileObs$: Observable<any>;
     switch (this.fileType) {
       case FileType.ANNOTATED:
-        fileObs$ = this._annotatedFileData ? of(this._annotatedFileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
-          this._annotatedFileData = data;
+        fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
+          this._fileData = data;
         }));
         break;
       case FileType.REDACTED:
-        fileObs$ = this._redactedFileData ? of(this._redactedFileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
-          this._redactedFileData = data;
+        fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
+          this._fileData = data;
         }));
         break;
       case FileType.ORIGINAL:
       default:
-        fileObs$ = this._originalFileData ? of(this._originalFileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
+        fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
           .pipe(tap(data => {
-            this._originalFileData = data;
+            this._fileData = data;
           }));
         break;
     }
diff --git a/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts b/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts
index 917049919..4cf739bc5 100644
--- a/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts
+++ b/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts
@@ -52,6 +52,10 @@ export class ViewerSyncService {
     this._activeViewer = key;
   }
 
+  get activeViewer(){
+    return this._activeViewer;
+  }
+
 
   private _roundToTwo(num) {
     return +(Math.round(Number(num + "e+2")) + "e-2");
diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss
new file mode 100644
index 000000000..88ef6284c
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-controls.scss
@@ -0,0 +1,35 @@
+@import "red-variables";
+
+
+.btn-group {
+  display: flex;
+  flex-direction: row;
+
+  .btn-group-btn {
+    color: $accent;
+    background: $white;
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    letter-spacing: 0;
+    line-height: 14px;
+    padding: 10px 14px;
+    transition: color 0.25s ease-in-out;
+    outline: none;
+    border: none;
+
+    &:hover {
+      color: $black;
+    }
+
+    &.active {
+      color: $light;
+      background: $primary;
+      border-radius: 17px;
+    }
+
+    &.active:hover {
+      color: $grey-3;
+    }
+
+  }
+}
diff --git a/apps/red-ui/src/assets/styles/red-material-theme.scss b/apps/red-ui/src/assets/styles/red-material-theme.scss
index 042d3e34a..73613e0de 100644
--- a/apps/red-ui/src/assets/styles/red-material-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-material-theme.scss
@@ -3,27 +3,27 @@
 
 @include mat-core();
 
-$grey-1-palette: (
+$primary-palette: (
+  default: $red-1,
+  lighter: lighten($red-1, 30%),
+  darker: darken($red-1, 30%),
+  text: $red-1,
+  contrast: (
+    default: $light,
+    lighter: $light,
+    darker: $light
+  )
+);
+
+$secondary-palette: (
   default: $grey-1,
   lighter: lighten($grey-1, 30%),
   darker: darken($grey-1, 30%),
   text: $grey-1,
   contrast: (
-    default: $white,
-    lighter: $white,
-    darker: $white
-  )
-);
-
-$grey-2-palette: (
-  default: $grey-2,
-  lighter: lighten($grey-2, 30%),
-  darker: darken($grey-2, 30%),
-  text: $grey-2,
-  contrast: (
-    default: $grey-1,
-    lighter: $grey-1,
-    darker: $grey-1
+    default: $light,
+    lighter: $light,
+    darker: $light
   )
 );
 
@@ -33,14 +33,14 @@ $red-palette: (
   darker: darken($red-1, 30%),
   text: $red-1,
   contrast: (
-    default: $white,
-    lighter: $white,
-    darker: $white
+    default: $light,
+    lighter: $light,
+    darker: $light
   )
 );
 
-$gn-next-primary: mat-palette($grey-1-palette, default, lighter, darker, text);
-$gn-next-secondary: mat-palette($grey-2-palette, default, lighter, darker, text);
+$gn-next-primary: mat-palette($primary-palette, default, lighter, darker, text);
+$gn-next-secondary: mat-palette($secondary-palette, default, lighter, darker, text);
 $gn-next-warning: mat-palette($red-palette, default, lighter, darker, text);
 
 $gn-next-mat-theme: mat-light-theme((
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index d457a323e..047268421 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -7,3 +7,4 @@
 @import "red-dialog";
 @import "red-input";
 @import "red-media-queries";
+@import "red-controls";
diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss
index 0f16efd88..51ba5541c 100644
--- a/apps/red-ui/src/assets/styles/red-variables.scss
+++ b/apps/red-ui/src/assets/styles/red-variables.scss
@@ -1,6 +1,11 @@
 $white: #FFF;
 $black: #000;
 
+$primary: #DD4D50;
+$accent: #283241;
+$light: #FFF;
+$dark: #000;
+
 $grey-1: #283241;
 $grey-2: #ECECEE;
 $grey-3: #aaacb3;