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 4d3c0137c..8b1faef8f 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
@@ -17,6 +17,8 @@ redaction-pdf-viewer {
.tabs-title-row {
border-bottom: 1px solid rgba(226,228,233,0.9);
+ box-sizing: border-box;
+ height: 45px;
.tab {
font-size: 13px;
@@ -40,8 +42,12 @@ redaction-pdf-viewer {
.actions-row {
margin: $right-container-padding $right-container-padding 0;
}
+
.tab-content {
padding: $right-container-padding;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: calc(100vh - 110px - 40px - 45px - 3*#{$right-container-padding});
}
.stats-subtitle {
@@ -55,4 +61,15 @@ redaction-pdf-viewer {
margin-left: 12px;
}
+
+ .annotation {
+ border: 1px solid $grey-2;
+ padding: 14px;
+ font-size: 12px;
+ cursor: pointer;
+
+ &.active {
+ border-left: 2px solid $red-1;
+ }
+ }
}
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 b64dcea75..ac5556b81 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
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FileUploadControllerService, ProjectControllerService, StatusControllerService} from '@redaction/red-ui-http';
import {TranslateService} from '@ngx-translate/core';
@@ -8,6 +8,7 @@ import {AppStateService} from '../../../state/app-state.service';
import {FileDetailsDialogComponent} from './file-details-dialog/file-details-dialog.component';
import {ViewerSyncService} from '../service/viwer-sync.service';
import {Annotations} from "@pdftron/webviewer";
+import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
@Component({
selector: 'redaction-file-preview-screen',
@@ -18,9 +19,14 @@ export class FilePreviewScreenComponent implements OnInit {
projectId: string;
fileId: string;
- annotations: Annotations.Annotation[] = [];
+ public annotations: Annotations.Annotation[] = [];
public selectedTab: 'ANNOTATIONS' | 'INFO' = 'ANNOTATIONS';
private _readyViewers: string[] = [];
+ public selectedAnnotation: Annotations.Annotation;
+
+ @ViewChild(PdfViewerComponent)
+ private _viewerComponent: PdfViewerComponent;
+
constructor(
public readonly appStateService: AppStateService,
@@ -78,10 +84,18 @@ export class FilePreviewScreenComponent implements OnInit {
handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
this._changeDetectorRef.detectChanges();
- for(let annotation of annotations){
+ for(const annotation of annotations){
if(annotation.Id.indexOf(':')>=0){
this.annotations.push(annotation);
}
}
}
+
+ public handleAnnotationSelected(annotation: Annotations.Annotation) {
+ this.selectedAnnotation = annotation;
+ }
+
+ public selectAnnotation(annotation: Annotations.Annotation) {
+ this._viewerComponent.selectAnnotation(annotation);
+ }
}
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 1894c09c8..bb67b5afd 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
@@ -37,6 +37,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() fileStatus: FileStatus;
@Output() fileReady = new EventEmitter();
@Output() annotationsAdded = new EventEmitter
();
+ @Output() annotationSelected = new EventEmitter();
@ViewChild('viewer', {static: true}) viewer: ElementRef;
wvInstance: WebViewerInstance;
@@ -87,6 +88,14 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
}
});
+ instance.annotManager.on('annotationSelected', ((annotationList, action) => {
+ if (action === 'deselected') {
+ this.annotationSelected.emit(null);
+ } else {
+ this.annotationSelected.emit(annotationList[0]);
+ }
+ }));
+
instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
});
@@ -123,8 +132,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
'textSquigglyToolButton',
'textStrikeoutToolButton',
'linkButton',
- // 'toggleNotesButton',
- // 'notesPanel'
+ 'toggleNotesButton',
+ 'notesPanel'
]);
this.wvInstance.textPopup.add({
@@ -147,5 +156,13 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
this._viewerSyncService.deregisterInstance(this.fileType);
}
+ public selectAnnotation(annotation: Annotations.Annotation) {
+ this.wvInstance.annotManager.deselectAllAnnotations();
+ this.wvInstance.annotManager.selectAnnotation(annotation);
+ this.wvInstance.docViewer.displayPageLocation(
+ annotation.getPageNumber(),
+ 0,
+ annotation.getY() - 100);
+ }
}
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 75f893978..ca52307e4 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -38,6 +38,7 @@ html, body {
.actions-row {
display: flex;
+ height: 40px;
> div {
padding: 10px;