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..c8104dae1 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,25 +1,47 @@ - - + +
+ +
-
-

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

-

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

- - - -
- - + +
+
+

{{getStatusesHidden().length}} more hidden

+
+
+ +
-
- \ No newline at end of file + + + + +
{{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 e69de29bb..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 @@ -0,0 +1,44 @@ +@import "/src/theme"; + +form { + position: relative; +} + +.alert-heading { + font-size: 80%; + font-weight: bold; +} + +.alerts-hidden { + .btn { + line-height: 1; + } +} + +.btn-open { + line-height: 1; + + svg { + margin-top: -1px; + } +} + +.dismiss-all { + transition: opacity 0.2s ease; + opacity: 0; +} + +.has-multiple-status .dismiss-all { + opacity: 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..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() { @@ -41,7 +48,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 +63,11 @@ export class UploadFileWidgetComponent implements OnInit { dismiss(status: FileStatus) { this.consumerStatusService.dismiss(status) } - + + dismissAll() { + this.consumerStatusService.dismissAll() + } + ngOnInit(): void { } @@ -75,7 +86,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..181e45e15 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,7 @@ 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 + return (this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.8) + 0.2 case FileStatusPhase.SUCCESS: case FileStatusPhase.FAILED: return 1.0 @@ -43,7 +43,7 @@ export class FileStatus { updateProgress(status: FileStatusPhase, currentProgress?: number, maxProgress?: number) { if (status >= this.phase) { this.phase = status - if (currentProgress) { + if (currentProgress != undefined) { this.currentPhaseProgress = currentProgress } if (maxProgress) { @@ -132,6 +132,10 @@ export class ConsumerStatusService { } } + dismissAll() { + this.consumerStatus = [] + } + onDocumentConsumptionFinished() { return this.documentConsumptionFinishedSubject } diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 8cf4a93f6..34f575a05 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -111,3 +111,7 @@ body { font-size: 16px; } } + +.ngx-file-drop__drop-zone--over { + background-color: $primaryFaded !important; +} diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss index 9a698143d..4e850f017 100644 --- a/src-ui/src/theme_dark.scss +++ b/src-ui/src/theme_dark.scss @@ -352,6 +352,20 @@ $border-color-dark-mode: #47494f; .bg-dark { background-color: $bg-light-dark-mode !important; } + + .ngx-file-drop__drop-zone--over { + background-color: darken($primary-dark-mode, 35%) !important; + } + + .alert-secondary { + background-color: $bg-light-dark-mode; + border-color: darken($bg-light-dark-mode, 10%); + color: $text-color-dark-mode-accent; + } + + .progress-bar.bg-primary { + background-color: darken($primary-dark-mode, 5%) !important; + } } body.color-scheme-dark {