update view accordingly to excluded pages design

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

@@ -104,11 +104,21 @@
 
         <div style="overflow: hidden; width: 100%">
             <ng-container *ngIf="!excludePages">
-                <div [attr.anotation-page-header]="activeViewerPage" class="page-separator">
-                    <span *ngIf="!!activeViewerPage" class="all-caps-label">
-                        <span translate="page"></span> {{ activeViewerPage }} -
-                        {{ activeAnnotations?.length || 0 }}
-                        <span [translate]="activeAnnotations?.length === 1 ? 'annotation' : 'annotations'"></span>
+                <div [attr.anotation-page-header]="activeViewerPage" [class.padding-left-0]="isExcluded" class="page-separator">
+                    <span *ngIf="!!activeViewerPage" class="flex-align-items-center">
+                        <iqser-circle-button
+                            (action)="viewExcludePages()"
+                            *ngIf="isExcluded"
+                            [tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
+                            icon="red:exclude-pages"
+                            tooltipPosition="above"
+                        ></iqser-circle-button>
+
+                        <span class="all-caps-label">
+                            <span translate="page"></span> {{ activeViewerPage }} -
+                            {{ activeAnnotations?.length || 0 }}
+                            <span [translate]="activeAnnotations?.length === 1 ? 'annotation' : 'annotations'"></span>
+                        </span>
                     </span>
 
                     <div *ngIf="multiSelectActive">
@@ -141,13 +151,9 @@
                             [verticalPadding]="40"
                             icon="iqser:document"
                         >
-                            <ng-container *ngIf="fileData?.file?.excludedPages?.includes(activeViewerPage)">
+                            <ng-container *ngIf="isExcluded">
                                 {{ 'file-preview.tabs.annotations.page-is' | translate }}
-                                <a
-                                    (click)="actionPerformed.emit('view-exclude-pages')"
-                                    class="with-underline"
-                                    translate="file-preview.excluded-from-redaction"
-                                ></a
+                                <a (click)="viewExcludePages()" class="with-underline" translate="file-preview.excluded-from-redaction"></a
                                 >.
                             </ng-container>
                         </iqser-empty-state>
@@ -173,11 +179,11 @@
                     <redaction-annotations-list
                         (deselectAnnotations)="deselectAnnotations.emit($event)"
                         (pagesPanelActive)="pagesPanelActive = $event"
+                        (selectAnnotations)="selectAnnotations.emit($event)"
                         [(multiSelectActive)]="multiSelectActive"
                         [activeViewerPage]="activeViewerPage"
                         [annotationActionsTemplate]="annotationActionsTemplate"
                         [annotations]="(displayedAnnotations$ | async)?.get(activeViewerPage)"
-                        (selectAnnotations)="selectAnnotations.emit($event)"
                         [canMultiSelect]="!isReadOnly"
                         [selectedAnnotations]="selectedAnnotations"
                     ></redaction-annotations-list>

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

@@ -167,3 +167,11 @@
         }
     }
 }
+
+.padding-left-0 {
+    padding-left: 0 !important;
+}
+
+::ng-deep .page-separator iqser-circle-button mat-icon {
+    color: var(--iqser-primary);
+}

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

@@ -90,6 +90,10 @@ export class FileWorkloadComponent {
         return !this._permissionsService.canPerformAnnotationActions();
     }
 
+    get isExcluded(): boolean {
+        return this.fileData?.file?.excludedPages?.includes(this.activeViewerPage);
+    }
+
     private get _firstSelectedAnnotation() {
         return this.selectedAnnotations?.length ? this.selectedAnnotations[0] : null;
     }
@@ -225,6 +229,10 @@ export class FileWorkloadComponent {
         this.selectPage.emit(this._nextPageWithAnnotations());
     }
 
+    viewExcludePages(): void {
+        this.actionPerformed.emit('view-exclude-pages');
+    }
+
     private _filterAnnotations(
         annotations: AnnotationWrapper[],
         primary: INestedFilter[],

apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts

@@ -33,6 +33,8 @@ import Tools = Core.Tools;
 import TextTool = Tools.TextTool;
 import Annotation = Core.Annotations.Annotation;
 
+const allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape'];
+
 @Component({
     selector: 'redaction-pdf-viewer',
     templateUrl: './pdf-viewer.component.html',
@@ -58,7 +60,6 @@ export class PdfViewerComponent implements OnInit, OnChanges {
     utils: PdfViewerUtils;
     private _selectedText = '';
     private _firstPageChange = true;
-    private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape'];
 
     constructor(
         @Inject(BASE_HREF) private readonly _baseHref: string,
@@ -264,7 +265,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
                 }
             }
 
-            if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) {
+            if (allowedKeyboardShortcuts.indexOf($event.key) < 0) {
                 $event.preventDefault();
                 $event.stopPropagation();
             }

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

@@ -1017,7 +1017,7 @@
     "document-info": "Your Document Info lives here. This includes metadata required on each document.",
     "download-original-file": "Download Original File",
     "exclude-pages": "Exclude pages from redaction",
-    "excluded-from-redaction": "excluded from redaction",
+    "excluded-from-redaction": "excluded from automatic redaction",
     "fullscreen": "Full Screen (F)",
     "last-reviewer": "Last Reviewed by:",
     "no-data": {

libs/common-ui

@@ -1 +1 @@
-Subproject commit 1df1b1ab899e21093eb07c444acf90def933cb02
+Subproject commit e1ce89e38d3520ad11960074f74c381429c0251a