View toggle

apps/red-ui/src/app/app.module.ts

@@ -52,6 +52,7 @@ import { AppStateGuard } from './state/app-state.guard';
 import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { ManualRedactionDialogComponent } from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
   return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -134,6 +135,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
     NgpSortModule,
     MatToolbarModule,
     MatButtonModule,
+    MatSlideToggleModule,
     MatMenuModule,
     MatIconModule,
     MatTooltipModule,

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

@@ -1,17 +1,8 @@
 <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>
+    <mat-slide-toggle color="primary"
+                      [(ngModel)]="redactedView"
+                      translate="file-preview.view-toggle.label"></mat-slide-toggle>
     <button color="warn" mat-flat-button
             translate="file-preview.download-redacted.label"></button>
   </div>
@@ -86,7 +77,7 @@
 
             <div class="annotation-actions">
               <button mat-icon-button (click)="suggestRemoveAnnotation($event, annotation)">
-                <mat-icon svgIcon="red:delete" ></mat-icon>
+                <mat-icon svgIcon="red:delete"></mat-icon>
               </button>
             </div>
           </div>

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

@@ -31,6 +31,7 @@ export class FilePreviewScreenComponent implements OnInit {
   private _readyViewers: string[] = [];
   private projectId: string;
   private _selectedTab: 'NAVIGATION' | 'ANNOTATIONS' | 'INFO' = 'NAVIGATION';
+  private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED';
 
   @ViewChild(PdfViewerComponent)
   private _viewerComponent: PdfViewerComponent;
@@ -75,6 +76,15 @@ export class FilePreviewScreenComponent implements OnInit {
     return this._userService.user;
   }
 
+  public get redactedView() {
+    return this._activeViewer === 'REDACTED';
+  }
+
+  public set redactedView(value: boolean) {
+    this._activeViewer = value ? 'REDACTED' : 'ANNOTATED';
+    this._activateViewer(this._activeViewer);
+  }
+
   public ngOnInit(): void {
     // PDFTRON cache fix
     localStorage.clear();
@@ -103,7 +113,7 @@ export class FilePreviewScreenComponent implements OnInit {
     return this._viewerSyncService.activeViewer;
   }
 
-  public activateViewer(value: string) {
+  private _activateViewer(value: string) {
     this._viewerSyncService.activateViewer(value);
   }
 

apps/red-ui/src/assets/i18n/en.json

@@ -323,11 +323,8 @@
     }
   },
   "file-preview": {
-    "annotated": {
-      "label": "Review Annotations"
-    },
-    "redacted": {
-      "label": "Preview Redaction"
+    "view-toggle": {
+      "label": "Redacted View"
     },
     "download-redacted": {
       "label": "Download Redacted"

apps/red-ui/src/assets/styles/red-theme.scss

@@ -7,6 +7,7 @@
 @import "red-dialog";
 @import "red-input";
 @import "red-select";
+@import "red-toggle";
 @import "red-media-queries";
 @import "red-tables";
 @import "red-components";

apps/red-ui/src/assets/styles/red-toggle.scss

@@ -0,0 +1,23 @@
+mat-slide-toggle {
+  display: flex !important;
+  flex-direction: row-reverse;
+  gap: 8px;
+
+  .mat-slide-toggle-bar {
+    height: 16px !important;
+    width: 30px !important;
+    border-radius: 16px !important;
+  }
+
+  .mat-slide-toggle-thumb-container {
+    top: 2px !important;
+    left: 2px !important;
+    height: 12px !important;
+    width: 12px !important;
+  }
+
+  .mat-slide-toggle-thumb {
+    height: 12px !important;
+    width: 12px !important;
+  }
+}