Fullscreen keyboard shortcut

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

@@ -30,8 +30,10 @@ export class IconsModule {
             'edit',
             'entries',
             'error',
+            'exit-fullscreen',
             'expand',
             'folder',
+            'fullscreen',
             'info',
             'lightning',
             'logout',

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

@@ -68,8 +68,8 @@
             <redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
             <redaction-circle-button
                 (action)="fullScreenService.toggleFullScreen()"
-                icon="red:plus"
+                icon="red:fullscreen"
-                tooltip="common.fullscreen"
+                tooltip="file-preview.fullscreen"
                 tooltipPosition="before"
             ></redaction-circle-button>
             <redaction-circle-button
@@ -97,26 +97,28 @@
 
         <div class="right-fixed-container">
             <div class="right-title heading" translate="file-preview.tabs.annotations.label">
-                <redaction-circle-button
+                <div>
-                    *ngIf="fullScreenService.fullScreen"
+                    <redaction-filter
-                    (action)="fullScreenService.toggleFullScreen()"
+                        (filtersChanged)="filtersChanged($event)"
-                    icon="red:plus"
+                        [chevron]="true"
-                    tooltip="common.fullscreen"
+                        [filterTemplate]="annotationFilterTemplate"
-                    tooltipPosition="before"
+                        [filters]="annotationFilters"
-                ></redaction-circle-button>
+                    ></redaction-filter>
-                <redaction-filter
-                    (filtersChanged)="filtersChanged($event)"
-                    [chevron]="true"
-                    [filterTemplate]="annotationFilterTemplate"
-                    [filters]="annotationFilters"
-                ></redaction-filter>
-            </div>
 
+                    <redaction-circle-button
+                        *ngIf="fullScreenService.fullScreen"
+                        (action)="fullScreenService.toggleFullScreen()"
+                        icon="red:exit-fullscreen"
+                        tooltip="file-preview.exit-fullscreen"
+                        tooltipPosition="before"
+                    ></redaction-circle-button>
+                </div>
+            </div>
             <div class="right-content">
                 <div
                     #quickNavigation
-                    (keydown)="preventArrowDefault($event)"
+                    (keydown)="preventKeyDefault($event)"
-                    (keyup)="preventArrowDefault($event)"
+                    (keyup)="preventKeyDefault($event)"
                     [class.active-panel]="pagesPanelActive"
                     class="pages"
                     tabindex="0"
@@ -133,8 +135,8 @@
 
                 <div
                     #annotationsElement
-                    (keydown)="preventArrowDefault($event)"
+                    (keydown)="preventKeyDefault($event)"
-                    (keyup)="preventArrowDefault($event)"
+                    (keyup)="preventKeyDefault($event)"
                     [class.active-panel]="!pagesPanelActive"
                     class="annotations"
                     tabindex="1"

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

@@ -55,6 +55,14 @@ redaction-pdf-viewer {
             width: 14px;
             cursor: pointer;
         }
+
+        > div {
+            display: flex;
+
+            redaction-circle-button {
+                margin-left: 2px;
+            }
+        }
     }
 
     .right-content {
@@ -139,10 +147,6 @@ redaction-pdf-viewer {
     margin-left: 8px;
 }
 
-.mr-8 {
-    margin-right: 8px;
-}
-
 .mr-16 {
     margin-right: 16px;
 }

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

@@ -27,7 +27,7 @@ import { processFilters } from '../../../common/filter/utils/filter-utils';
 import { UserPreferenceService } from '../../../common/service/user-preference.service';
 import { FullScreenService } from '../../../utils/full-screen.service';
 
-const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F'];
 
 @Component({
     selector: 'redaction-file-preview-screen',
@@ -259,6 +259,11 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
             return;
         }
 
+        if (['f', 'F'].includes($event.key)) {
+            this.fullScreenService.toggleFullScreen();
+            return;
+        }
+
         if ($event.key === 'ArrowLeft') {
             this.pagesPanelActive = true;
         }
@@ -413,7 +418,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         this._changeDetectorRef.markForCheck();
     }
 
-    preventArrowDefault($event: KeyboardEvent) {
+    preventKeyDefault($event: KeyboardEvent) {
         if (KEY_ARRAY.includes($event.key)) {
             $event.preventDefault();
         }

apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts

@@ -12,7 +12,6 @@ import { FileStatusWrapper } from '../model/file-status.wrapper';
 import { KeycloakService } from 'keycloak-angular';
 import { environment } from '../../../../environments/environment';
 import { AnnotationDrawService } from '../service/annotation-draw.service';
-import { keypress } from '../../../utils/functions';
 
 export interface ViewerState {
     displayMode?: any;

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

@@ -251,7 +251,9 @@
         "unassigned": "Unassigned",
         "assign-reviewer": "Assign Reviewer",
         "assign-me": "Assign to me",
-        "last-reviewer": "Last Reviewed by:"
+        "last-reviewer": "Last Reviewed by:",
+        "fullscreen": "Full Screen (F)",
+        "exit-fullscreen": "Exit Full Screen (F)"
     },
     "annotation-actions": {
         "message": {

apps/red-ui/src/assets/icons/general/exit-fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>

apps/red-ui/src/assets/icons/general/fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>