From ed6a90e51eea8fa847751f45056a756f40e5dbe1 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Mon, 30 Nov 2020 10:37:24 +0200
Subject: [PATCH] better fullscreen icons

---
 .../file-preview-screen.component.html        |  1 +
 .../file-preview-screen.component.ts          |  1 +
 .../file/pdf-viewer/pdf-viewer.component.ts   | 57 ++++++++++++++++++-
 .../assets/icons/general/exit-fullscreen.svg  | 46 ++++++++++++++-
 .../src/assets/icons/general/fullscreen.svg   | 48 +++++++++++++++-
 .../assets/icons/general/search-pdftron.svg   |  7 +++
 6 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 apps/red-ui/src/assets/icons/general/search-pdftron.svg

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 8c0909e18..cf5ce909b 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
@@ -85,6 +85,7 @@
     <div class="flex red-content-inner" [class.fullscreen]="fullScreenService.fullScreen">
         <div class="left-container">
             <redaction-pdf-viewer
+                (keyUp)="handleKeyEvent($event)"
                 (annotationSelected)="handleAnnotationSelected($event)"
                 (manualAnnotationRequested)="openManualRedactionDialog($event)"
                 (pageChanged)="viewerPageChanged($event)"
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 bfc921a56..d4df4ae11 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
@@ -255,6 +255,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
 
     @HostListener('window:keyup', ['$event'])
     handleKeyEvent($event: KeyboardEvent) {
+        console.log('handle', $event.key);
         if (!KEY_ARRAY.includes($event.key) || this._dialogRef?.getState() === MatDialogState.OPEN) {
             return;
         }
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 c6590a7a1..de74feec2 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
@@ -39,12 +39,14 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
     @Output() annotationSelected = new EventEmitter<string>();
     @Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntryWrapper>();
     @Output() pageChanged = new EventEmitter<number>();
-
+    @Output() keyUp = new EventEmitter<KeyboardEvent>();
     @Output() viewerReady = new EventEmitter<WebViewerInstance>();
 
     @ViewChild('viewer', { static: true }) viewer: ElementRef;
     instance: WebViewerInstance;
 
+    private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape'];
+
     constructor(
         private readonly kc: KeycloakService,
         private readonly _appStateService: AppStateService,
@@ -86,6 +88,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
         ).then((instance) => {
             this.instance = instance;
             this._disableElements();
+            this._disableHotkeys();
             this._configureTextPopup();
             this._configureAnnotationPopup();
             instance.annotManager.on('annotationSelected', (annotationList, action) => {
@@ -104,6 +107,22 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
 
             instance.docViewer.on('documentLoaded', this._documentLoaded);
 
+            instance.docViewer.on('keyUp', ($event) => {
+                // arrows and full-screen
+                if ($event.key.startsWith('Arrow') || $event.key === 'f') {
+                    this._ngZone.run(() => {
+                        this.keyUp.emit($event);
+                    });
+                    $event.preventDefault();
+                    $event.stopPropagation();
+                }
+
+                if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) {
+                    $event.preventDefault();
+                    $event.stopPropagation();
+                }
+            });
+
             this._loadDocument();
         });
     }
@@ -188,7 +207,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
     private _configureTextPopup() {
         this.instance.textPopup.add(<any>{
             type: 'actionButton',
-            img: '/assets/icons/general/search.svg',
+            img: '/assets/icons/general/search-pdftron.svg',
             title: this._translateService.instant('pdf-viewer.text-popup.actions.search'),
             onClick: () => {
                 const text = this.instance.docViewer.getSelectedText();
@@ -352,4 +371,38 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
         instanceDisplayMode.mode = 'Single';
         this.instance.docViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode);
     }
+
+    private _disableHotkeys() {
+        this.instance.hotkeys.off('CTRL+SHIFT+EQUAL');
+        this.instance.hotkeys.off('COMMAND+SHIFT+EQUAL');
+        this.instance.hotkeys.off('CTRL+SHIFT+MINUS');
+        this.instance.hotkeys.off('COMMAND+SHIFT+MINUS');
+
+        this.instance.hotkeys.off('CTRL+V');
+        this.instance.hotkeys.off('COMMAND+V');
+        this.instance.hotkeys.off('CTRL+Y');
+        this.instance.hotkeys.off('COMMAND+Y');
+        this.instance.hotkeys.off('CTRL+O');
+        this.instance.hotkeys.off('COMMAND+O');
+        this.instance.hotkeys.off('CTRL+P');
+        this.instance.hotkeys.off('COMMAND+P');
+        this.instance.hotkeys.off('SPACE');
+
+        this.instance.hotkeys.off('R');
+        this.instance.hotkeys.off('P');
+        this.instance.hotkeys.off('A');
+        this.instance.hotkeys.off('C');
+        this.instance.hotkeys.off('E');
+        this.instance.hotkeys.off('F');
+        this.instance.hotkeys.off('I');
+        this.instance.hotkeys.off('L');
+        this.instance.hotkeys.off('N');
+        this.instance.hotkeys.off('O');
+        this.instance.hotkeys.off('T');
+        this.instance.hotkeys.off('S');
+        this.instance.hotkeys.off('G');
+        this.instance.hotkeys.off('H');
+        this.instance.hotkeys.off('K');
+        this.instance.hotkeys.off('U');
+    }
 }
diff --git a/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg b/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
index 76d9e1da8..fecc0e07d 100644
--- a/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
+++ b/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
@@ -1 +1,45 @@
-<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>
\ No newline at end of file
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<g>
+	<g id="fullscreen_x5F_exit">
+		<g>
+			<polygon style="fill:#030104;" points="24.586,27.414 29.172,32 32,29.172 27.414,24.586 32,20 20,20 20,32 			"/>
+			<polygon style="fill:#030104;" points="0,12 12,12 12,0 7.414,4.586 2.875,0.043 0.047,2.871 4.586,7.414 			"/>
+			<polygon style="fill:#030104;" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 			"/>
+			<polygon style="fill:#030104;" points="20,12 32,12 27.414,7.414 31.961,2.871 29.133,0.043 24.586,4.586 20,0 			"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/fullscreen.svg b/apps/red-ui/src/assets/icons/general/fullscreen.svg
index 9e60d60a9..f618aaa67 100644
--- a/apps/red-ui/src/assets/icons/general/fullscreen.svg
+++ b/apps/red-ui/src/assets/icons/general/fullscreen.svg
@@ -1 +1,47 @@
-<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>
\ No newline at end of file
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 489.001 489.001" style="enable-background:new 0 0 489.001 489.001;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M2.2,168.151l-2.1-151.3c-0.1-7.7,6.2-14,13.9-13.9l151.3,2.2c12.1,0.2,18.1,14.8,9.5,23.4l-42.1,42.1l70,70l-65,65
+			l-70-70l-42.1,42.1C17.1,186.251,2.4,180.251,2.2,168.151z"/>
+		<path d="M421.3,136.551l42.1,42.1c8.6,8.6,23.2,2.6,23.4-9.5l2.2-151.3c0.1-7.7-6.2-14-13.9-13.9l-151.3,2.2
+			c-12.1,0.2-18.1,14.8-9.5,23.4l42,41.9l-70,70l65,65L421.3,136.551z"/>
+		<path d="M314.2,460.451c-8.6,8.6-2.6,23.2,9.5,23.4l151.3,2.2c7.7,0.1,14-6.2,13.9-13.9l-2.2-151.3c-0.2-12.1-14.8-18.1-23.4-9.5
+			l-42.1,42.1l-70-70l-65,65l70,70L314.2,460.451z"/>
+		<path d="M14,485.051l151.3-2.2c12.1-0.2,18.1-14.8,9.5-23.4l-42.1-42l70-70l-65-65l-70,70l-42.1-42.1c-8.6-8.6-23.2-2.6-23.4,9.5
+			L0,471.151C0,478.851,6.3,485.151,14,485.051z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/search-pdftron.svg b/apps/red-ui/src/assets/icons/general/search-pdftron.svg
new file mode 100644
index 000000000..1df4c6568
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/search-pdftron.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>search</title>
+    <g id="search" stroke="none" stroke-width="1" fill="rgb(136,142,149)" fill-rule="evenodd">
+        <path d="M95.5,74.5 L76.5,55.5 C78.5,50.5 79.5,45.5 79.5,40 C79.5,18 61.5,0 39.5,0 C18,0 0,18 0,40 C0,62 18,80 40,80 C45.5,80 51,79 55.5,77 L74.5,96 C77.5,99 81.5,100.5 85,100.5 C89,100.5 92.5,99 95.5,96 C101.5,90 101.5,80 95.5,74.5 Z M10,40 C10,23.5 23.5,10 40,10 C56.5,10 70,23.5 70,40 C70,56.5 56.5,70 40,70 C23.5,70 10,56.5 10,40 Z M88.5,88.5 C86.5,90.5 83.5,90.5 81.5,88.5 L64.5,71.5 C67,69.5 69.5,67 71.5,64.5 L88.5,81.5 C90.5,83.5 90.5,86.5 88.5,88.5 Z" id="Shape" fill="rgb(136,142,149)" fill-rule="nonzero"></path>
+    </g>
+</svg>