From 03f69a6b3fd5aed46907feeab0a7baace5bdc0c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 12 Oct 2020 14:48:44 +0300 Subject: [PATCH 1/2] File preview right new layout --- .../status-bar/status-bar.component.html | 4 +- .../status-bar/status-bar.component.scss | 12 +++- .../status-bar/status-bar.component.ts | 3 + .../file-preview-screen.component.html | 51 ++++++------- .../file-preview-screen.component.scss | 72 ++++++++++--------- .../file-preview-screen.component.ts | 18 ++++- .../project-overview-screen.component.html | 6 +- .../project-overview-screen.component.scss | 6 +- .../upload-status-overlay.component.html | 2 +- .../src/assets/styles/red-components.scss | 8 +-- .../src/assets/styles/red-page-layout.scss | 6 +- apps/red-ui/src/assets/styles/red-tables.scss | 5 -- .../src/assets/styles/red-text-styles.scss | 11 +-- .../src/assets/styles/red-variables.scss | 2 + 14 files changed, 114 insertions(+), 92 deletions(-) diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/components/status-bar/status-bar.component.html index 3e36c7142..20c45cc8a 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.html +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.html @@ -1,6 +1,6 @@ -
+
-
{{ rect.title }}
+
{{ rect.title }}
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss index bf1cd8db1..983674178 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss @@ -5,8 +5,16 @@ display: flex; width: 100%; - .subtitle { - margin-bottom: 8px; + &.small { + .rectangle { + width: 12px; + } + + .section-wrapper { + display: flex; + align-items: center; + gap: 10px; + } } .section-wrapper:first-child { diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts index 12f646bf2..a6a23e4b1 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts @@ -14,6 +14,9 @@ export class StatusBarComponent implements OnInit { title?: string, }[] = []; + @Input() + public small = false; + constructor() { } 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 89c25f203..808f42968 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 @@ -29,26 +29,21 @@
-
-
Edit
-
Delete
-
View
+ + +
+
+ Quick Navigation +
-
-
-
- Annotations -
-
- Info -
+ +
+
+ Annotations
-
+ +
{{annotation.getStatus()}}
-
- +
-
+ +
+
+ Info +
+ +
+ + +
645
9
- - + Assign Reviewer + + Assign Reviewer
@@ -97,7 +99,6 @@
-
-
- -
-
@@ -120,7 +116,7 @@
-
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index c626ee8f2..b80225463 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -29,9 +29,7 @@ line-height: 18px; } - .project-team { - .member:not(:last-child) { - margin-right: 5px; - } + .members-container { + gap: 5px; } } diff --git a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html index 6c1299786..bafe332a3 100644 --- a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html +++ b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html @@ -1,6 +1,6 @@
-
+
{{ 'upload-status.dialog.title.label' | translate: {p1: uploadService.files.length} }}
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index f49c98a69..afb219c9a 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -10,11 +10,11 @@ border-radius: 12px; font-size: 10px; border: 1px solid #E2E4E9; - font-family: Inter, sans-serif; letter-spacing: 0; line-height: 12px; text-align: center; - + text-transform: uppercase; + font-family: Inter, sans-serif; &.large { height: 32px; @@ -50,7 +50,5 @@ align-items: center; } - > div:not(:last-child) { - margin-right: 12px; - } + gap: 12px; } 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 c3b586e7b..200d1424c 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -6,7 +6,7 @@ html, body { padding: 0; height: 100vh; font-family: 'Inter', sans-serif; - color: $grey-1; + color: $accent; } .page-header { @@ -142,8 +142,6 @@ html, body { .app-name { margin-left: 16px; height: 20px; - color: #283241; - font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; @@ -158,7 +156,7 @@ html, body { .breadcrumb { text-decoration: none; - color: $grey-1; + color: $accent; font-size: 13px; line-height: 18px; font-weight: 600; diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index b0c767868..818888e5e 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -47,11 +47,6 @@ @include line-clamp(1); } - .table-item-title--large { - font-size: 16px; - line-height: 20px; - } - .on-hover-wrapper { width: 0; height: 0; diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss index 69bb40bbf..ecee20c9b 100644 --- a/apps/red-ui/src/assets/styles/red-text-styles.scss +++ b/apps/red-ui/src/assets/styles/red-text-styles.scss @@ -24,14 +24,17 @@ a { } .heading-l { - color: #283241; - font-family: Inter, sans-serif; font-size: 18px; - font-weight: bold; - letter-spacing: 0; + font-weight: 600; line-height: 22px; } +.heading { + font-size: 16px; + line-height: 20px; + font-weight: 600; +} + .subheading { text-transform: uppercase; opacity: 0.7; diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index b7e8da0e5..67531990d 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -16,6 +16,8 @@ $red-1: #F65757; $yellow-1: #FFB83B; $green-1: #46CE7D; +$separator: rgba(226,228,233,0.9); + $right-container-inside-width: 340px; $right-container-padding: 16px; $right-container-width: calc(#{$right-container-inside-width} + 2*#{$right-container-padding} + 1px); From cf50a38a82d1452a4a0ec23c91f32d689db74d21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 12 Oct 2020 16:34:25 +0300 Subject: [PATCH 2/2] Quick navigation --- .../file-preview-screen.component.html | 24 ++++++++++++-- .../file-preview-screen.component.scss | 25 +++++++++++++-- .../file-preview-screen.component.ts | 32 ++++++++++++++----- .../file/pdf-viewer/pdf-viewer.component.ts | 6 +++- .../project-listing-screen.component.scss | 6 ---- .../src/assets/styles/red-components.scss | 6 ++++ 6 files changed, 80 insertions(+), 19 deletions(-) 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 808f42968..b6ddefadb 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 @@ -35,6 +35,26 @@
Quick Navigation
+ +
+
+
Page {{ item.pageNumber }}
+
+
+ + {{item.redactions}} +
+
+ + {{item.hints}} +
+
+
+
@@ -43,7 +63,7 @@ Annotations
-
+
-
+
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; + } }