From f1485b26c4959f3abe550d3b3cd9b6a23b93699f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 27 Nov 2020 18:46:18 +0200
Subject: [PATCH 1/3] Pages panel fix

---
 .../file-preview-screen/file-preview-screen.component.html  | 6 ++----
 .../file-preview-screen/file-preview-screen.component.scss  | 5 +----
 2 files changed, 3 insertions(+), 8 deletions(-)

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 dc0a02a47..b7260aeb8 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
@@ -104,7 +104,7 @@
                     #quickNavigation
                     (keydown)="preventArrowDefault($event)"
                     (keyup)="preventArrowDefault($event)"
-                    [class.activePanel]="pagesPanelActive"
+                    [class.active-panel]="pagesPanelActive"
                     class="pages"
                     tabindex="0"
                 >
@@ -122,11 +122,10 @@
                     #annotationsElement
                     (keydown)="preventArrowDefault($event)"
                     (keyup)="preventArrowDefault($event)"
-                    [class.activePanel]="!pagesPanelActive"
+                    [class.active-panel]="!pagesPanelActive"
                     class="annotations"
                     tabindex="1"
                 >
-                    <!--                    <div *ngFor="let page of displayedPages">-->
                     <div attr.anotation-page-header="{{ activeViewerPage }}" class="page-separator">
                         <span *ngIf="!!activeViewerPage" class="all-caps-label"
                             ><span translate="page"></span> {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }}
@@ -168,7 +167,6 @@
                         ></redaction-annotation-actions>
                     </div>
                 </div>
