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..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 @@ -31,10 +31,10 @@
-
@@ -72,10 +74,10 @@
-
@@ -91,9 +93,15 @@
- arrow_drop_down + - arrow_right +
= 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' }); }); } 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..4fb8edc83 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 @@ -51,13 +51,20 @@
+
-
+
+ +
+ + +
+
-
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/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 085a6e253..ae2d719ab 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -25,6 +25,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public sortingOptions: SortingOption[] = [ {label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated'}, + {label: 'project-overview.sorting.oldest.label', order: 'asc', column: 'lastUpdated'}, {label: 'project-overview.sorting.alphabetically.label', order: 'asc', column: 'filename'}, {label: 'project-overview.sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages'}, {label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses'} @@ -195,4 +196,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public getFileOwnerUsername(fileStatus: FileStatus) { return this._userService.getNameForId(fileStatus.currentReviewer); } + + public toggleSortByAddedOn() { + const sortedByRecent: boolean = (this.sortingOption === this.sortingOptions[0]); + this.sortingOption = sortedByRecent ? this.sortingOptions[1] : this.sortingOptions[0]; + } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f8eee0c5c..14b537bae 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" @@ -309,6 +320,9 @@ "recent": { "label": "Recent" }, + "oldest": { + "label": "Oldest" + }, "alphabetically": { "label": "Alphabetically" }, diff --git a/apps/red-ui/src/assets/icons/general/arrow-down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg old mode 100755 new mode 100644 index 815c3b0c6..b33ce6d10 --- a/apps/red-ui/src/assets/icons/general/arrow-down.svg +++ b/apps/red-ui/src/assets/icons/general/arrow-down.svg @@ -1,10 +1,3 @@ - - - - - - - - - - + + + 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 56b3d5d08..e003252a3 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; } @@ -167,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";