From 13a396c5e2bab53aa21e25d9a380f5d4f89061d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 22 Oct 2020 21:34:50 +0300 Subject: [PATCH 1/3] Project listing table col names --- .../project-listing-screen.component.html | 99 ++++++++++--------- .../project-listing-screen.component.scss | 8 +- .../project-overview-screen.component.html | 2 +- .../project-overview-screen.component.scss | 5 - apps/red-ui/src/assets/i18n/en.json | 11 +++ .../src/assets/styles/red-page-layout.scss | 5 + 6 files changed, 73 insertions(+), 57 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 91f87587b..252e280a2 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -45,58 +45,63 @@ +
+
+
+
+
+
-
-
-
-
- {{pw.project.projectName}} -
-
-
- - {{documentCount(pw)}}
-
- - {{userCount(pw)}}
-
- - {{pw.project.date | date:'mediumDate'}}
-
+
+
+
+ {{pw.project.projectName}}
-
- -
-
- +
+
+ + {{documentCount(pw)}}
+
+ + {{userCount(pw)}}
+
+ + {{pw.project.date | date:'mediumDate'}}
+
+
+ +
+
+ +
-
- - - - - - -
+
+ + + + + +
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 4465f680e..a15eff02b 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 @@ -13,7 +13,7 @@ .table-item { &:hover { - .stats-bar { + .status { display: none; } } @@ -21,10 +21,10 @@ .stats-subtitle { margin-top: 6px; } + } - .stats-bar, .action-buttons { - width: 160px; - } + .status, .action-buttons { + width: 160px; } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 1a67ac25b..d68ddd536 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -57,7 +57,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 200c9f7f6..8d4b215bf 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 @@ -8,11 +8,6 @@ min-width: 60px; } -.header-flex-end { - display: flex; - justify-content: flex-end; -} - .select-all-container { display: flex; gap: 16px; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f8eee0c5c..8ba164166 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -176,6 +176,17 @@ "label": "Recent" } }, + "table-col-names": { + "name": { + "label": "Name" + }, + "owner": { + "label": "Owner" + }, + "status": { + "label": "Status" + } + }, "stats": { "analyzed-pages": { "label": "Analyzed pages" 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 56b3d5d08..05c217ee7 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -76,6 +76,11 @@ html, body { display: flex !important; } +.flex-end { + display: flex; + justify-content: flex-end; +} + .flex-1 { flex: 1; } From f97e5235948eb7d3c6c568de170903808ffba881 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 22 Oct 2020 23:50:21 +0300 Subject: [PATCH 2/3] Sort by added on & removed material icons font --- apps/red-ui/src/app/icons/icons.module.ts | 4 +-- .../base-screen/base-screen.component.html | 10 +++---- .../file-preview-screen.component.html | 18 ++++++++----- .../project-overview-screen.component.html | 9 ++++++- .../project-overview-screen.component.ts | 6 +++++ apps/red-ui/src/assets/i18n/en.json | 3 +++ .../src/assets/icons/general/arrow-down.svg | 13 +++------ .../src/assets/icons/general/arrow-right.svg | 3 +++ .../src/assets/icons/general/arrow-up.svg | 13 +++------ .../assets/icons/general/drop-down-arrow.svg | 7 ----- apps/red-ui/src/assets/styles/red-button.scss | 8 +++++- apps/red-ui/src/assets/styles/red-menu.scss | 5 +++- .../src/assets/styles/red-page-layout.scss | 27 +++++++++++-------- apps/red-ui/src/assets/styles/red-tables.scss | 12 +++++++++ apps/red-ui/src/assets/styles/red-theme.scss | 1 - 15 files changed, 84 insertions(+), 55 deletions(-) mode change 100755 => 100644 apps/red-ui/src/assets/icons/general/arrow-down.svg create mode 100644 apps/red-ui/src/assets/icons/general/arrow-right.svg delete mode 100644 apps/red-ui/src/assets/icons/general/drop-down-arrow.svg diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 9e14e6299..3520ceb22 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -14,8 +14,8 @@ export class IconsModule { private sanitizer: DomSanitizer ) { const icons = [ - 'add', 'analyse', 'arrow-down', 'arrow-up', 'assign', 'calendar', 'check', - 'close', 'document', 'double-chevron-right', 'download', + 'add', 'analyse', 'arrow-down', 'arrow-up', 'arrow-right', 'assign', 'calendar', + 'check', 'close', 'document', 'double-chevron-right', 'download', 'edit', 'error', 'folder', 'info', 'lightning', 'logout', 'menu', 'pages', 'plus', 'preview', 'refresh', 'report', 'secret', 'sort-asc', 'sort-desc', 'status', 'trash', 'user', 'check-alt' diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 46735ddb7..da5a7c2f3 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -16,18 +16,18 @@ mat-menu-item>{{appStateService.activeFile.filename}}
-
+
- arrow_right +
{{appStateService.activeProject.project.projectName}}
- arrow_right +
@@ -39,9 +39,9 @@
- 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 3a283814e..9c9370bbe 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 @@ -31,10 +31,10 @@
-
-
@@ -91,9 +91,15 @@
- arrow_drop_down + - arrow_right +
+
-
+
+ +
+ + +
+
- - - - - - - - - + + + diff --git a/apps/red-ui/src/assets/icons/general/arrow-right.svg b/apps/red-ui/src/assets/icons/general/arrow-right.svg new file mode 100644 index 000000000..c6aecfcd4 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/red-ui/src/assets/icons/general/arrow-up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg index 27d76d583..b4d9d527d 100644 --- a/apps/red-ui/src/assets/icons/general/arrow-up.svg +++ b/apps/red-ui/src/assets/icons/general/arrow-up.svg @@ -1,10 +1,3 @@ - - - - - - - - - - + + + diff --git a/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg b/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg deleted file mode 100644 index a54482c0e..000000000 --- a/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - down - - - - \ No newline at end of file diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index e4f7953e4..0c98d8078 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -19,6 +19,7 @@ .mat-button-wrapper { display: flex; align-items: center; + gap: 6px; } } @@ -28,8 +29,13 @@ .mat-button, .mat-flat-button, .mat-icon-button { gap: 6px; - + mat-icon { width: 14px; } } + +.arrow-button mat-icon { + width: 9px; + margin-left: 3px; +} diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss index dc12d76f7..5b10ac247 100644 --- a/apps/red-ui/src/assets/styles/red-menu.scss +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -12,9 +12,12 @@ .arrow-wrapper { width: 24px; + text-align: center; mat-icon { - width: 14px; + width: 9px; + height: 9px; + margin: 0; } } 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 05c217ee7..e003252a3 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -172,19 +172,24 @@ html, body { } } - .breadcrumb { - text-decoration: none; - color: $accent; - font-weight: 600; - @include line-clamp(1); - min-width: 25px; + .breadcrumbs-container { + display: flex; + gap: 8px; - &:last-child { - color: $primary; - } + .breadcrumb { + text-decoration: none; + color: $accent; + font-weight: 600; - .mat-icon { - vertical-align: middle; + &:last-child { + color: $primary; + @include line-clamp(1); + } + + .mat-icon { + vertical-align: middle; + width: 6px; + } } } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index c977794f9..f331982d7 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -20,10 +20,22 @@ display: flex; text-transform: uppercase; border-bottom: 1px solid rgba(226, 228, 233, 0.9); + align-items: center; > div { padding: 8px 16px; font-weight: 600; + display: flex; + align-items: center; + gap: 6px; + } + + .sort-arrows-container { + mat-icon { + display: block; + width: 6px; + height: 11px; + } } } diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 74b2b37d5..0ec469e00 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -1,6 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap'); -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); @import '~ngx-toastr/toastr'; @import "red-material-theme"; @import "red-page-layout"; From 521d77dd992d11cad5d715bdd2517e13d9058ff4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 23 Oct 2020 01:06:03 +0300 Subject: [PATCH 3/3] Navigate annotations with arrows --- .../file-preview-screen.component.html | 2 ++ .../file-preview-screen.component.ts | 34 ++++++++++++++++++- .../file/pdf-viewer/pdf-viewer.component.ts | 14 ++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) 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 9c9370bbe..6d6558445 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 @@ -58,11 +58,13 @@ 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 9e95e7712..78622fce5 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, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { ManualRedactionEntry, ReanalysisControllerService } from '@redaction/red-ui-http'; import { AppStateService } from '../../../state/app-state.service'; @@ -272,4 +272,36 @@ export class FilePreviewScreenComponent implements OnInit { public isManuallyAddedAnnotation(annotation: Annotations.Annotation) { return annotation.Id.indexOf('request:') >= 0; } + + @HostListener('window:keyup', ['$event']) + handleKeyEvent($event: KeyboardEvent) { + $event.preventDefault(); + + if (!this.selectedAnnotation) { + this.selectAnnotation(this.displayedAnnotations[this.displayedPages[0]].annotations[0]); + } else { + const page = this.selectedAnnotation.getPageNumber(); + const pageIdx = this.displayedPages.indexOf(page); + const annotationsOnPage = this.displayedAnnotations[page].annotations; + const idx = annotationsOnPage.indexOf(this.selectedAnnotation); + + if ($event.key === 'ArrowDown') { + if (idx + 1 !== annotationsOnPage.length) { // If not last item in page + this.selectAnnotation(annotationsOnPage[idx + 1]); + } else if (pageIdx + 1 < this.displayedPages.length) { // If not last page + const nextPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx + 1]].annotations; + this.selectAnnotation(nextPageAnnotations[0]); + } + } + + if ($event.key === 'ArrowUp') { + if (idx !== 0) { // If not first item in page + this.selectAnnotation(annotationsOnPage[idx - 1]); + } else if (pageIdx) { // If not first page + const prevPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx - 1]].annotations; + this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]); + } + } + } + } } 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 37d024de8..799acf2fc 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 @@ -33,6 +33,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { @Output() annotationSelected = new EventEmitter(); @Output() manualAnnotationRequested = new EventEmitter(); @Output() pageChanged = new EventEmitter(); + @Output() keyUp = new EventEmitter(); @ViewChild('viewer', { static: true }) viewer: ElementRef; wvInstance: WebViewerInstance; @@ -93,6 +94,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { }); instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler); + + instance.docViewer.on('keyDown', ($event) => { + if ($event.key.startsWith('Arrow')) { + $event.preventDefault(); + } + }) + + instance.docViewer.on('keyUp', ($event) => { + if ($event.key.startsWith('Arrow')) { + this.keyUp.emit($event); + } + }) + instance.loadDocument(pdfBlob, { filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf' }); }); }