From 5651a03b1417f6b5f040e2563ec54456d5dffb3f Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com> Date: Tue, 26 Jan 2021 00:17:27 -0800 Subject: [PATCH 1/8] Drop over background color --- .../upload-file-widget/upload-file-widget.component.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss index e69de29bb..461f9d5b3 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss @@ -0,0 +1,5 @@ +@import "/src/theme"; + +::ng-deep .ngx-file-drop__drop-zone--over { + background-color: $primaryFaded !important; +} From 53309f017f7e38940bcafce445ee77b30f9f9173 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com> Date: Tue, 26 Jan 2021 02:32:45 -0800 Subject: [PATCH 2/8] Lovely file upload alerts --- .../upload-file-widget.component.html | 26 +++++++++-------- .../upload-file-widget.component.scss | 28 +++++++++++++++++++ .../upload-file-widget.component.ts | 6 ++-- .../app/services/consumer-status.service.ts | 5 ++-- 4 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html index 263918a73..b4c4fc01b 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html @@ -6,20 +6,22 @@ (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card" multiple="true" contentClassName="justify-content-center d-flex align-items-center p-5" [showBrowseBtn]=true browseBtnClassName="btn btn-sm btn-outline-primary ml-2" i18n-dropZoneLabel i18n-browseBtnLabel> - -

Uploading {{getStatusUploading().length}} files...

-

{{status.filename}}: {{status.message}}

- - - -
- - -
- + +
{{status.filename}}
+

{{status.message}}

+ +
+ +
+
- \ No newline at end of file + diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss index 461f9d5b3..807eac66b 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss @@ -3,3 +3,31 @@ ::ng-deep .ngx-file-drop__drop-zone--over { background-color: $primaryFaded !important; } + +form { + position: relative; +} + +.alert { + transition: all 0.2s ease; +} + +.alert-heading { + font-size: 80%; + font-weight: bold; +} + +.btn-sm { + line-height: 1; +} + +::ng-deep .progress { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: auto; + mix-blend-mode: soft-light; + pointer-events: none; +} diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts index bd0e4e290..e9a62cf9c 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts @@ -41,7 +41,7 @@ export class UploadFileWidgetComponent implements OnInit { return status.phase == FileStatusPhase.FAILED || status.phase == FileStatusPhase.SUCCESS } - getType(status: FileStatus) { + getStatusColor(status: FileStatus) { switch (status.phase) { case FileStatusPhase.PROCESSING: case FileStatusPhase.UPLOADING: @@ -56,7 +56,7 @@ export class UploadFileWidgetComponent implements OnInit { dismiss(status: FileStatus) { this.consumerStatusService.dismiss(status) } - + ngOnInit(): void { } @@ -75,7 +75,7 @@ export class UploadFileWidgetComponent implements OnInit { let formData = new FormData() formData.append('document', file, file.name) let status = this.consumerStatusService.newFileUpload(file.name) - + status.message = "Connecting..." this.documentService.uploadDocument(formData).subscribe(event => { diff --git a/src-ui/src/app/services/consumer-status.service.ts b/src-ui/src/app/services/consumer-status.service.ts index 69e58e2dd..d5ac1ba47 100644 --- a/src-ui/src/app/services/consumer-status.service.ts +++ b/src-ui/src/app/services/consumer-status.service.ts @@ -16,7 +16,7 @@ export class FileStatus { taskId: string - phase: FileStatusPhase = FileStatusPhase.STARTED + phase: FileStatusPhase = FileStatusPhase.STARTED currentPhaseProgress: number @@ -33,7 +33,8 @@ export class FileStatus { case FileStatusPhase.UPLOADING: return this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.2 case FileStatusPhase.PROCESSING: - return this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.8 + 0.2 + if (this.currentPhaseProgress > 100) this.currentPhaseProgress = 0 + return (this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.8) + 0.2 case FileStatusPhase.SUCCESS: case FileStatusPhase.FAILED: return 1.0 From 532a3d955ccb69acce81268091d68009abefbbbc Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com> Date: Tue, 26 Jan 2021 02:52:16 -0800 Subject: [PATCH 3/8] Dismiss all --- .../upload-file-widget.component.html | 12 ++++++++++-- .../upload-file-widget.component.scss | 9 +++++++++ .../upload-file-widget.component.ts | 4 ++++ src-ui/src/app/services/consumer-status.service.ts | 4 ++++ 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html index b4c4fc01b..d00114934 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html @@ -1,5 +1,13 @@ - - + +
+ +
Date: Tue, 26 Jan 2021 09:50:48 -0800 Subject: [PATCH 4/8] Fix alert resizing --- .../upload-file-widget.component.html | 4 ++-- .../upload-file-widget.component.scss | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html index d00114934..213f46fd6 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html @@ -19,10 +19,10 @@
{{status.filename}}
-

{{status.message}}

+

{{status.message}}

- + +
+
+

{{getStatusesHidden().length}} more hidden

+
+
+
- +
+ + + +
{{status.filename}}
+

{{status.message}}

+ +
+ +
+ + diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss index ed1bca319..5e404bb8e 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss @@ -9,6 +9,12 @@ form { font-weight: bold; } +.alerts-hidden { + .btn { + line-height: 1; + } +} + .btn-open { line-height: 1; diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts index 19ab8d04b..27f67f976 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts @@ -4,6 +4,7 @@ import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { ConsumerStatusService, FileStatus, FileStatusPhase } from 'src/app/services/consumer-status.service'; import { DocumentService } from 'src/app/services/rest/document.service'; +const MAX_ALERTS = 5 @Component({ selector: 'app-upload-file-widget', @@ -11,6 +12,7 @@ import { DocumentService } from 'src/app/services/rest/document.service'; styleUrls: ['./upload-file-widget.component.scss'] }) export class UploadFileWidgetComponent implements OnInit { + alertsExpanded = false constructor( private documentService: DocumentService, @@ -18,7 +20,12 @@ export class UploadFileWidgetComponent implements OnInit { ) { } getStatus() { - return this.consumerStatusService.getConsumerStatus() + return this.consumerStatusService.getConsumerStatus().slice(0, MAX_ALERTS) + } + + getStatusesHidden() { + if (this.consumerStatusService.getConsumerStatus().length < MAX_ALERTS) return [] + else return this.consumerStatusService.getConsumerStatus().slice(MAX_ALERTS) } getStatusUploading() {