diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 824319edd..2265d2d5c 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -15,17 +15,18 @@ export class IconsModule { 'analyse', 'approved', 'arrow-down', - 'arrow-up', 'arrow-right', + 'arrow-up', 'assign', 'assign-me', 'calendar', + 'case-sensitive', 'check', + 'check-alt', 'close', 'collapse', 'color-picker', 'comment', - 'case-sensitive', 'comment-fill', 'dictionary', 'document', @@ -44,8 +45,9 @@ export class IconsModule { 'logout', 'menu', 'needs-work', - 'notification', 'new-tab', + 'notification', + 'page', 'pages', 'plus', 'preview', @@ -59,15 +61,15 @@ export class IconsModule { 'sort-asc', 'sort-desc', 'status', - 'trash', - 'thumb-down', 'template', - 'user', - 'check-alt', - 'page', - 'upload', + 'thumb-down', + 'trash', + 'under-construction', 'undo', - 'under-construction' + 'upload', + 'user', + 'visibility', + 'visibility-off' ]; for (const icon of icons) { diff --git a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.html index e0302119e..3fbe381cf 100644 --- a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.html +++ b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.html @@ -29,6 +29,26 @@ > + + + + + + (); @@ -29,6 +31,20 @@ export class AnnotationActionsComponent implements OnInit { this.annotationPermissions = AnnotationPermissions.forUser(this._permissionsService.currentUser, this.annotation); } + public get viewerAnnotation(): Annotations.Annotation { + return this.viewer.annotManager.getAnnotationById(this.annotation.id); + } + + public hideAnnotation($event: MouseEvent) { + $event.stopPropagation(); + this.viewer.annotManager.hideAnnotation(this.viewerAnnotation); + } + + public showAnnotation($event: MouseEvent) { + $event.stopPropagation(); + this.viewer.annotManager.showAnnotation(this.viewerAnnotation); + } + public openMenu($event: MouseEvent) { $event.preventDefault(); this.menuOpen = true; diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 7a64d02b3..6937a624c 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -257,6 +257,7 @@ (annotationsChanged)="annotationsChangedByReviewAction($event)" [annotation]="annotation" [canPerformAnnotationActions]="canPerformAnnotationActions" + [viewer]="activeViewer" > diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index e99838227..0315b628d 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -40,7 +40,7 @@ const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F', export class FilePreviewScreenComponent implements OnInit, OnDestroy { private projectId: string; private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; - private instance: WebViewerInstance; + private _instance: WebViewerInstance; private _dialogRef: MatDialogRef; public fullScreen = false; public editingReviewer = false; @@ -103,19 +103,19 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { set redactedView(value: boolean) { this._activeViewer = value ? 'REDACTED' : 'ANNOTATED'; - const allAnnotations = this.instance.annotManager.getAnnotationsList(); + const allAnnotations = this._instance.annotManager.getAnnotationsList(); const redactions = allAnnotations.filter((a) => a.getCustomData('redaction')); if (this._activeViewer === 'ANNOTATED') { redactions.forEach((redaction) => { redaction['StrokeColor'] = redaction.getCustomData('annotationColor'); }); - this.instance.annotManager.showAnnotations(allAnnotations); + this._instance.annotManager.showAnnotations(allAnnotations); } else { const other = allAnnotations.filter((a) => !a.getCustomData('redaction')); redactions.forEach((redaction) => { redaction['StrokeColor'] = redaction.getCustomData('redactionColor'); }); - this.instance.annotManager.hideAnnotations(other); + this._instance.annotManager.hideAnnotations(other); } this._updateCanPerformActions(); } @@ -125,7 +125,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } get activeViewer() { - return this.instance; + return this._instance; } get displayedPages(): number[] { @@ -133,7 +133,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } get activeViewerPage() { - return this.instance?.docViewer?.getCurrentPage(); + return this._instance?.docViewer?.getCurrentPage(); } get canNotSwitchToRedactedView() { @@ -472,7 +472,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } viewerReady($event: WebViewerInstance) { - this.instance = $event; + this._instance = $event; this.viewReady = true; this._cleanupAndRedrawManualAnnotations(); // Go to initial page from query params @@ -497,7 +497,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { this._fileDownloadService.loadActiveFileManualAnnotations().subscribe((manualRedactions) => { this.fileData.manualRedactions = manualRedactions; this._rebuildFilters(); - this._annotationDrawService.drawAnnotations(this.instance, this.annotations, this.redactedView); + this._annotationDrawService.drawAnnotations(this._instance, this.annotations, this.redactedView); }); } @@ -515,7 +515,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { }); const newPageAnnotations = this.annotations.filter((item) => item.pageNumber === page); this._handleDeltaAnnotationFilters(currentPageAnnotations, newPageAnnotations); - this._annotationDrawService.drawAnnotations(this.instance, newPageAnnotations); + this._annotationDrawService.drawAnnotations(this._instance, newPageAnnotations); } }); } diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts index 6da038fb7..3d157d589 100644 --- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts @@ -222,6 +222,22 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { return; } + // Add hide action as last item + if (annotation.isImage) { + this.instance.annotationPopup.add([ + { + type: 'actionButton', + img: '/assets/icons/general/visibility-off.svg', + title: this._translateService.instant('annotation-actions.hide'), + onClick: () => { + this._ngZone.run(() => { + this.instance.annotManager.hideAnnotation(viewerAnnotation); + }); + } + } + ]); + } + this.instance.annotationPopup.add(this._annotationActionsService.getViewerAvailableActions(annotation, this.annotationsChanged)); } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index b6ba99ff1..b2a723c4c 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -384,7 +384,9 @@ }, "remove": "Remove", "undo": "Undo", - "reject": "Reject" + "reject": "Reject", + "hide": "Hide", + "show": "Show" }, "initials-avatar": { "unassigned": "Unassigned" diff --git a/apps/red-ui/src/assets/icons/general/visibility-off.svg b/apps/red-ui/src/assets/icons/general/visibility-off.svg new file mode 100644 index 000000000..cdfda1260 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/visibility-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/visibility.svg b/apps/red-ui/src/assets/icons/general/visibility.svg new file mode 100644 index 000000000..a066f1e16 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/visibility.svg @@ -0,0 +1 @@ + \ No newline at end of file