diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index 5f049d3eb..6114a8ece 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/apps/red-ui/src/app/dialogs/dialog.service.ts @@ -99,7 +99,7 @@ export class DialogService { return ref; } - public acceptSuggestion( + public openAcceptSuggestionModal( $event: MouseEvent, annotation: AnnotationWrapper ): MatDialogRef { @@ -115,7 +115,7 @@ export class DialogService { return ref; } - public rejectSuggestion( + public openRejectSuggestionModal( $event: MouseEvent, annotation: AnnotationWrapper, rejectCallback: () => void 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 61c3f2114..650ab0a9f 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 @@ -1,7 +1,7 @@
- + {{ 'file-preview.view-toggle.label' | translate }}
@@ -13,9 +13,9 @@
@@ -23,49 +23,49 @@ -
@@ -74,68 +74,68 @@
{{ pageNumber }}
-
+
{{ page }}
+ +
+ + +
+
+
+ + +
+
+ diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index f320fc099..132adff7b 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -104,22 +104,7 @@ redaction-pdf-viewer { background-color: #f9fafb; .annotation-actions { - background: linear-gradient( - to right, - transparent 0%, - #f9fafb, - #f9fafb, - #f9fafb - ); display: flex; - align-items: center; - justify-content: flex-end; - width: 120px; - padding-right: 16px; - - .confirm { - color: $green-2; - } } } @@ -133,7 +118,25 @@ redaction-pdf-viewer { top: 0; bottom: 0; display: none; - width: 40px; + align-items: center; + justify-content: flex-end; + width: 120px; + padding-right: 16px; + background: linear-gradient( + to right, + transparent 0%, + #f9fafb, + #f9fafb, + #f9fafb + ); + + .confirm.active { + background-color: $grey-2; + } + + &.visible { + display: flex; + } } } } 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 0489a2789..e495a7234 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 @@ -29,6 +29,7 @@ import { FileActionService } from '../service/file-action.service'; import { AnnotationDrawService } from '../service/annotation-draw.service'; import { AnnotationProcessingService } from '../service/annotation-processing.service'; import { FilterModel } from '../../../common/filter/model/filter.model'; +import { MatMenuTrigger } from '@angular/material/menu'; const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -38,24 +39,6 @@ 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; - - @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; - filters: FilterModel[]; - constructor( public readonly appStateService: AppStateService, public readonly userService: UserService, @@ -90,6 +73,38 @@ export class FilePreviewScreenComponent implements OnInit { this._activeViewer = value ? 'REDACTED' : 'ANNOTATED'; } + public get activeViewer() { + return this.instance; + } + + public get displayedPages(): number[] { + return Object.keys(this.displayedAnnotations).map((key) => Number(key)); + } + + get activeViewerPage() { + return this.instance?.docViewer?.getCurrentPage(); + } + private projectId: string; + private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; + private instance: WebViewerInstance; + private _dialogRef: MatDialogRef; + + @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent; + @ViewChild('annotationsElement') private _annotationsElement: ElementRef; + @ViewChild('quickNavigation') private _quickNavigationElement: ElementRef; + @ViewChild('menu') private _matMenuTrigger: MatMenuTrigger; + + 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 _activeSuggestion: AnnotationWrapper; + public ngOnInit(): void { this._loadFileData(); this.appStateService.fileStatusChanged.subscribe((fileStatus) => { @@ -152,14 +167,6 @@ export class FilePreviewScreenComponent implements OnInit { this._fileActionService.assignProjectReviewer(); } - public get activeViewer() { - return this.instance; - } - - public get displayedPages(): number[] { - return Object.keys(this.displayedAnnotations).map((key) => Number(key)); - } - public handleAnnotationSelected(annotationId: string) { this.selectedAnnotation = this.annotations.find((a) => a.id === annotationId); this.scrollToSelectedAnnotation(); @@ -197,10 +204,6 @@ export class FilePreviewScreenComponent implements OnInit { }); } - get activeViewerPage() { - return this.instance?.docViewer?.getCurrentPage(); - } - @debounce() private _scrollViews() { this._scrollQuickNavigation(); @@ -242,18 +245,36 @@ export class FilePreviewScreenComponent implements OnInit { } } + public isSuggestionVisible(annotation: AnnotationWrapper) { + return annotation.id === this._activeSuggestion?.id; + } + public acceptSuggestion($event: MouseEvent, annotation: AnnotationWrapper) { this.ngZone.run(() => { - this._dialogRef = this._dialogService.acceptSuggestion($event, annotation); + this._dialogRef = this._dialogService.openAcceptSuggestionModal($event, annotation); }); } + public openAcceptSuggestionMenu($event: MouseEvent, annotation: AnnotationWrapper) { + $event.preventDefault(); + this._activeSuggestion = annotation; + this._matMenuTrigger.openMenu(); + } + + public onSuggestionMenuClose() { + this._activeSuggestion = null; + } + public rejectSuggestion($event: MouseEvent, annotation: AnnotationWrapper) { this.ngZone.run(() => { - this._dialogRef = this._dialogService.rejectSuggestion($event, annotation, () => { - // TODO DELETE ANNOTATIOn - //this.activeViewer.annotManager.deleteAnnotation(annotation, false, true); - }); + this._dialogRef = this._dialogService.openRejectSuggestionModal( + $event, + annotation, + () => { + // TODO DELETE ANNOTATIOn + //this.activeViewer.annotManager.deleteAnnotation(annotation, false, true); + } + ); }); } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 5cf21d44c..3a065ff1c 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -478,7 +478,15 @@ "label": "Quick Navigation" }, "annotations": { - "label": "Annotations" + "label": "Annotations", + "accept-suggestion": { + "add-to-dict": { + "label": "Approve and add to dictionary" + }, + "only-here": { + "label": "Approve only here" + } + } }, "info": { "label": "Info", diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index b3ac2504f..629010773 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -43,3 +43,10 @@ width: 9px; margin-left: 3px; } + +.mat-icon-button { + transition: background-color 0.25s ease-in-out; + &:hover { + background-color: $grey-2; + } +} diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss index bed241428..eda490c58 100644 --- a/apps/red-ui/src/assets/styles/red-menu.scss +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -10,6 +10,10 @@ font-size: 13px; color: $accent; + display: flex; + align-items: center; + gap: 8px; + .arrow-wrapper { width: 16px; margin-right: 8px;