+
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 7a050ab43..315313bff 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
@@ -1,5 +1,13 @@
-form {
- position: relative;
+:host ::ng-deep i-bs svg {
+ margin-top: -3px;
+}
+
+.btn-outline-dark {
+ --bs-btn-border-color: var(--bs-border-color-translucent);
+}
+
+.smaller {
+ font-size: 0.75rem;
}
.alert-heading {
@@ -40,6 +48,10 @@ form {
background-color: rgba(var(--bs-body-bg-rgb), .95) !important;
}
-.max-vh100-40 {
- max-height: calc(100vh - 40px);
+.consumer-status-list {
+ max-height: calc(100vh - 315px); // e.g. below the upload button, mobile
+
+ @media screen and (min-width: 768px) {
+ max-height: calc(100vh - 200px); // e.g. below the upload button
+ }
}
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 45ac9217a..32d1557ed 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
@@ -8,7 +8,6 @@ import {
} from '@angular/core/testing'
import { By } from '@angular/platform-browser'
import { RouterTestingModule } from '@angular/router/testing'
-import { NgbAlert, NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
import { routes } from 'src/app/app-routing.module'
import { PermissionsGuard } from 'src/app/guards/permissions.guard'
@@ -116,20 +115,6 @@ describe('UploadFileWidgetComponent', () => {
expect(component.getStatusColor(successStatus)).toEqual('success')
})
- it('should enforce a maximum number of alerts', () => {
- mockConsumerStatuses(websocketStatusService)
- fixture.detectChanges()
- // 5 total, 1 hidden
- expect(fixture.debugElement.queryAll(By.directive(NgbAlert))).toHaveLength(
- 6
- )
- expect(
- fixture.debugElement
- .query(By.directive(NgbCollapse))
- .queryAll(By.directive(NgbAlert))
- ).toHaveLength(1)
- })
-
it('should allow dismissing an alert', () => {
const dismissSpy = jest.spyOn(websocketStatusService, 'dismiss')
component.dismiss(new FileStatus())
@@ -138,7 +123,6 @@ describe('UploadFileWidgetComponent', () => {
it('should allow dismissing completed alerts', fakeAsync(() => {
mockConsumerStatuses(websocketStatusService)
- component.alertsExpanded = true
fixture.detectChanges()
jest
.spyOn(component, 'getStatusCompleted')
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 f60cdce60..478775ae4 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,7 +4,6 @@ import { RouterModule } from '@angular/router'
import {
NgbAlert,
NgbAlertModule,
- NgbCollapseModule,
NgbProgressbarModule,
} from '@ng-bootstrap/ng-bootstrap'
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -21,8 +20,6 @@ import {
} from 'src/app/services/websocket-status.service'
import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
-const MAX_ALERTS = 5
-
@Component({
selector: 'pngx-upload-file-widget',
templateUrl: './upload-file-widget.component.html',
@@ -34,15 +31,12 @@ const MAX_ALERTS = 5
NgTemplateOutlet,
RouterModule,
NgbAlertModule,
- NgbCollapseModule,
NgbProgressbarModule,
NgxBootstrapIconsModule,
TourNgBootstrapModule,
],
})
export class UploadFileWidgetComponent extends ComponentWithPermissions {
- alertsExpanded = false
-
@ViewChildren(NgbAlert) alerts: QueryList
constructor(
@@ -54,7 +48,7 @@ export class UploadFileWidgetComponent extends ComponentWithPermissions {
}
getStatus() {
- return this.websocketStatusService.getConsumerStatus().slice(0, MAX_ALERTS)
+ return this.websocketStatusService.getConsumerStatus()
}
getStatusSummary() {
@@ -77,13 +71,6 @@ export class UploadFileWidgetComponent extends ComponentWithPermissions {
)
}
- getStatusHidden() {
- if (this.websocketStatusService.getConsumerStatus().length < MAX_ALERTS)
- return []
- else
- return this.websocketStatusService.getConsumerStatus().slice(MAX_ALERTS)
- }
-
getStatusUploading() {
return this.websocketStatusService.getConsumerStatus(
FileStatusPhase.UPLOADING
diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
index 5ec00f500..101a489b9 100644
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
@@ -1,23 +1,32 @@
-
-