+
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 4dd549326..8df97f57d 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
@@ -32,7 +32,7 @@ redaction-pdf-viewer {
padding: 0 25px;
}
- .content-container {
+ .tab-content {
overflow-y: scroll;
overflow-x: hidden;
height: calc(100vh - 110px - 73px);
@@ -71,7 +71,7 @@ redaction-pdf-viewer {
}
.annotation {
- border-bottom: 1px solid $grey-2;
+ border-bottom: 1px solid $separator;
padding: 14px;
font-size: 12px;
cursor: pointer;
@@ -80,4 +80,25 @@ redaction-pdf-viewer {
border-left: 2px solid $red-1;
}
}
+
+ .page-navigation {
+ cursor: pointer;
+ border-bottom: 1px solid $separator;
+ padding: 14px;
+ border-left: 4px solid transparent;
+
+ &:hover {
+ background-color: #F4F5F7;
+ }
+
+ .page-number {
+ font-size: 13px;
+ line-height: 18px;
+ font-weight: 600;
+ }
+
+ &.active {
+ border-left: 4px 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 d91474199..e02930c71 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
@@ -33,6 +33,8 @@ export class FilePreviewScreenComponent implements OnInit {
public fileId: string;
public annotations: Annotations.Annotation[] = [];
public selectedAnnotation: Annotations.Annotation;
+ public selectedPageNumber: number;
+ public quickNavigation: { pageNumber: number, redactions: number, hints: number }[] = [];
constructor(
public readonly appStateService: AppStateService,
@@ -53,11 +55,11 @@ export class FilePreviewScreenComponent implements OnInit {
});
}
- ngOnInit(): void {
+ public ngOnInit(): void {
this._viewerSyncService.activateViewer('ANNOTATED');
}
- showDetailsDialog($event: MouseEvent) {
+ public showDetailsDialog($event: MouseEvent) {
$event.stopPropagation();
this._dialog.open(FileDetailsDialogComponent, {
width: '600px',
@@ -66,32 +68,41 @@ export class FilePreviewScreenComponent implements OnInit {
});
}
- fileReady(viewer: string) {
+ public fileReady(viewer: string) {
this._readyViewers.push(viewer);
this._changeDetectorRef.detectChanges();
}
- get viewReady() {
+ public get viewReady() {
return this._readyViewers.length >= 2;
}
- get activeViewer() {
+ public get activeViewer() {
return this._viewerSyncService.activeViewer;
}
- activateViewer(value: string) {
+ public activateViewer(value: string) {
this._viewerSyncService.activateViewer(value);
}
- selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') {
+ public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') {
this._selectedTab = value;
}
- handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
+ public handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
this._changeDetectorRef.detectChanges();
for (const annotation of annotations) {
if (annotation.Id.indexOf(':') >= 0) {
this.annotations.push(annotation);
+ const pageNumber = annotation.getPageNumber();
+ console.log({pageNumber})
+ let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
+ if (!el) {
+ el = { pageNumber, redactions: 0, hints: 0 }
+ this.quickNavigation.push(el);
+ }
+ if (annotation.Id.startsWith('hint:')) { el.hints++; }
+ if (annotation.Id.startsWith('redaction:')) { el.redactions++; }
}
}
this.annotations = AnnotationUtils.sortAnnotations(this.annotations);
@@ -141,4 +152,9 @@ export class FilePreviewScreenComponent implements OnInit {
public get infoTab() {
return this._selectedTab === 'INFO';
}
+
+ public selectPage(pageNumber: number) {
+ this.selectedPageNumber = pageNumber;
+ this._viewerComponent.navigateToPage(pageNumber);
+ }
}
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 39ae8678a..c1140d588 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
@@ -94,7 +94,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
}
}));
- instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
+ instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
});
}
@@ -162,5 +162,9 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
0,
annotation.getY() - 100);
}
+
+ public navigateToPage(pageNumber: number) {
+ this.wvInstance.docViewer.displayPageLocation(pageNumber, 0, 0);
+ }
}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index 3c707e309..064f81453 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -2,12 +2,6 @@
.stats-subtitle {
margin-top: 6px;
-
- mat-icon {
- width: 12px;
- height: 12px;
- margin-right: 4px;
- }
}
.stats-bar {
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index afb219c9a..9d836670f 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -51,4 +51,10 @@
}
gap: 12px;
+
+ mat-icon {
+ width: 10px;
+ height: 10px;
+ margin-right: 4px;
+ }
}