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

Pull request #28: Ui updates

Browse Source 
Merge in RED/ui from ui-updates to master

* commit 'bf01364cf349423698e91cd31027a2689bc075b5':
  Remove toast clear in project overview
  Style tooltips
  Clear toasts on navigation events
This commit is contained in:
Timo Bejan 2020-11-03 21:29:41 +01:00
commit daca2e1378
9 changed files with 132 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
View File

@ -1,4 +1,4 @@
<div class="flex-row" [matTooltip]="username">
<div [matTooltipPosition]="'above'" [matTooltip]="username" class="flex-row">
<div [className]="colorClass + ' oval ' + size">{{ initials }}</div>
<div *ngIf="withName" class="clamp-2">
{{ username || ('initials-avatar.unassigned.label' | translate) }}

16
apps/red-ui/src/app/notification/notification.service.ts
View File

@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActiveToast, ToastrService } from 'ngx-toastr';
import { IndividualConfig } from 'ngx-toastr/toastr/toastr-config';
import { NavigationStart, Router } from '@angular/router';
export enum NotificationType {
SUCCESS = 'SUCCESS',
@ -19,9 +20,19 @@ export class Action {
providedIn: 'root'
})
export class NotificationService {
constructor(private readonly _snackBar: MatSnackBar, private readonly _toastr: ToastrService) {}
constructor(
private readonly _snackBar: MatSnackBar,
private readonly _toastr: ToastrService,
private readonly _router: Router
) {
_router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this._toastr.clear();
}
});
}
showToastNotification(
public showToastNotification(
message: string,
title?: string,
notificationType: NotificationType = NotificationType.INFO,
@ -32,7 +43,6 @@ export class NotificationService {
return this._toastr.error(message, title, options);
case NotificationType.SUCCESS:
return this._toastr.success(message, title, options);
break;
case NotificationType.WARNING:
return this._toastr.warning(message, title, options);
case NotificationType.INFO:

1
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -47,6 +47,7 @@
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>

4
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -167,6 +167,7 @@
<button
(click)="openDeleteProjectDialog($event, pw.project)"
[matTooltip]="'project-listing.delete.action.label' | translate"
[matTooltipPosition]="'above'"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -178,6 +179,7 @@
(click)="downloadRedactionReport($event, pw.project)"
*ngIf="userService.isManager(user)"
[matTooltip]="'project-listing.report.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
>
<mat-icon svgIcon="red:report"></mat-icon>
@ -185,6 +187,7 @@
<button
(click)="openAssignProjectOwnerDialog($event, pw.project)"
[matTooltip]="'project-listing.assign.action.label' | translate"
[matTooltipPosition]="'above'"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -197,6 +200,7 @@
(click)="reanalyseProject($event, pw.project)"
mat-icon-button
[matTooltip]="'project-listing.reanalyse.action.label' | translate"
[matTooltipPosition]="'above'"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>

104
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -11,28 +11,28 @@
<div class="filters flex-row">
<div translate="filters.filter-by.label"></div>
<redaction-filter
[filters]="statusFilters"
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.status.label'"
[filters]="statusFilters"
[hasArrow]="false"
[icon]="'red:status'"
(filtersChanged)="filtersChanged()"
></redaction-filter>
<redaction-filter
[filters]="peopleFilters"
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.people.label'"
[filters]="peopleFilters"
[hasArrow]="false"
[icon]="'red:user'"
(filtersChanged)="filtersChanged()"
></redaction-filter>
<!-- <button mat-button translate="filters.due-date.label">-->
<!-- <mat-icon svgIcon="red:lightning"></mat-icon>-->
<!-- </button>-->
<redaction-filter
[filters]="addedDateFilters"
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.created-on.label'"
[filters]="addedDateFilters"
[hasArrow]="false"
[icon]="'red:calendar'"
(filtersChanged)="filtersChanged()"
></redaction-filter>
<!-- <button mat-button translate="filters.project.label">-->
<!-- <mat-icon svgIcon="red:folder"></mat-icon>-->
@ -61,10 +61,10 @@
<div class="table-header">
<div class="select-all-container">
<div
*ngIf="bulkSelectActive"
class="select-oval"
[class.active]="areAllFilesSelected()"
(click)="toggleSelectAll()"
*ngIf="bulkSelectActive"
[class.active]="areAllFilesSelected()"
class="select-oval"
></div>
<span class="all-caps-label">
{{
@ -76,10 +76,10 @@
</div>
<div class="actions">
<div
translate="project-overview.table-header.bulk-select.label"
class="pointer"
[class.active]="bulkSelectActive"
(click)="toggleBulkSelect()"
[class.active]="bulkSelectActive"
class="pointer"
translate="project-overview.table-header.bulk-select.label"
></div>
<redaction-sorting
#sortingComponent
@ -89,24 +89,24 @@
</div>
</div>
<div class="grid-container" [class.bulk-select]="bulkSelectActive">
<div [class.bulk-select]="bulkSelectActive" class="grid-container">
<!-- Table column names-->
<div class="select-oval-placeholder" *ngIf="bulkSelectActive"></div>
<div *ngIf="bulkSelectActive" class="select-oval-placeholder"></div>
<redaction-table-col-name
label="project-overview.table-col-names.name.label"
column="filename"
(toggleSort)="sortingComponent.toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
(toggleSort)="sortingComponent.toggleSort($event)"
column="filename"
label="project-overview.table-col-names.name.label"
></redaction-table-col-name>
<redaction-table-col-name
label="project-overview.table-col-names.added-on.label"
column="added"
(toggleSort)="sortingComponent.toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
(toggleSort)="sortingComponent.toggleSort($event)"
column="added"
label="project-overview.table-col-names.added-on.label"
></redaction-table-col-name>
<redaction-table-col-name
@ -118,12 +118,12 @@
></redaction-table-col-name>
<redaction-table-col-name
label="project-overview.table-col-names.status.label"
class="flex-end"
column="status"
(toggleSort)="sortingComponent.toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
(toggleSort)="sortingComponent.toggleSort($event)"
class="flex-end"
column="status"
label="project-overview.table-col-names.status.label"
></redaction-table-col-name>
<div
@ -133,12 +133,11 @@
></div>
<div
class="table-item"
[class.pointer]="canOpenFile(fileStatus)"
*ngFor="
let fileStatus of displayedFiles
| sortBy: sortingOption.order:sortingOption.column
"
[class.pointer]="canOpenFile(fileStatus)"
[routerLink]="
canOpenFile(fileStatus)
? [
@ -149,21 +148,25 @@
]
: []
"
class="table-item"
>
<div class="pr-0" *ngIf="bulkSelectActive">
<div *ngIf="bulkSelectActive" class="pr-0">
<div
class="select-oval"
[class.active]="isFileSelected(fileStatus)"
(click)="toggleFileSelected($event, fileStatus)"
[class.active]="isFileSelected(fileStatus)"
class="select-oval"
></div>
</div>
<div [matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename">
<div
[matTooltipPosition]="'above'"
[matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename"
>
<div class="filename-wrapper">
<div
class="table-item-title"
[class.disabled]="isPending(fileStatus) || isProcessing(fileStatus)"
[class.error]="isError(fileStatus)"
class="table-item-title"
>
{{ fileStatus.filename }}
</div>
@ -182,12 +185,12 @@
</div>
<div>
<div class="small-label" [class.error]="isError(fileStatus)">
<div [class.error]="isError(fileStatus)" class="small-label">
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
</div>
</div>
<div class="needs-work" *ngIf="!isError(fileStatus)">
<div *ngIf="!isError(fileStatus)" class="needs-work">
<redaction-annotation-icon
*ngIf="fileStatus.hasRedactions"
[typeValue]="appStateService.getDictionaryTypeValue('redaction')"
@ -202,27 +205,27 @@
></redaction-annotation-icon>
</div>
<div class="assigned-to" *ngIf="!isError(fileStatus)">
<div *ngIf="!isError(fileStatus)" class="assigned-to">
<redaction-initials-avatar
withName="true"
[userId]="fileStatus.currentReviewer"
withName="true"
></redaction-initials-avatar>
</div>
<div class="status-container" [class.extend-cols]="isError(fileStatus)">
<div [class.extend-cols]="isError(fileStatus)" class="status-container">
<div
*ngIf="isError(fileStatus)"
class="small-label error"
translate="project-overview.file-listing.file-entry.file-error.label"
></div>
<div
class="small-label"
*ngIf="isPending(fileStatus)"
class="small-label"
translate="project-overview.file-listing.file-entry.file-pending.label"
></div>
<div
class="small-label"
*ngIf="isProcessing(fileStatus)"
class="small-label"
translate="processing"
></div>
<redaction-status-bar
@ -242,58 +245,63 @@
<div class="action-buttons">
<button
(click)="openDeleteFileDialog($event, fileStatus)"
color="accent"
*ngIf="
userService.isManager(user) || appStateService.isActiveProjectOwner
"
mat-icon-button
[matTooltip]="'project-overview.delete.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button
(click)="downloadFileRedactionReport($event, fileStatus)"
[matTooltip]="'project-overview.report.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
[matTooltip]="'project-overview.report.action.label' | translate"
>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button
(click)="assignReviewer($event, fileStatus)"
color="accent"
*ngIf="
appStateService.isActiveProjectMember &&
!isApprovedOrUnderApproval(fileStatus)
"
mat-icon-button
[matTooltip]="'project-overview.assign.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button
*ngIf="!isApprovedOrUnderApproval(fileStatus)"
(click)="reanalyseFile($event, fileStatus)"
*ngIf="!isApprovedOrUnderApproval(fileStatus)"
[matTooltip]="'project-overview.reanalyse.action.label' | translate"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
[matTooltip]="'project-overview.reanalyse.action.label' | translate"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
<button
(click)="requestApprovalOrApproveFile($event, fileStatus)"
*ngIf="
canApprove(fileStatus) &&
appStateService.isActiveProjectOwnerAndManager
"
(click)="requestApprovalOrApproveFile($event, fileStatus)"
color="accent"
mat-icon-button
[matTooltip]="
(fileStatus.status === 'UNDER_APPROVAL'
? 'project-overview.approve'
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>

6
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -43,7 +43,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
@ViewChild('sortingComponent', { static: true }) public sortingComponent: SortingComponent;
public sortingOption: SortingOption = { column: 'added', order: 'desc' };
private _rulesChangedToast: ActiveToast<any>;
constructor(
public readonly appStateService: AppStateService,
@ -79,9 +78,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
this._fileDropOverlayService.cleanupFileDropHandling();
if (this._rulesChangedToast && this._rulesChangedToast.toastRef) {
this._rulesChangedToast.toastRef.close();
}
}
public get user() {
@ -116,7 +112,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
return;
}
this._rulesChangedToast = this._notificationService.showToastNotification(
this._notificationService.showToastNotification(
`${this._translateService.instant(
'project-overview.new-rule.toast.message.label'
)} <span class="pill">${this._translateService.instant(

43
apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
View File

@ -1,12 +1,12 @@
<section class="red-upload-overlay mat-elevation-z4">
<div class="red-upload-header" (click)="collapsed = !collapsed">
<div (click)="collapsed = !collapsed" class="red-upload-header">
<div class="title">
{{ 'upload-status.dialog.title.label' | translate: { p1: uploadService.files.length } }}
</div>
<div class="collapse-icon" *ngIf="!collapsed">
<div *ngIf="!collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</div>
<div class="collapse-icon" *ngIf="collapsed">
<div *ngIf="collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-up"></mat-icon>
</div>
<div (click)="closeDialog()" class="close-icon">
@ -17,49 +17,60 @@
<div class="upload-list">
<div *ngFor="let model of uploadService.files" class="upload-list-item">
<div class="upload-line">
<div class="upload-file-name" [matTooltip]="model.file?.name">
<div
[matTooltipPosition]="'above'"
[matTooltip]="model.file?.name"
class="upload-file-name"
>
{{ model.file?.name }}
</div>
<div class="upload-progress" *ngIf="!model.completed && model.progress < 100">
<div *ngIf="!model.completed && model.progress < 100" class="upload-progress">
{{ model.progress }}%
</div>
<div class="upload-progress error" *ngIf="model.completed && model.error">
<div *ngIf="model.completed && model.error" class="upload-progress error">
<mat-icon svgIcon="red:error"></mat-icon>
</div>
<div class="upload-progress ok" *ngIf="model.completed && !model.error">
<div *ngIf="model.completed && !model.error" class="upload-progress ok">
<mat-icon svgIcon="red:check"></mat-icon>
</div>
</div>
<div class="upload-line" *ngIf="model.completed && model.error">
<div class="upload-file-name error" [matTooltip]="model.error.message">
<div *ngIf="model.completed && model.error" class="upload-line">
<div
[matTooltipPosition]="'above'"
[matTooltip]="model.error.message"
class="upload-file-name error"
>
{{ model.error.message }}
</div>
<div class="upload-progress">
<div
class="error-action"
(click)="uploadItem(model)"
[matTooltip]="
'upload-status.dialog.actions.re-upload.label' | translate
"
[matTooltipPosition]="'above'"
class="error-action"
>
<mat-icon svgIcon="red:refresh"></mat-icon>key
<mat-icon svgIcon="red:refresh"></mat-icon>
key
</div>
<div
class="error-action"
(click)="cancelItem(model)"
[matTooltip]="'upload-status.dialog.actions.cancel.label' | translate"
[matTooltipPosition]="'above'"
class="error-action"
>
<mat-icon svgIcon="red:close"></mat-icon>
</div>
</div>
</div>
<div mat-line *ngIf="!model.completed" class="upload-progress">
<div *ngIf="!model.completed" class="upload-progress" mat-line>
<mat-progress-bar
mode="determinate"
color="primary"
[value]="model.progress"
*ngIf="model.progress !== 100"
[value]="model.progress"
color="primary"
mode="determinate"
></mat-progress-bar>
</div>
</div>

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -18,3 +18,4 @@
@import 'red-controls';
@import 'red-logo';
@import 'red-toasts';
@import 'red-tooltips';

28
apps/red-ui/src/assets/styles/red-tooltips.scss Normal file
View File

@ -0,0 +1,28 @@
@import 'red-variables';
.mat-tooltip {
background-color: $accent;
border-radius: 3px;
padding: 10px;
font-family: Inter, sans-serif;
font-size: 11px;
line-height: 14px;
color: white;
position: relative;
overflow: visible !important;
text-align: center;
}
.mat-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-top: solid 6px $accent;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
z-index: 3000;
}