From 5e702ae909dea167de5aabb533c9ebf478f05a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 21 Oct 2020 22:30:07 +0300
Subject: [PATCH] Display filename in top bar

---
 .../file-preview-screen.component.html          | 17 +++++++++++++----
 .../file-preview-screen.component.scss          | 13 ++++++++++++-
 .../src/assets/styles/red-text-styles.scss      |  7 +++++++
 apps/red-ui/src/assets/styles/red-toggle.scss   |  4 ----
 4 files changed, 32 insertions(+), 9 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 db743ddc3..faa7648a6 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
@@ -1,9 +1,18 @@
 <section [class.hidden]="!viewReady">
   <div class="page-header">
-    <mat-slide-toggle color="primary"
-                      [(ngModel)]="redactedView"
-                      translate="file-preview.view-toggle.label"></mat-slide-toggle>
-    <div>
+    <div class="flex-1">
+      <mat-slide-toggle color="primary"
+                        labelPosition="after"
+                        [(ngModel)]="redactedView">
+        {{ "file-preview.view-toggle.label" | translate }}
+      </mat-slide-toggle>
+    </div>
+
+    <div class="flex-2 filename page-title">
+      {{ appStateService.activeFile.filename }}
+    </div>
+
+    <div class="flex-1 download-container">
       <button color="primary" mat-flat-button
               [matMenuTriggerFor]="downloadMenu">
         <span translate="file-preview.download.label"></span>
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 f778e58d1..3e53ad22c 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
@@ -1,4 +1,5 @@
-@import "../../../../assets/styles/red-variables.scss";
+@import "../../../../assets/styles/red-variables";
+@import "../../../../assets/styles/red-mixins";
 
 redaction-pdf-viewer {
   position: absolute;
@@ -11,6 +12,16 @@ redaction-pdf-viewer {
   }
 }
 
+.download-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filename {
+  display: flex;
+  justify-content: center;
+}
+
 .right-fixed-container {
   padding: 0;
   width: $right-container-width;
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index 57c14662a..bfe14535c 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -29,6 +29,13 @@ a {
   font-weight: 600;
 }
 
+.page-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+}
+
 .all-caps-label {
   text-transform: uppercase;
   opacity: 0.7;
diff --git a/apps/red-ui/src/assets/styles/red-toggle.scss b/apps/red-ui/src/assets/styles/red-toggle.scss
index f8794b753..0d2150395 100644
--- a/apps/red-ui/src/assets/styles/red-toggle.scss
+++ b/apps/red-ui/src/assets/styles/red-toggle.scss
@@ -1,8 +1,4 @@
 mat-slide-toggle {
-  display: flex !important;
-  flex-direction: row-reverse;
-  gap: 8px;
-
   .mat-slide-toggle-bar {
     height: 16px !important;
     width: 30px !important;