From 680a85f7fe32f4537de048fc895768ac0e019237 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 14 Oct 2020 17:36:25 +0300
Subject: [PATCH] Download file button

---
 .../file-preview-screen.component.html        | 24 +++++++++++++++++--
 .../file-preview-screen.component.ts          |  4 ++++
 .../project-listing-screen.component.html     |  2 +-
 .../project-overview-screen.component.html    |  2 +-
 apps/red-ui/src/assets/i18n/en.json           | 15 ++++++++++--
 apps/red-ui/src/assets/styles/red-button.scss |  5 ++++
 .../src/assets/styles/red-text-styles.scss    |  6 -----
 apps/red-ui/src/assets/styles/red-theme.scss  |  2 ++
 8 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 apps/red-ui/src/assets/styles/red-button.scss

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 8d6fbcf2d..7e147c702 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
@@ -3,8 +3,28 @@
     <mat-slide-toggle color="primary"
                       [(ngModel)]="redactedView"
                       translate="file-preview.view-toggle.label"></mat-slide-toggle>
-    <button color="warn" mat-flat-button
-            translate="file-preview.download-redacted.label"></button>
+    <div>
+      <button color="primary" mat-flat-button
+              [matMenuTriggerFor]="downloadMenu"
+              class="add-project-btn">
+        <span translate="file-preview.download.label"></span>
+        <mat-icon>arrow_drop_down</mat-icon>
+      </button>
+      <mat-menu #downloadMenu="matMenu" xPosition="before">
+        <div mat-menu-item
+             translate="file-preview.download.dropdown.original.label"
+             (click)="downloadFile('original')"
+        ></div>
+        <div mat-menu-item
+             translate="file-preview.download.dropdown.annotated.label"
+             (click)="downloadFile('annotated')"
+        ></div>
+        <div mat-menu-item
+             translate="file-preview.download.dropdown.redacted.label"
+             (click)="downloadFile('redacted')"
+        ></div>
+      </mat-menu>
+    </div>
   </div>
 
   <div class="flex red-content-inner">
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 2e80f47dc..823330d8a 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
@@ -296,4 +296,8 @@ export class FilePreviewScreenComponent implements OnInit {
       }
     });
   }
+
+  public downloadFile(type: 'original' | 'annotated' | 'redacted') {
+    console.log(`Downloading ${type}...`);
+  }
 }
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 0d80afd24..6814cbc43 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -7,7 +7,7 @@
     <div translate="filters.project.label"></div>
     <div translate="filters.document.label"></div>
   </div>
-  <button (click)="openAddProjectDialog()" color="warn" mat-flat-button class="add-project-btn">
+  <button (click)="openAddProjectDialog()" color="primary" mat-flat-button class="add-project-btn">
     <mat-icon svgIcon="red:plus">
     </mat-icon>
     <span translate="projects.add-new.label"></span>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index ad86c50d7..fc1465971 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -11,7 +11,7 @@
     <div translate="filters.due-date.label"></div>
     <div translate="filters.document.label"></div>
   </div>
-  <button (click)="fileInput.click()" color="warn" mat-flat-button
+  <button (click)="fileInput.click()" color="primary" mat-flat-button
           translate="project-overview.upload-document.label"></button>
   <input #fileInput (change)="uploadFiles($event.target.files)" class="file-upload-input" multiple="true"
          type="file">
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index b16f64902..8ef296db5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -326,8 +326,19 @@
     "view-toggle": {
       "label": "Redacted View"
     },
-    "download-redacted": {
-      "label": "Download Redacted"
+    "download": {
+      "label": "Download",
+      "dropdown": {
+        "original": {
+          "label": "Original"
+        },
+        "annotated": {
+          "label": "Annotated"
+        },
+        "redacted": {
+          "label": "Redacted"
+        }
+      }
     }
   },
   "initials-avatar": {
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
new file mode 100644
index 000000000..901623023
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -0,0 +1,5 @@
+button {
+  font-family: Inter, sans-serif !important;
+  font-weight: 400 !important;
+  border-radius: 25px !important;
+}
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 ecee20c9b..b078a6445 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -1,12 +1,6 @@
 @import "red-variables";
 @import "red-mixins";
 
-button {
-  font-family: Inter, sans-serif !important;
-  font-weight: 400 !important;
-  border-radius: 17px !important;
-}
-
 a {
   color: $red-1;
 
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index 5e9e49174..46606ca48 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -1,11 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 @import '~ngx-toastr/toastr';
 @import "red-material-theme";
 @import "red-page-layout";
 @import "red-text-styles";
 @import "red-dialog";
 @import "red-input";
+@import "red-button";
 @import "red-select";
 @import "red-toggle";
 @import "red-media-queries";