diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss index 93468207d..89f69bb5e 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.scss +++ b/src-ui/src/app/components/app-frame/app-frame.component.scss @@ -99,10 +99,6 @@ main { } } - .col-slim { - padding-left: calc(50px + $grid-gutter-width) !important; - } - .sidebar-slim-toggler { display: block; position: absolute; diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html index 9c62f7add..c1ba50898 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.html +++ b/src-ui/src/app/components/dashboard/dashboard.component.html @@ -3,7 +3,7 @@
-
+
@@ -23,7 +23,7 @@
-
+
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 7d3d60ef2..eea43ed5c 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,24 +1,28 @@ - -
-
+
+ -

{{getStatusSummary()}}

-
- +
+
+
+

{{getStatusSummary()}}

+ + Dismiss completed + + + + + +
+
+
+ +

@@ -36,19 +40,23 @@ - -

{{status.filename}}
-

{{status.message}}

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

{{status.message}}

+ +
+
+ +
+
+
- +
diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts index 4b2e2f990..3afebc7b2 100644 --- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts @@ -1,5 +1,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing' -import { ComponentFixture, TestBed } from '@angular/core/testing' +import { + ComponentFixture, + TestBed, + fakeAsync, + tick, +} from '@angular/core/testing' import { By } from '@angular/platform-browser' import { RouterTestingModule } from '@angular/router/testing' import { @@ -114,11 +119,15 @@ describe('UploadFileWidgetComponent', () => { expect(dismissSpy).toHaveBeenCalled() }) - it('should allow dismissing all alerts', () => { - const dismissSpy = jest.spyOn(consumerStatusService, 'dismissCompleted') + it('should allow dismissing all alerts', fakeAsync(() => { + mockConsumerStatuses(consumerStatusService) + fixture.detectChanges() + const dismissSpy = jest.spyOn(consumerStatusService, 'dismiss') component.dismissCompleted() - expect(dismissSpy).toHaveBeenCalled() - }) + tick(1000) + fixture.detectChanges() + expect(dismissSpy).toHaveBeenCalledTimes(6) + })) }) function mockConsumerStatuses(consumerStatusService) { 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 22a3263e3..77e8fcd18 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 @@ -1,11 +1,14 @@ -import { Component } from '@angular/core' +import { Component, QueryList, ViewChildren } from '@angular/core' +import { NgbAlert } from '@ng-bootstrap/ng-bootstrap' import { NgxFileDropEntry } from 'ngx-file-drop' import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component' +import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings' import { ConsumerStatusService, FileStatus, FileStatusPhase, } from 'src/app/services/consumer-status.service' +import { SettingsService } from 'src/app/services/settings.service' import { UploadDocumentsService } from 'src/app/services/upload-documents.service' const MAX_ALERTS = 5 @@ -18,9 +21,12 @@ const MAX_ALERTS = 5 export class UploadFileWidgetComponent extends ComponentWithPermissions { alertsExpanded = false + @ViewChildren(NgbAlert) alerts: QueryList + constructor( private consumerStatusService: ConsumerStatusService, - private uploadDocumentsService: UploadDocumentsService + private uploadDocumentsService: UploadDocumentsService, + public settingsService: SettingsService ) { super() } @@ -69,6 +75,10 @@ export class UploadFileWidgetComponent extends ComponentWithPermissions { return this.consumerStatusService.getConsumerStatus(FileStatusPhase.SUCCESS) } + getStatusCompleted() { + return this.consumerStatusService.getConsumerStatusCompleted() + } + getTotalUploadProgress() { let current = 0 let max = 0 @@ -106,7 +116,7 @@ export class UploadFileWidgetComponent extends ComponentWithPermissions { } dismissCompleted() { - this.consumerStatusService.dismissCompleted() + this.alerts.forEach((a) => a.close()) } public fileOver(event) {} @@ -116,4 +126,8 @@ export class UploadFileWidgetComponent extends ComponentWithPermissions { public dropped(files: NgxFileDropEntry[]) { this.uploadDocumentsService.uploadFiles(files) } + + get slimSidebarEnabled(): boolean { + return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR) + } } diff --git a/src-ui/src/app/services/consumer-status.service.ts b/src-ui/src/app/services/consumer-status.service.ts index 2b587fbfd..82b081e93 100644 --- a/src-ui/src/app/services/consumer-status.service.ts +++ b/src-ui/src/app/services/consumer-status.service.ts @@ -230,7 +230,10 @@ export class ConsumerStatusService { dismissCompleted() { this.consumerStatus = this.consumerStatus.filter( - (status) => status.phase != FileStatusPhase.SUCCESS + (status) => + ![FileStatusPhase.SUCCESS, FileStatusPhase.FAILED].includes( + status.phase + ) ) } diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 02fd51573..4ded31ae4 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -16,6 +16,12 @@ body { transition: background-color 0.3s ease, border-color 0.3s ease; } +@media(min-width: 768px) { + .col-slim { + padding-left: calc(50px + $grid-gutter-width) !important; + } +} + svg.logo { .leaf { fill: var(--bs-primary) !important;