Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Download file button

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-14 17:36:25 +03:00
parent 7122fb90d6
commit 680a85f7fe
8 changed files with 48 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">

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

@ -296,4 +296,8 @@ export class FilePreviewScreenComponent implements OnInit {
}
});
}
public downloadFile(type: 'original' | 'annotated' | 'redacted') {
console.log(`Downloading ${type}...`);
}
}

2
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -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>

2
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -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">

15
apps/red-ui/src/assets/i18n/en.json
View File

@ -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": {

5
apps/red-ui/src/assets/styles/red-button.scss Normal file
View File

@ -0,0 +1,5 @@
button {
font-family: Inter, sans-serif !important;
font-weight: 400 !important;
border-radius: 25px !important;
}

6
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -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;

2
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -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";