move read-only indicator to file workload

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html

@@ -2,7 +2,7 @@
     <div>
         <div
             (click)="multiSelectActive = true"
-            *ngIf="!multiSelectActive"
+            *ngIf="!multiSelectActive && !isReadOnly"
             class="all-caps-label primary pointer"
             translate="file-preview.tabs.annotations.select"
         ></div>
@@ -17,6 +17,10 @@
     </div>
 </div>
 <div class="right-content">
+    <span class="read-only flex-center" *ngIf="isReadOnly">
+        <mat-icon svgIcon="red:read-only" class="red-white"></mat-icon>
+        <span class="read-only-text" translate="readonly-pill"></span>
+    </span>
     <div *ngIf="multiSelectActive" class="multi-select">
         <div class="selected-wrapper">
             <redaction-round-checkbox
@@ -39,7 +43,7 @@
             type="primary"
         ></redaction-circle-button>
     </div>
-    <div [class.multi-select-active]="multiSelectActive" class="annotations-wrapper">
+    <div [class.lower-height]="multiSelectActive || isReadOnly" class="annotations-wrapper">
         <div
             #quickNavigation
             (keydown)="preventKeyDefault($event)"
@@ -65,8 +69,7 @@
                     [active]="pageNumber === activeViewerPage"
                     [number]="pageNumber"
                     [viewedPages]="fileData.viewedPages"
-                >
-                </redaction-page-indicator>
+                ></redaction-page-indicator>
             </div>
             <div
                 (click)="scrollQuickNavLast()"
@@ -218,8 +221,7 @@
                                         *ngIf="!multiSelectActive"
                                         [ngTemplateOutletContext]="{ annotation: annotation }"
                                         [ngTemplateOutlet]="annotationActionsTemplate"
-                                    >
-                                    </ng-container>
+                                    ></ng-container>
                                 </div>
                             </div>
                             <redaction-comments [annotation]="annotation"></redaction-comments>
@@ -250,7 +252,6 @@
             (action)="toggleSkipped.emit($event)"
             [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
             type="dark-bg"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
     </ng-container>
 </ng-template>

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss

@@ -1,6 +1,26 @@
 @import '../../../../../assets/styles/red-variables';
 @import '../../../../../assets/styles/red-mixins';
 
+.read-only {
+    padding: 13px 0;
+    background-color: $primary;
+    color: $white;
+
+    .read-only-text {
+        padding-left: 8px;
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 14px;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    mat-icon {
+        height: 14px;
+        width: 14px;
+    }
+}
+
 .right-content {
     flex-direction: column;
 
@@ -42,7 +62,7 @@
         display: flex;
         height: 100%;
 
-        &.multi-select-active {
+        &.lower-height {
             height: calc(100% - 40px);
         }
     }
@@ -140,7 +160,7 @@
             }
 
             &.active {
-                &:not(.multi-select-active) .active-bar-marker {
+                &:not(.lower-height) .active-bar-marker {
                     background-color: $primary;
                 }
             }

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts

@@ -19,6 +19,7 @@ import { debounce } from '@utils/debounce';
 import { FileDataModel } from '@models/file/file-data.model';
 import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model';
 import { CommentsComponent } from '../comments/comments.component';
+import { PermissionsService } from '../../../../services/permissions.service';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -55,7 +56,8 @@ export class FileWorkloadComponent {
 
     constructor(
         private readonly _changeDetectorRef: ChangeDetectorRef,
-        private readonly _annotationProcessingService: AnnotationProcessingService
+        private readonly _annotationProcessingService: AnnotationProcessingService,
+        private readonly _permissionsService: PermissionsService
     ) {}
 
     private _annotations: AnnotationWrapper[];
@@ -67,6 +69,10 @@ export class FileWorkloadComponent {
 
     private _multiSelectActive = false;
 
+    get isReadOnly(): boolean {
+        return !this._permissionsService.canPerformAnnotationActions();
+    }
+
     get multiSelectActive(): boolean {
         return this._multiSelectActive;
     }

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

@@ -29,14 +29,6 @@
             </div>
         </div>
 
-        <div class="page-title">
-            <span
-                *ngIf="!permissionsService.canPerformAnnotationActions()"
-                class="pill"
-                translate="readonly-pill"
-            ></span>
-        </div>
-
         <div *ngIf="viewReady" class="flex-1 actions-container">
             <ng-container *ngIf="!appStateService.activeFile.isExcluded">
                 <redaction-status-bar [config]="statusBarConfig" [small]="true">