Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-5576: Added upload error indicator.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2022-11-15 17:00:03 +02:00
parent eda65e4deb
commit dd9145bcf3
4 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
View File

@ -1,8 +1,9 @@
<section class="red-upload-download-overlay">
<div (click)="collapsed = !collapsed" [class.expanded]="!collapsed" class="red-upload-download-header">
<div class="title flex-1">
<div class="title flex-2">
{{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
</div>
<span><mat-icon *ngIf="uploadError" [svgIcon]="'red:alert-circle'"></mat-icon></span>
<iqser-circle-button [icon]="'iqser:status-' + (collapsed ? 'expand' : 'collapse')" id="expand-upload-status"></iqser-circle-button>

4
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
View File

@ -32,6 +32,10 @@
}
}
iqser-circle-button {
margin-bottom: 4px;
}
&.expanded {
border-bottom: 1px solid var(--iqser-separator);
}

4
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
View File

@ -21,6 +21,10 @@ export class UploadStatusOverlayComponent implements OnInit {
private readonly _changeDetectorRef: ChangeDetectorRef,
) {}
get uploadError() {
return !!this.uploadService.files.filter(file => file.completed && file.error).length;
}
ngOnInit() {
this.uploadStatusInterval = window.setInterval(() => {
// keep only errors

17
apps/red-ui/src/assets/icons/general/alert-circle.svg
View File

@ -1,6 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="12" y1="8" x2="12" y2="11"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<title>warning</title>
<g id="User-Management" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01.2-Bulk-Actions" transform="translate(-876.000000, -468.000000)">
<rect fill="#FFFFFF" x="0" y="0" width="1440" height="900"></rect>
<polygon id="Rectangle" fill="#FFFFFF" points="201 449 1087 449 1087 499 201 499"></polygon>
<g id="Group-19" transform="translate(876.000000, 171.000000)" fill="#DD4D50">
<path d="M6.00002308,297 C9.30875217,297 12.0000462,299.690683 12.0000462,302.999359 C12.0000462,306.309082 9.30898674,309 6.00002308,309 C2.69105942,309 2.27373675e-13,306.309082 2.27373675e-13,302.999359 C2.27373675e-13,299.690683 2.69129399,297 6.00002308,297 Z M6.00002308,298.846154 C3.71080282,298.846154 1.84615385,300.71038 1.84615385,302.999359 C1.84615385,305.289458 3.71064029,307.153846 6.00002308,307.153846 C8.28940586,307.153846 10.1538923,305.289458 10.1538923,302.999359 C10.1538923,300.71038 8.28924333,298.846154 6.00002308,298.846154 Z M6.89921108,303.700197 L6.89921108,305.678219 L5.10100111,305.678219 L5.10100111,303.700197 L6.89921108,303.700197 Z M6.89921108,300.103957 L6.89921108,302.801137 L5.10100111,302.801137 L5.10100111,300.103957 L6.89921108,300.103957 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 453 B

After

Width:  |  Height:  |  Size: 1.5 KiB