From ee891e05853e4d0a9ac4962062bfb3f62cb53daf Mon Sep 17 00:00:00 2001 From: Timo Bejan Date: Tue, 22 Sep 2020 09:45:39 +0300 Subject: [PATCH] pdf display --- apps/red-ui/src/app/app.module.ts | 19 ++++++-- .../confirmation-dialog.component.html | 8 ++-- apps/red-ui/src/app/icons/icons.module.ts | 25 +++++++++++ .../base-screen/base-screen.component.html | 20 +++++++-- .../base-screen/base-screen.component.scss | 12 ++++++ .../file-details-dialog.component.html | 40 +++++++++++++++++ .../file-details-dialog.component.scss | 18 ++++++++ .../file-details-dialog.component.ts | 38 ++++++++++++++++ .../file-preview-screen.component.html | 16 ++++--- .../file-preview-screen.component.scss | 7 ++- .../file-preview-screen.component.ts | 10 +++++ .../add-edit-project-dialog.component.html | 14 +++--- .../project-listing-screen.component.html | 3 ++ .../project-listing-screen.component.ts | 2 - .../project-overview-screen.component.html | 29 ++++++++++--- .../project-overview-screen.component.scss | 26 ++++++++++- .../project-overview-screen.component.ts | 42 +++++++++++++++--- .../src/app/utils/file-download-utils.ts | 13 ++++++ apps/red-ui/src/assets/i18n/en.json | 27 ++++++++++++ .../icons/general/double-chevron-right.svg | 12 ++++++ apps/red-ui/src/assets/icons/general/info.svg | 43 +++++++++++++++++++ apps/red-ui/src/assets/icons/general/menu.svg | 8 ++++ .../assets/icons/general/sort-ascending.svg | 21 +++++++++ .../assets/icons/general/sort-descending.svg | 25 +++++++++++ assets/styles/page-layout.scss | 24 ++++++++--- assets/styles/red-input.scss | 2 +- assets/styles/red-material-theme.scss | 5 +++ assets/styles/red-media-queries.scss | 17 ++++++++ assets/styles/red-theme.scss | 1 + .../lib/api/fileUploadController.service.ts | 3 +- package.json | 3 ++ yarn.lock | 17 ++++++++ 32 files changed, 501 insertions(+), 49 deletions(-) create mode 100644 apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.html create mode 100644 apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.scss create mode 100644 apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.ts create mode 100644 apps/red-ui/src/app/utils/file-download-utils.ts create mode 100644 apps/red-ui/src/assets/icons/general/double-chevron-right.svg create mode 100644 apps/red-ui/src/assets/icons/general/info.svg create mode 100644 apps/red-ui/src/assets/icons/general/menu.svg create mode 100644 apps/red-ui/src/assets/icons/general/sort-ascending.svg create mode 100644 apps/red-ui/src/assets/icons/general/sort-descending.svg create mode 100644 assets/styles/red-media-queries.scss diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 9c37a2137..ecfe56c77 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -28,17 +28,23 @@ import {MatDialogModule} from '@angular/material/dialog'; import {MatSnackBarModule} from "@angular/material/snack-bar"; import {MatTooltipModule} from "@angular/material/tooltip"; import {ConfirmationDialogComponent} from './common/confirmation-dialog/confirmation-dialog.component'; -import { FilePreviewScreenComponent } from './screens/file/file-preview-screen/file-preview-screen.component'; -import { PdfViewerComponent } from './screens/file/pdf-viewer/pdf-viewer.component'; +import {FilePreviewScreenComponent} from './screens/file/file-preview-screen/file-preview-screen.component'; +import {PdfViewerComponent} from './screens/file/pdf-viewer/pdf-viewer.component'; import {MatTabsModule} from "@angular/material/tabs"; import {MatButtonToggleModule} from "@angular/material/button-toggle"; +import {NgpSortModule} from "ngp-sort-pipe"; +import {MatFormFieldModule} from "@angular/material/form-field"; +import {MatSelectModule} from "@angular/material/select"; +import {NgxDropzoneModule} from "ngx-dropzone"; +import {MatSidenavModule} from "@angular/material/sidenav"; +import { FileDetailsDialogComponent } from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); } @NgModule({ - declarations: [AppComponent, BaseScreenComponent, ProjectListingScreenComponent, ProjectOverviewScreenComponent, AddEditProjectDialogComponent, ConfirmationDialogComponent, FilePreviewScreenComponent, PdfViewerComponent], + declarations: [AppComponent, BaseScreenComponent, ProjectListingScreenComponent, ProjectOverviewScreenComponent, AddEditProjectDialogComponent, ConfirmationDialogComponent, FilePreviewScreenComponent, PdfViewerComponent, FileDetailsDialogComponent], imports: [ BrowserModule, BrowserAnimationsModule, @@ -84,6 +90,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { } ]), + NgpSortModule, MatToolbarModule, MatButtonModule, MatMenuModule, @@ -91,7 +98,11 @@ export function HttpLoaderFactory(httpClient: HttpClient) { MatTooltipModule, MatSnackBarModule, MatTabsModule, - MatButtonToggleModule + MatButtonToggleModule, + MatFormFieldModule, + MatSelectModule, + NgxDropzoneModule, + MatSidenavModule ], providers: [{ provide: KeycloakService, diff --git a/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.html index 244f6ea60..2aa4bd387 100644 --- a/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.html +++ b/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.html @@ -1,8 +1,4 @@
- -
@@ -16,4 +12,8 @@ (click)="confirm()">{{confirmationDialogInput.confirmationText | translate}} + +
diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index e27f7acd1..0bc4109cf 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -43,6 +43,31 @@ export class IconsModule { 'preview', sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/preview_icon.svg') ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'sort-asc', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/sort-ascending.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'sort-desc', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/sort-descending.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'menu', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/menu.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'chevron-right', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/double-chevron-right.svg') + ); + iconRegistry.addSvgIconInNamespace( + 'red', + 'info', + sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/info.svg') + ); } 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 76b22c7d3..5bef5c50b 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,15 +1,29 @@
-
+
+ + + + + + +
+
-  >  +
-  >  +
diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss b/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss index e5cff8149..44f0f1adc 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss @@ -20,6 +20,18 @@ } } + .breadcrumb{ + padding-left: 8px; + padding-right: 8px; + color: $yellow-1; + + mat-icon{ + height: 14px; + width: 14px; + } + + } + .divider { height: 1px; opacity: 0.15; diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.html new file mode 100644 index 000000000..8344856d8 --- /dev/null +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.html @@ -0,0 +1,40 @@ +
+ +
+ +
+ +
+
+
+ {{fileStatus.filename}} +
+
+ {{'project-overview.file-listing.file-entry.status.label'| translate:fileStatus}} +
+
+ {{'project-overview.file-listing.file-entry.number-of-pages.label'| translate:fileStatus}} +
+
+ {{'project-overview.file-listing.file-entry.number-of-analyses.label'| translate:fileStatus}} +
+
+ {{'project-overview.file-listing.file-entry.added.label'| translate:{added: fileStatus.added | date:'short'} }} +
+
+ {{'project-overview.file-listing.file-entry.last-updated.label'| translate:{lastUpdated: fileStatus.lastUpdated | date:'short'} }} +
+
+
+ +
+ +
+ + + +
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.scss new file mode 100644 index 000000000..816b1710d --- /dev/null +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.scss @@ -0,0 +1,18 @@ +@import "../../../../../../../../assets/styles/red-variables"; + + +.details-button { + position: fixed; + bottom: 20px; + right: 20px; +} + +.file-row { + opacity: 1; + color: $grey-1; + font-family: Inconsolata, monospace, monospace; + font-size: 14px; + letter-spacing: 0; + line-height: 14px; + height: 18px; +} diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.ts new file mode 100644 index 000000000..cc3393034 --- /dev/null +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component.ts @@ -0,0 +1,38 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import { + FileStatus, + FileUploadControllerService, + ProjectControllerService, + RedactionLogControllerService +} from "@redaction/red-ui-http"; +import {TranslateService} from "@ngx-translate/core"; +import {NotificationService} from "../../../../notification/notification.service"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {download} from "../../../../utils/file-download-utils"; + +@Component({ + selector: 'redaction-file-details-dialog', + templateUrl: './file-details-dialog.component.html', + styleUrls: ['./file-details-dialog.component.scss'] +}) +export class FileDetailsDialogComponent implements OnInit { + + + constructor( + private readonly _fileUploadControllerService: FileUploadControllerService, + private readonly _translateService: TranslateService, + private readonly _notificationService: NotificationService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public fileStatus: FileStatus) { + } + + + ngOnInit(): void { + } + + downloadRedactionReport() { + this._fileUploadControllerService.downloadRedactionReport({fileIds:[this.fileStatus.fileId]},true,'response').subscribe(data=>{ + download(data,'redaction-report-'+this.fileStatus.filename+".docx"); + }); + } +} 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 05d7a2cc0..ba8cd0169 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,15 @@
{{appStateService.activeFile?.filename}}
- - Original - Annotated - Redacted - +
+ + Original + Annotated + Redacted + +
+ + 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 c3da23d9c..7869b8dba 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,3 +1,6 @@ -.mat-tab-body-wrapper{ - flex-grow: 1; + +.details-button { + position: fixed; + bottom: 20px; + right: 20px; } 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 0f894471f..1549dcf23 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 @@ -10,6 +10,8 @@ import {TranslateService} from "@ngx-translate/core"; import {NotificationService} from "../../../notification/notification.service"; import {MatDialog} from "@angular/material/dialog"; import {AppStateService} from "../../../state/app-state.service"; +import {ConfirmationDialogComponent} from "../../../common/confirmation-dialog/confirmation-dialog.component"; +import {FileDetailsDialogComponent} from "./file-details-dialog/file-details-dialog.component"; @Component({ selector: 'redaction-file-preview-screen', @@ -41,4 +43,12 @@ export class FilePreviewScreenComponent implements OnInit { ngOnInit(): void { } + showDetailsDialog($event: MouseEvent) { + $event.stopPropagation(); + this._dialog.open(FileDetailsDialogComponent, { + width: '600px', + maxWidth: '90vw', + data: this.appStateService.activeFile + }); + } } diff --git a/apps/red-ui/src/app/screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component.html index 55386946e..3276ef15d 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component.html @@ -1,9 +1,6 @@
-
- +
@@ -21,10 +18,13 @@
- + [disabled]="projectForm.invalid" type="submit">
+ + +
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 7b6c70bc2..e56ac6d60 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 @@ -13,6 +13,9 @@
{{project.description}}
+
+ {{project.date | date:'short'}} +
-
{{appStateService.activeProject?.description}}
-
-
-
+
{{appStateService.activeProject?.description}}
+ + {{'project-overview.sorting.label' | translate}} + + + + {{option.label | translate}} + + + +
+
+
+ + {{"project-overview.upload-files.label"| translate}} + +
@@ -30,7 +46,7 @@
{{'project-overview.file-listing.file-entry.added.label'| translate:{added: fileStatus.added | date:'short'} }}
-
+
{{'project-overview.file-listing.file-entry.last-updated.label'| translate:{lastUpdated: fileStatus.lastUpdated | date:'short'} }}
@@ -41,4 +57,3 @@
- diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index 4ed1690b6..1c1c000eb 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -1,4 +1,28 @@ -.file-upload-input{ +.listing { + position: relative; + min-height: calc(100vh - (61px + 80px + 70px + 80px)); +} + +.file-upload-input { display: none; } + + +.drop-zone { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; + width: 100%; + background: white; + z-index: 100; + display: none; + cursor: pointer; + + &.active { + display: flex; + } +} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index f5c0f0988..c41885140 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -1,14 +1,11 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; import { FileStatus, FileUploadControllerService, - Project, ProjectControllerService, StatusControllerService } from "@redaction/red-ui-http"; -import {Observable} from "rxjs"; -import {mergeMap, tap} from "rxjs/operators"; import {NotificationService} from "../../notification/notification.service"; import {TranslateService} from "@ngx-translate/core"; import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component"; @@ -22,6 +19,20 @@ import {AppStateService} from "../../state/app-state.service"; }) export class ProjectOverviewScreenComponent implements OnInit { + @ViewChild('dropzoneComponent', {static: true}) dropZoneComponent; + + dragActive: boolean = false; + + sortOptions: any[] = [{ + value: {name: 'lastUpdated', order: 'desc'}, label: 'project-overview.sorting.last-updated-desc.label', icon: 'red:sort-desc' + },{ + value: {name: 'lastUpdated', order: 'asc'}, label: 'project-overview.sorting.last-updated-asc.label', icon: 'red:sort-asc' + },{ + value: { name: 'filename', order: 'desc'}, label: 'project-overview.sorting.file-name-desc.label', icon: 'red:sort-desc' + },{ + value: { name: 'filename', order: 'asc'}, label: 'project-overview.sorting.file-name-asc.label', icon: 'red:sort-asc' + }]; + sorting: any = this.sortOptions[0].value; projectId: string; constructor(public readonly appStateService: AppStateService, @@ -43,10 +54,12 @@ export class ProjectOverviewScreenComponent implements OnInit { } private _loadProject() { - this.appStateService.activateProject(this.projectId).subscribe(()=>{}); + this.appStateService.activateProject(this.projectId).subscribe(() => { + }); } - handleFileInput(files: File[]) { + handleFileInput(files: FileList | File[]) { + this.dragActive = false; for (let i = 0; i < files.length; i++) { const file = files[i]; this._fileUploadControllerService.uploadFileForm(file, this.projectId, 'response').subscribe(() => { @@ -58,7 +71,8 @@ export class ProjectOverviewScreenComponent implements OnInit { } private _getFileStatus() { - this.appStateService.getActiveProjectStatus().subscribe(()=>{}); + this.appStateService.getActiveProjectStatus().subscribe(() => { + }); } deleteFile($event: MouseEvent, fileStatus: FileStatus) { @@ -81,4 +95,18 @@ export class ProjectOverviewScreenComponent implements OnInit { }); } + + sortingChanged($event) { + this.sorting = $event; + } + + dragEnter($event: DragEvent) { + console.log('enter'); + this.dragActive = true; + } + + dragLeave($event: any) { + console.log('leave', this.dragActive); + this.dragActive = false; + } } diff --git a/apps/red-ui/src/app/utils/file-download-utils.ts b/apps/red-ui/src/app/utils/file-download-utils.ts new file mode 100644 index 000000000..388fd42b0 --- /dev/null +++ b/apps/red-ui/src/app/utils/file-download-utils.ts @@ -0,0 +1,13 @@ +import {HttpResponse} from '@angular/common/http'; +import {saveAs} from 'file-saver'; + +export function download(event: HttpResponse, altName?: string) { + const contentDisposition = event.headers.get('Content-Disposition'); + let fileName = undefined; + try { + fileName = contentDisposition ? contentDisposition.split('filename=')[1].replace(/"/g, '') : undefined; + } catch (e) { + console.log('failed to parse content-disposition: ', contentDisposition); + } + saveAs(event.body, fileName ? fileName : altName); +} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index b180a81ed..ef4975361 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -67,7 +67,34 @@ "label": "You currently have no projects. You can start your work by creating a new one!" } }, + "file-details": { + "dialog": { + "title": { + "label": "File Details" + }, + "actions": { + "download-redaction-report": { + "label": "Download Redaction Report" + } + } + } + }, "project-overview": { + "sorting": { + "label": "Sorting", + "last-updated-desc": { + "label": "Last Updated (Desc)" + }, + "last-updated-asc": { + "label": "Last Updated (Asc)" + }, + "file-name-desc": { + "label": "Name (Desc)" + }, + "file-name-asc": { + "label": "Name (Desc)" + } + }, "upload-error": { "label": "Failed to upload file: {{name}}" }, diff --git a/apps/red-ui/src/assets/icons/general/double-chevron-right.svg b/apps/red-ui/src/assets/icons/general/double-chevron-right.svg new file mode 100644 index 000000000..9e98e1ab9 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/double-chevron-right.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/info.svg b/apps/red-ui/src/assets/icons/general/info.svg new file mode 100644 index 000000000..9463d49aa --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/info.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/menu.svg b/apps/red-ui/src/assets/icons/general/menu.svg new file mode 100644 index 000000000..fac3ef6bf --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/menu.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/apps/red-ui/src/assets/icons/general/sort-ascending.svg b/apps/red-ui/src/assets/icons/general/sort-ascending.svg new file mode 100644 index 000000000..c57238cf0 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/sort-ascending.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/sort-descending.svg b/apps/red-ui/src/assets/icons/general/sort-descending.svg new file mode 100644 index 000000000..475739698 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/sort-descending.svg @@ -0,0 +1,25 @@ + + + + + + + + + diff --git a/assets/styles/page-layout.scss b/assets/styles/page-layout.scss index ec49ef12d..0d381c067 100644 --- a/assets/styles/page-layout.scss +++ b/assets/styles/page-layout.scss @@ -1,6 +1,15 @@ @import "red-variables"; @import "red-mixins"; +@media only screen and (max-width: 720px) { + .listing { + .list-entry { + width: 100% !important; + } + } +} + + html, body { margin: 0; padding: 0; @@ -12,7 +21,7 @@ html, body { display: flex; justify-content: space-between; align-items: center; - padding-bottom: 40px; + padding-bottom: 20px; } @@ -28,7 +37,7 @@ html, body { border: 1px solid $grey-1; border-radius: 2px; background-color: $white; - padding: 24px; + padding: 20px 24px; margin-right: 22px; margin-bottom: 22px; display: flex; @@ -51,7 +60,7 @@ html, body { } } - .listing-title, .listing-subtitle{ + .listing-title, .listing-subtitle { color: $white; } } @@ -118,9 +127,14 @@ html, body { } +.flex-row { + display: flex; + justify-content: space-between; + align-items: center; +} -.break-40 { - height: 40px; +.break-20 { + height: 20px; background: transparent; display: block; } diff --git a/assets/styles/red-input.scss b/assets/styles/red-input.scss index 520ab9bd0..a06495c19 100644 --- a/assets/styles/red-input.scss +++ b/assets/styles/red-input.scss @@ -30,7 +30,7 @@ background-color: #FFFFFF; outline: none; - :focus { + &:focus { border-color: $grey-1; } } diff --git a/assets/styles/red-material-theme.scss b/assets/styles/red-material-theme.scss index 58583c8b3..5da656f47 100644 --- a/assets/styles/red-material-theme.scss +++ b/assets/styles/red-material-theme.scss @@ -52,3 +52,8 @@ $gn-next-mat-theme: mat-light-theme(( )); @include angular-material-theme($gn-next-mat-theme); + + +.mat-flat-button{ + min-width: unset!important; +} diff --git a/assets/styles/red-media-queries.scss b/assets/styles/red-media-queries.scss new file mode 100644 index 000000000..630b77420 --- /dev/null +++ b/assets/styles/red-media-queries.scss @@ -0,0 +1,17 @@ +@media only screen and (max-width: 800px) { + .visible-lg { + display: none !important; + } +} + +.visible-lt-lg { + display: none !important; +} + +@media only screen and (max-width: 800px) { + .visible-lt-lg { + display: flex !important; + } +} + + diff --git a/assets/styles/red-theme.scss b/assets/styles/red-theme.scss index 2c2861c5a..85f8a4eee 100644 --- a/assets/styles/red-theme.scss +++ b/assets/styles/red-theme.scss @@ -5,3 +5,4 @@ @import "red-text-styles"; @import "red-dialog"; @import "red-input"; +@import "red-media-queries"; diff --git a/libs/red-ui-http/src/lib/api/fileUploadController.service.ts b/libs/red-ui-http/src/lib/api/fileUploadController.service.ts index 3b9e2ac30..0bddc5016 100644 --- a/libs/red-ui-http/src/lib/api/fileUploadController.service.ts +++ b/libs/red-ui-http/src/lib/api/fileUploadController.service.ts @@ -333,13 +333,14 @@ export class FileUploadControllerService { headers = headers.set('Content-Type', httpContentTypeSelected); } - return this.httpClient.request('post',`${this.basePath}/download/report`, + return this.httpClient.request('post',`${this.basePath}/download/report`, { body: body, params: queryParameters, withCredentials: this.configuration.withCredentials, headers: headers, observe: observe, + responseType: 'blob', reportProgress: reportProgress } ); diff --git a/package.json b/package.json index 8361623a0..8ed399d12 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,11 @@ "@ngx-translate/http-loader": "^6.0.0", "@nrwl/angular": "^10.2.0", "@pdftron/webviewer": "^7.0.1", + "file-saver": "^2.0.2", "keycloak-angular": "^8.0.1", "keycloak-js": "10.0.2", + "ngp-sort-pipe": "^0.0.4", + "ngx-dropzone": "^2.2.2", "rxjs": "~6.5.5", "zone.js": "^0.10.2" }, diff --git a/yarn.lock b/yarn.lock index 52638cac4..ed91a8a22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4668,6 +4668,11 @@ file-loader@6.0.0: loader-utils "^2.0.0" schema-utils "^2.6.5" +file-saver@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a" + integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw== + file-uri-to-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" @@ -7128,6 +7133,18 @@ next-tick@~1.0.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= +ngp-sort-pipe@^0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/ngp-sort-pipe/-/ngp-sort-pipe-0.0.4.tgz#9d70caff0ee34f32f2ea1df16c7333b72df72b56" + integrity sha512-tqyxsjb1mKROKhQB7oIcKaDSamPaNNwQ7norqxnOLRNjMdvG0b+XofIAZQpa/cG+SN6lmdCjtzOvwhOjHzpHmA== + +ngx-dropzone@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/ngx-dropzone/-/ngx-dropzone-2.2.2.tgz#450609031efb909461181c6b693d7c5f793a278d" + integrity sha512-REuBcPNTY33OtcZD6dw8Fq/jFqwviiYydYaCn74yig8TvDDYhtJ/BPjtvbw7uEgF4BJr/UEHbKMvkdZIyCgsww== + dependencies: + tslib "^1.9.0" + nice-try@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"