-                <!--                </div>-->
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 76a4067df..9a1a3afd4 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -58,16 +58,13 @@ redaction-pdf-viewer {
             @include no-scroll-bar();
             outline: none;
 
-            &.activePanel {
+            &.active-panel {
                 background-color: #fafafa;
             }
         }
 
         .pages {
             border-right: 1px solid $separator;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
             min-width: 61px;
         }
 

From 81f540f8834db5e620f60d94a584f5a775a688ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 27 Nov 2020 22:04:25 +0200
Subject: [PATCH 2/3] Full screen working, missing icons

---
 .../base-screen/base-screen.component.html    |   4 +-
 .../base-screen/base-screen.component.ts      |   3 +
 .../file-preview-screen.component.html        |  15 ++-
 .../file-preview-screen.component.scss        |  17 ++-
 .../file-preview-screen.component.ts          |   2 +
 .../src/app/utils/full-screen.service.ts      |  23 ++++
 .../src/assets/styles/red-page-layout.scss    | 126 +++++++++++-------
 7 files changed, 136 insertions(+), 54 deletions(-)
 create mode 100644 apps/red-ui/src/app/utils/full-screen.service.ts

diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
index 6b58f9763..6808a7419 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
@@ -1,4 +1,4 @@
-<div class="red-top-bar">
+<div class="red-top-bar" [class.fullscreen]="fullScreenService.fullScreen">
     <div class="top-bar-row">
         <div class="menu visible-lt-lg">
             <button [matMenuTriggerFor]="menuNav" mat-flat-button>
@@ -64,6 +64,6 @@
     </div>
     <div class="divider"></div>
 </div>
-<div class="red-content">
+<div class="red-content" [class.fullscreen]="fullScreenService.fullScreen">
     <router-outlet></router-outlet>
 </div>
diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
index 25e165587..df11389e7 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
@@ -4,6 +4,7 @@ import { AppStateService } from '../../state/app-state.service';
 import { LanguageService } from '../../i18n/language.service';
 import { PermissionsService } from '../../common/service/permissions.service';
 import { UserPreferenceService } from '../../common/service/user-preference.service';
+import { FullScreenService } from '../../utils/full-screen.service';
 
 @Component({
     selector: 'redaction-base-screen',
@@ -15,6 +16,8 @@ export class BaseScreenComponent {
         public readonly appStateService: AppStateService,
         public readonly permissionsService: PermissionsService,
         public readonly userPreferenceService: UserPreferenceService,
+        public readonly fullScreenService: FullScreenService,
+
         private readonly _languageService: LanguageService,
         private readonly _userService: UserService
     ) {}
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 b7260aeb8..627bec482 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
@@ -66,6 +66,12 @@
             <div class="vertical-line"></div>
 
             <redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
+            <redaction-circle-button
+                (action)="fullScreenService.toggleFullScreen()"
+                icon="red:plus"
+                tooltip="common.fullscreen"
+                tooltipPosition="before"
+            ></redaction-circle-button>
             <redaction-circle-button
                 [routerLink]="['/ui/projects/' + appStateService.activeProjectId]"
                 class="ml-8"
@@ -76,7 +82,7 @@
         </div>
     </div>
 
-    <div class="flex red-content-inner">
+    <div class="flex red-content-inner" [class.fullscreen]="fullScreenService.fullScreen">
         <div class="left-container">
             <redaction-pdf-viewer
                 (annotationSelected)="handleAnnotationSelected($event)"
@@ -91,6 +97,13 @@
 
         <div class="right-fixed-container">
             <div class="right-title heading" translate="file-preview.tabs.annotations.label">
+                <redaction-circle-button
+                    *ngIf="fullScreenService.fullScreen"
+                    (action)="fullScreenService.toggleFullScreen()"
+                    icon="red:plus"
+                    tooltip="common.fullscreen"
+                    tooltipPosition="before"
+                ></redaction-circle-button>
                 <redaction-filter
                     (filtersChanged)="filtersChanged($event)"
                     [chevron]="true"
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 9a1a3afd4..aa754db60 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -4,11 +4,21 @@
 redaction-pdf-viewer {
     position: absolute;
     width: calc(100vw - #{$right-container-width});
-    height: calc(100vh - 110px);
-    top: 110px;
+    height: calc(100vh - 111px);
+    transition: height linear 0.2s;
     z-index: 2;
 }
 
+.red-content-inner.fullscreen {
+    redaction-pdf-viewer {
+        height: 100vh;
+    }
+
+    .right-content {
+        height: calc(100vh - 71px) !important;
+    }
+}
+
 .vertical-line {
     width: 1px;
     height: 30px;
@@ -48,7 +58,8 @@ redaction-pdf-viewer {
     }
 
     .right-content {
-        height: calc(100vh - 110px - 72px);
+        height: calc(100vh - 110px - 71px);
+        transition: height linear 0.2s;
         box-sizing: border-box;
         display: flex;
 
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 e964da94d..61d11a716 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
@@ -25,6 +25,7 @@ import { PermissionsService } from '../../../common/service/permissions.service'
 import { Subscription, timer } from 'rxjs';
 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'];
 
@@ -60,6 +61,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         public readonly appStateService: AppStateService,
         public readonly permissionsService: PermissionsService,
         public readonly userPreferenceService: UserPreferenceService,
+        public readonly fullScreenService: FullScreenService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _activatedRoute: ActivatedRoute,
         private readonly _dialogService: DialogService,
diff --git a/apps/red-ui/src/app/utils/full-screen.service.ts b/apps/red-ui/src/app/utils/full-screen.service.ts
new file mode 100644
index 000000000..b5ddf470f
--- /dev/null
+++ b/apps/red-ui/src/app/utils/full-screen.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FullScreenService {
+    public fullScreen = false;
+
+    constructor(private readonly _router: Router) {
+        this._router.events.subscribe((route) => {
+            if (route instanceof NavigationStart) {
+                if (route.url.indexOf('file') === -1) {
+                    this.fullScreen = false;
+                }
+            }
+        });
+    }
+
+    public toggleFullScreen() {
+        this.fullScreen = !this.fullScreen;
+    }
+}
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index de52c2284..5306079da 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -24,6 +24,7 @@ body {
     box-sizing: border-box;
     background-color: $white;
     z-index: 3;
+    transition: top linear 0.2s;
 
     .filters {
         gap: 2px;
@@ -54,55 +55,83 @@ body {
     }
 }
 
-.red-content-inner {
-    margin-top: 50px;
-}
+.red-content {
+    width: 100vw;
+    height: calc(100vh - 61px);
+    overflow: auto;
+    position: absolute;
+    transition: top linear 0.2s, height linear 0.2s;
+    top: 61px;
 
-.left-container {
-    height: calc(100vh - 61px - 50px);
-    transition: width ease-in-out 0.1s;
+    .red-content-inner {
+        position: absolute;
+        top: 50px;
 
-    &.extended {
-        width: calc(100vw - 60px) !important;
-    }
-}
+        .left-container {
+            transition: width linear 0.1s, height linear 0.2s;
 
-.right-fixed-container {
-    border-left: 1px solid $grey-4;
-    background: $white;
-    position: fixed;
-    right: 0;
-    z-index: 2;
-    transition: width ease-in-out 0.1s;
-
-    .collapsed-wrapper {
-        display: none;
-    }
-
-    &.collapsed {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        width: 60px !important;
-        display: flex;
-
-        div:not(.collapsed-wrapper) {
-            display: none;
+            &.extended {
+                width: calc(100vw - 60px) !important;
+            }
         }
 
-        .collapsed-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 60px;
+        .right-fixed-container {
+            border-left: 1px solid $grey-4;
+            background: $white;
+            position: fixed;
+            right: 0;
+            top: 111px;
+            z-index: 2;
+            transition: width linear 0.1s, top linear 0.2s, height linear 0.2s;
 
-            div {
-                display: initial;
+            .collapsed-wrapper {
+                display: none;
             }
 
-            .all-caps-label {
-                transform: rotate(90deg) translateX(50%);
-                white-space: nowrap;
-                margin-top: 10px;
+            &.collapsed {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                width: 60px !important;
+                display: flex;
+
+                div:not(.collapsed-wrapper) {
+                    display: none;
+                }
+
+                .collapsed-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    width: 60px;
+
+                    div {
+                        display: initial;
+                    }
+
+                    .all-caps-label {
+                        transform: rotate(90deg) translateX(50%);
+                        white-space: nowrap;
+                        margin-top: 10px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.fullscreen {
+        height: 100vh;
+        top: 0;
+
+        .page-header {
+            top: -51px;
+        }
+
+        .red-content-inner {
+            top: 0;
+
+            .right-fixed-container {
+                top: 0;
+                height: 100vh;
             }
         }
     }
@@ -155,10 +184,17 @@ body {
 
 .red-top-bar {
     height: 61px;
-    width: 100%;
+    position: absolute;
+    width: 100vw;
     max-height: 61px;
     display: flex;
     flex-direction: column;
+    top: 0;
+    transition: top linear 0.2s;
+
+    &.fullscreen {
+        top: -61px;
+    }
 
     .top-bar-row {
         height: 60px;
@@ -199,12 +235,6 @@ body {
     }
 }
 
-.red-content {
-    width: 100vw;
-    height: calc(100vh - 61px);
-    overflow: auto;
-}
-
 .hidden {
     display: none !important;
 }

From 5682e0a331114e2a456684db80e5af84e9fc3908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 27 Nov 2020 23:56:07 +0200
Subject: [PATCH 3/3] Fullscreen keyboard shortcut

---
 apps/red-ui/src/app/icons/icons.module.ts     |  2 +
 .../file-preview-screen.component.html        | 42 ++++++++++---------
 .../file-preview-screen.component.scss        | 12 ++++--
 .../file-preview-screen.component.ts          |  9 +++-
 .../file/pdf-viewer/pdf-viewer.component.ts   |  1 -
 apps/red-ui/src/assets/i18n/en.json           |  4 +-
 .../assets/icons/general/exit-fullscreen.svg  |  1 +
 .../src/assets/icons/general/fullscreen.svg   |  1 +
 8 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
 create mode 100644 apps/red-ui/src/assets/icons/general/fullscreen.svg

diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts
index daec5a982..cccfe0f30 100644
--- a/apps/red-ui/src/app/icons/icons.module.ts
+++ b/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',
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 627bec482..8c0909e18 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
@@ -68,8 +68,8 @@
             <redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
             <redaction-circle-button
                 (action)="fullScreenService.toggleFullScreen()"
-                icon="red:plus"
-                tooltip="common.fullscreen"
+                icon="red: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
-                    *ngIf="fullScreenService.fullScreen"
-                    (action)="fullScreenService.toggleFullScreen()"
-                    icon="red:plus"
-                    tooltip="common.fullscreen"
-                    tooltipPosition="before"
-                ></redaction-circle-button>
-                <redaction-filter
-                    (filtersChanged)="filtersChanged($event)"
-                    [chevron]="true"
-                    [filterTemplate]="annotationFilterTemplate"
-                    [filters]="annotationFilters"
-                ></redaction-filter>
-            </div>
+                <div>
+                    <redaction-filter
+                        (filtersChanged)="filtersChanged($event)"
+                        [chevron]="true"
+                        [filterTemplate]="annotationFilterTemplate"
+                        [filters]="annotationFilters"
+                    ></redaction-filter>
 
+                    <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)"
-                    (keyup)="preventArrowDefault($event)"
+                    (keydown)="preventKeyDefault($event)"
+                    (keyup)="preventKeyDefault($event)"
                     [class.active-panel]="pagesPanelActive"
                     class="pages"
                     tabindex="0"
@@ -133,8 +135,8 @@
 
                 <div
                     #annotationsElement
-                    (keydown)="preventArrowDefault($event)"
-                    (keyup)="preventArrowDefault($event)"
+                    (keydown)="preventKeyDefault($event)"
+                    (keyup)="preventKeyDefault($event)"
                     [class.active-panel]="!pagesPanelActive"
                     class="annotations"
                     tabindex="1"
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index aa754db60..47513a631 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/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;
 }
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 61d11a716..bfc921a56 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
@@ -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();
         }
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 351f7c062..c6590a7a1 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
@@ -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;
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 6b769f02e..fafc607de 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/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": {
diff --git a/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg b/apps/red-ui/src/assets/icons/general/exit-fullscreen.svg
new file mode 100644
index 000000000..76d9e1da8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/red-ui/src/assets/icons/general/fullscreen.svg b/apps/red-ui/src/assets/icons/general/fullscreen.svg
new file mode 100644
index 000000000..9e60d60a9
--- /dev/null
+++ b/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>
\ No newline at end of file