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

Reanalyse tooltip

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-07 18:08:02 +02:00 committed by Timo Bejan
parent b8b250161b
commit 971a00bd55
9 changed files with 100 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,7 @@
: 'report.unavailable-single'
) | translate
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
>
<button
mat-icon-button
@ -67,8 +67,16 @@
</button>
<button
(click)="reanalyseFile($event)"
[class.warn]="appStateService.fileNotUpToDateWithDictionary()"
*ngIf="appStateService.canReanalyseFile()"
mat-icon-button
#reanalyseTooltip="matTooltip"
[matTooltip]="
appStateService.fileNotUpToDateWithDictionary()
? ('file-preview.reanalyse-notification' | translate)
: null
"
matTooltipClass="warn"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
@ -83,7 +91,7 @@
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>
@ -98,7 +106,7 @@
: 'project-overview.under-review'
) | translate
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
color="accent"
mat-icon-button
>

86
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -8,11 +8,7 @@ import {
ViewChild
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
ReanalysisControllerService,
ViewedPages,
ViewedPagesControllerService
} from '@redaction/red-ui-http';
import { ReanalysisControllerService } from '@redaction/red-ui-http';
import { AppStateService } from '../../../state/app-state.service';
import { WebViewerInstance } from '@pdftron/webviewer';
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
@ -34,9 +30,10 @@ import { AnnotationDrawService } from '../service/annotation-draw.service';
import { AnnotationProcessingService } from '../service/annotation-processing.service';
import { FilterModel } from '../../../common/filter/model/filter.model';
import { tap } from 'rxjs/operators';
import { NotificationService, NotificationType } from '../../../notification/notification.service';
import { NotificationService } from '../../../notification/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { FileStatusWrapper } from '../model/file-status.wrapper';
import { MatTooltip } from '@angular/material/tooltip';
const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@ -46,6 +43,30 @@ const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
styleUrls: ['./file-preview-screen.component.scss']
})
export class FilePreviewScreenComponent implements OnInit {
private projectId: string;
private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED';
private instance: WebViewerInstance;
private _dialogRef: MatDialogRef<any>;
@ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent;
@ViewChild('annotationsElement') private _annotationsElement: ElementRef;
@ViewChild('quickNavigation') private _quickNavigationElement: ElementRef;
@ViewChild('reanalyseTooltip') private _reanalyseTooltip: MatTooltip;
public fileData: FileDataModel;
public fileId: string;
public annotations: AnnotationWrapper[] = [];
public displayedAnnotations: { [key: number]: { annotations: AnnotationWrapper[] } } = {};
public selectedAnnotation: AnnotationWrapper;
public pagesPanelActive = true;
public viewReady = false;
public filters: FilterModel[];
private _activeMenuAnnotation: AnnotationWrapper;
loadingMessage: string;
canPerformAnnotationActions: boolean;
constructor(
public readonly appStateService: AppStateService,
public readonly userService: UserService,
@ -61,7 +82,6 @@ export class FilePreviewScreenComponent implements OnInit {
private readonly _manualAnnotationService: ManualAnnotationService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _reanalysisControllerService: ReanalysisControllerService,
private ngZone: NgZone
) {
this._activatedRoute.params.subscribe((params) => {
@ -95,29 +115,6 @@ export class FilePreviewScreenComponent implements OnInit {
return this.instance?.docViewer?.getCurrentPage();
}
private projectId: string;
private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED';
private instance: WebViewerInstance;
private _dialogRef: MatDialogRef<any>;
@ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent;
@ViewChild('annotationsElement') private _annotationsElement: ElementRef;
@ViewChild('quickNavigation') private _quickNavigationElement: ElementRef;
public fileData: FileDataModel;
public fileId: string;
public annotations: AnnotationWrapper[] = [];
public displayedAnnotations: { [key: number]: { annotations: AnnotationWrapper[] } } = {};
public selectedAnnotation: AnnotationWrapper;
public pagesPanelActive = true;
public viewReady = false;
public filters: FilterModel[];
private _activeMenuAnnotation: AnnotationWrapper;
loadingMessage: string;
canPerformAnnotationActions: boolean;
get canNotSwitchToRedactedView() {
return (
this.appStateService.fileNotUpToDateWithDictionary() ||
@ -488,7 +485,7 @@ export class FilePreviewScreenComponent implements OnInit {
viewerReady($event: WebViewerInstance) {
this.instance = $event;
this.viewReady = true;
this._displayNewRuleToast();
this._reanalyseTooltip.show();
this._cleanupAndRedrawManualAnnotations();
}
@ -561,31 +558,4 @@ export class FilePreviewScreenComponent implements OnInit {
$event.stopPropagation();
this._fileActionService.undoApproveOrUnderApproval().subscribe(() => {});
}
private _displayNewRuleToast() {
if (this.appStateService.fileNotUpToDateWithDictionary()) {
this._notificationService.showToastNotification(
`${this._translateService.instant('project-overview.new-rule.toast.message-file')}`,
null,
NotificationType.WARNING,
{
disableTimeOut: true,
positionClass: 'toast-top-left',
actions: [
{
title: this._translateService.instant(
'project-overview.new-rule.toast.actions.reanalyse-file'
),
action: () => this.reanalyseFile()
},
{
title: this._translateService.instant(
'project-overview.new-rule.toast.actions.later'
)
}
]
}
);
}
}
}

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

@ -166,7 +166,7 @@
<button
(click)="openDeleteProjectDialog($event, pw.project)"
[matTooltip]="'project-listing.delete.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -177,7 +177,7 @@
<button
(click)="openEditProjectDialog($event, pw.project)"
[matTooltip]="'project-listing.edit.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -190,7 +190,7 @@
(pw.allFilesApproved ? 'report.action' : 'report.unavailable')
| translate
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
*ngIf="appStateService.isManagerAndOwner(pw.project) && pw.hasFiles"
>
<button
@ -205,7 +205,7 @@
<button
(click)="openAssignProjectOwnerDialog($event, pw.project)"
[matTooltip]="'project-listing.assign.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
*ngIf="userService.isManager(user)"
color="accent"
mat-icon-button
@ -218,7 +218,7 @@
(click)="reanalyseProject($event, pw.project)"
mat-icon-button
[matTooltip]="'project-listing.reanalyse.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>

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

@ -17,7 +17,7 @@
) | translate
"
*ngIf="appStateService.isActiveProjectOwnerAndManager"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
>
<button
(click)="downloadRedactionReport($event)"

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

@ -159,21 +159,24 @@
></div>
</div>
<div>
<div
[class.disabled]="isPending(fileStatus) || isProcessing(fileStatus)"
[class.error]="isError(fileStatus)"
class="table-item-title"
[matTooltipPosition]="'above'"
[matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename"
>
{{ fileStatus.filename }}
<div
matTooltipPosition="above"
[matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename"
>
<div class="filename-wrapper">
<div
[class.disabled]="isPending(fileStatus) || isProcessing(fileStatus)"
[class.error]="isError(fileStatus)"
class="table-item-title"
>
{{ fileStatus.filename }}
</div>
<span
*ngIf="appStateService.fileNotUpToDateWithDictionary(fileStatus)"
class="pill"
translate="project-overview.new-rule.label"
></span>
</div>
<span
*ngIf="appStateService.fileNotUpToDateWithDictionary(fileStatus)"
class="pill"
translate="project-overview.new-rule.label"
></span>
</div>
<div>
@ -239,7 +242,7 @@
fileStatus.isError
"
[matTooltip]="'project-overview.delete.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
color="accent"
mat-icon-button
>
@ -257,7 +260,7 @@
appStateService.isActiveProjectOwnerAndManager &&
!isError(fileStatus)
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
>
<button
(click)="downloadFileRedactionReport($event, fileStatus)"
@ -276,7 +279,7 @@
!fileStatus.isApprovedOrUnderApproval
"
[matTooltip]="'project-overview.assign.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
color="accent"
mat-icon-button
>
@ -286,7 +289,7 @@
(click)="reanalyseFile($event, fileStatus)"
*ngIf="appStateService.canReanalyseFile(fileStatus)"
[matTooltip]="'project-overview.reanalyse.action' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
color="accent"
mat-icon-button
>
@ -304,7 +307,7 @@
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
color="accent"
mat-icon-button
>
@ -322,7 +325,7 @@
: 'project-overview.under-review'
) | translate
"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
color="accent"
mat-icon-button
>

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

@ -18,7 +18,7 @@
<div *ngFor="let model of uploadService.files" class="upload-list-item">
<div class="upload-line">
<div
[matTooltipPosition]="'above'"
matTooltipPosition="above"
[matTooltip]="model.file?.name"
class="upload-file-name"
>
@ -36,7 +36,7 @@
</div>
<div *ngIf="model.completed && model.error" class="upload-line">
<div
[matTooltipPosition]="'above'"
matTooltipPosition="above"
[matTooltip]="model.error.message"
class="upload-file-name error"
>
@ -47,7 +47,7 @@
<div
(click)="uploadItem(model)"
[matTooltip]="'upload-status.dialog.actions.re-upload' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
class="error-action"
>
<mat-icon svgIcon="red:refresh"></mat-icon>
@ -56,7 +56,7 @@
<div
(click)="cancelItem(model)"
[matTooltip]="'upload-status.dialog.actions.cancel' | translate"
[matTooltipPosition]="'above'"
matTooltipPosition="above"
class="error-action"
>
<mat-icon svgIcon="red:close"></mat-icon>

2
apps/red-ui/src/assets/i18n/en.json
View File

@ -178,7 +178,6 @@
"label": "Outdated",
"toast": {
"message-project": "Some documents were not processed with the latest rule/dictionary set. They are marked with:\n\n",
"message-file": "This documents was not processed with the latest rule/dictionary set.\n\n",
"actions": {
"reanalyse-all": "Reanalyze all",
"reanalyse-file": "Reanalyze this file",
@ -249,6 +248,7 @@
"file-preview": {
"show-redacted-view": "Show Redacted Preview",
"cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",
"reanalyse-notification": "This document was not processed with the latest rule/dictionary set. Reanalyse now to get updated annotations.",
"reanalyse-file": "File reanalysis in progress... ",
"view-toggle": "Redacted View",
"tabs": {

6
apps/red-ui/src/assets/styles/red-button.scss
View File

@ -47,7 +47,11 @@
.mat-icon-button {
transition: background-color 0.25s ease-in-out;
&:hover {
&.warn {
background-color: $yellow-2;
}
&:hover:not(.warn) {
background-color: $grey-2;
}
}

34
apps/red-ui/src/assets/styles/red-tooltips.scss
View File

@ -11,19 +11,29 @@
position: relative;
overflow: visible !important;
text-align: center;
}
.mat-tooltip:after {
content: '';
position: absolute;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
z-index: 3000;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
border-top: solid 6px $accent;
&:after {
content: '';
position: absolute;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
z-index: 3000;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
border-top: solid 6px $accent;
}
&.warn {
background-color: $yellow-2;
text-align: initial;
color: $accent;
&:after {
border-top: solid 6px $yellow-2;
}
}
}
.mat-tooltip[style*='transform-origin: center top']:after {