From 7122fb90d6e334851430a01b5aafce8f7aa3b8bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 14 Oct 2020 16:39:29 +0300 Subject: [PATCH 1/7] View toggle --- apps/red-ui/src/app/app.module.ts | 2 ++ .../file-preview-screen.component.html | 17 ++++---------- .../file-preview-screen.component.ts | 12 +++++++++- apps/red-ui/src/assets/i18n/en.json | 7 ++---- apps/red-ui/src/assets/styles/red-theme.scss | 1 + apps/red-ui/src/assets/styles/red-toggle.scss | 23 +++++++++++++++++++ 6 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 apps/red-ui/src/assets/styles/red-toggle.scss diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 3aa1a0ef4..648792c13 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -52,6 +52,7 @@ import { AppStateGuard } from './state/app-state.guard'; import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component'; import { ManualRedactionDialogComponent } from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -134,6 +135,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { NgpSortModule, MatToolbarModule, MatButtonModule, + MatSlideToggleModule, MatMenuModule, MatIconModule, MatTooltipModule, 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 d4d7495b0..8d6fbcf2d 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 @@ -1,17 +1,8 @@
-
-
- - -
-
+
@@ -86,7 +77,7 @@
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 2b89a7347..2e80f47dc 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 @@ -31,6 +31,7 @@ export class FilePreviewScreenComponent implements OnInit { private _readyViewers: string[] = []; private projectId: string; private _selectedTab: 'NAVIGATION' | 'ANNOTATIONS' | 'INFO' = 'NAVIGATION'; + private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent; @@ -75,6 +76,15 @@ export class FilePreviewScreenComponent implements OnInit { return this._userService.user; } + public get redactedView() { + return this._activeViewer === 'REDACTED'; + } + + public set redactedView(value: boolean) { + this._activeViewer = value ? 'REDACTED' : 'ANNOTATED'; + this._activateViewer(this._activeViewer); + } + public ngOnInit(): void { // PDFTRON cache fix localStorage.clear(); @@ -103,7 +113,7 @@ export class FilePreviewScreenComponent implements OnInit { return this._viewerSyncService.activeViewer; } - public activateViewer(value: string) { + private _activateViewer(value: string) { this._viewerSyncService.activateViewer(value); } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f60bf4b26..b16f64902 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -323,11 +323,8 @@ } }, "file-preview": { - "annotated": { - "label": "Review Annotations" - }, - "redacted": { - "label": "Preview Redaction" + "view-toggle": { + "label": "Redacted View" }, "download-redacted": { "label": "Download Redacted" diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 7e92f84ae..5e9e49174 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -7,6 +7,7 @@ @import "red-dialog"; @import "red-input"; @import "red-select"; +@import "red-toggle"; @import "red-media-queries"; @import "red-tables"; @import "red-components"; diff --git a/apps/red-ui/src/assets/styles/red-toggle.scss b/apps/red-ui/src/assets/styles/red-toggle.scss new file mode 100644 index 000000000..f8794b753 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-toggle.scss @@ -0,0 +1,23 @@ +mat-slide-toggle { + display: flex !important; + flex-direction: row-reverse; + gap: 8px; + + .mat-slide-toggle-bar { + height: 16px !important; + width: 30px !important; + border-radius: 16px !important; + } + + .mat-slide-toggle-thumb-container { + top: 2px !important; + left: 2px !important; + height: 12px !important; + width: 12px !important; + } + + .mat-slide-toggle-thumb { + height: 12px !important; + width: 12px !important; + } +} From 680a85f7fe32f4537de048fc895768ac0e019237 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 14 Oct 2020 17:36:25 +0300 Subject: [PATCH 2/7] Download file button --- .../file-preview-screen.component.html | 24 +++++++++++++++++-- .../file-preview-screen.component.ts | 4 ++++ .../project-listing-screen.component.html | 2 +- .../project-overview-screen.component.html | 2 +- apps/red-ui/src/assets/i18n/en.json | 15 ++++++++++-- apps/red-ui/src/assets/styles/red-button.scss | 5 ++++ .../src/assets/styles/red-text-styles.scss | 6 ----- apps/red-ui/src/assets/styles/red-theme.scss | 2 ++ 8 files changed, 48 insertions(+), 12 deletions(-) create mode 100644 apps/red-ui/src/assets/styles/red-button.scss 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 8d6fbcf2d..7e147c702 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 @@ -3,8 +3,28 @@ - +
+ + +
+
+
+ +
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 2e80f47dc..823330d8a 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 @@ -296,4 +296,8 @@ export class FilePreviewScreenComponent implements OnInit { } }); } + + public downloadFile(type: 'original' | 'annotated' | 'redacted') { + console.log(`Downloading ${type}...`); + } } 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 0d80afd24..6814cbc43 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 @@ -7,7 +7,7 @@
- diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index b16f64902..8ef296db5 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -326,8 +326,19 @@ "view-toggle": { "label": "Redacted View" }, - "download-redacted": { - "label": "Download Redacted" + "download": { + "label": "Download", + "dropdown": { + "original": { + "label": "Original" + }, + "annotated": { + "label": "Annotated" + }, + "redacted": { + "label": "Redacted" + } + } } }, "initials-avatar": { diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss new file mode 100644 index 000000000..901623023 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -0,0 +1,5 @@ +button { + font-family: Inter, sans-serif !important; + font-weight: 400 !important; + border-radius: 25px !important; +} 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 ecee20c9b..b078a6445 100644 --- a/apps/red-ui/src/assets/styles/red-text-styles.scss +++ b/apps/red-ui/src/assets/styles/red-text-styles.scss @@ -1,12 +1,6 @@ @import "red-variables"; @import "red-mixins"; -button { - font-family: Inter, sans-serif !important; - font-weight: 400 !important; - border-radius: 17px !important; -} - a { color: $red-1; diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 5e9e49174..46606ca48 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -1,11 +1,13 @@ @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"; @import "red-text-styles"; @import "red-dialog"; @import "red-input"; +@import "red-button"; @import "red-select"; @import "red-toggle"; @import "red-media-queries"; From 8fc2d54540b331ca6c763921ade9b0740239bb7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 14 Oct 2020 17:54:43 +0300 Subject: [PATCH 3/7] Added translations --- .../file-preview-screen.component.html | 23 +++++------ .../project-listing-screen.component.html | 16 ++++---- .../project-listing-screen.component.ts | 4 +- apps/red-ui/src/assets/i18n/en.json | 41 ++++++++++++++++++- apps/red-ui/src/assets/styles/red-button.scss | 2 +- 5 files changed, 61 insertions(+), 25 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 7e147c702..7dfc59cd2 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 @@ -47,8 +47,8 @@
-
- Quick Navigation +
@@ -80,8 +80,8 @@
-
- Annotations +
@@ -106,8 +106,8 @@
-
- Info +
@@ -126,25 +126,22 @@
- Assign Reviewer +
-
- Added on +
{{appStateService.activeFile.added | date:'medium'}}
-
- Added by +
{{user.name}}
-
- Last modified on +
{{appStateService.activeFile.lastUpdated | date:'medium'}} 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 6814cbc43..dbaaa3af2 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 @@ -10,20 +10,20 @@
-
+
- {{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }} + {{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
-
+
@@ -88,7 +88,7 @@
@@ -96,7 +96,7 @@
{{totalPages}}
-
Analyzed pages
+
@@ -104,7 +104,7 @@
240
-
Total people
+
@@ -112,7 +112,7 @@
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index 8883bca28..c44752475 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -20,8 +20,8 @@ export class ProjectListingScreenComponent implements OnInit { public projectsChartData: DoughnutChartConfig [] = []; public documentsChartData: DoughnutChartConfig [] = []; public sortingOptions: SortingOption[] = [ - { label: 'projects.sorting.recent.label', order: 'desc', column: 'projectDate' }, - { label: 'projects.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' } + { label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate' }, + { label: 'project-listing.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' } ]; public sortingOption: SortingOption = this.sortingOptions[0]; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 8ef296db5..cd0ac6e98 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -133,7 +133,7 @@ "label": "Document" } }, - "projects": { + "project-listing": { "table-header": { "title": { "label": "{{length}} active projects" @@ -145,6 +145,22 @@ "label": "Recent" } }, + "stats": { + "analyzed-pages": { + "label": "Analyzed pages" + }, + "total-people": { + "label": "Total people" + }, + "charts": { + "projects": { + "label": "Projects" + }, + "total-documents": { + "label": "Total Documents" + } + } + }, "add-edit-dialog": { "header-new": { "label": "New Project" @@ -326,6 +342,29 @@ "view-toggle": { "label": "Redacted View" }, + "tabs": { + "quick-navigation": { + "label": "Quick Navigation" + }, + "annotations": { + "label": "Annotations" + }, + "info": { + "label": "Info", + "assign-reviewer": { + "label": "Assign reviewer" + }, + "added-on": { + "label": "Added on" + }, + "added-by": { + "label": "Added by" + }, + "last-modified-on": { + "label": "Last modified on" + } + } + }, "download": { "label": "Download", "dropdown": { diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index 901623023..b9749c218 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -1,4 +1,4 @@ -button { +button.mat-flat-button { font-family: Inter, sans-serif !important; font-weight: 400 !important; border-radius: 25px !important; From 8a0281aac38328b9de09f6a72f7251978178d85d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 14 Oct 2020 18:51:12 +0300 Subject: [PATCH 4/7] File preview close tabs --- .../file-preview-screen.component.html | 2 + .../file-preview-screen.component.scss | 7 +++ .../file-preview-screen.component.ts | 57 ++++++++++--------- 3 files changed, 39 insertions(+), 27 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 7dfc59cd2..4f6b4aabb 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 @@ -82,6 +82,7 @@ #annotationsContainer>
+
@@ -108,6 +109,7 @@
+
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 3688a4a0f..2fee29db8 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 @@ -29,7 +29,14 @@ redaction-pdf-viewer { display: flex; border-bottom: 1px solid $separator; align-items: center; + justify-content: space-between; padding: 0 25px; + + mat-icon { + height: 14px; + width: 14px; + cursor: pointer; + } } .tab-content { 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 823330d8a..55cdd6607 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,5 +1,5 @@ -import {ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; +import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { FileUploadControllerService, ManualRedactionControllerService, @@ -7,20 +7,20 @@ import { ProjectControllerService, StatusControllerService } from '@redaction/red-ui-http'; -import {TranslateService} from '@ngx-translate/core'; -import {NotificationService, NotificationType} from '../../../notification/notification.service'; -import {MatDialog} from '@angular/material/dialog'; -import {AppStateService} from '../../../state/app-state.service'; -import {FileDetailsDialogComponent} from './file-details-dialog/file-details-dialog.component'; -import {ViewerSyncService} from '../service/viewer-sync.service'; -import {Annotations} from '@pdftron/webviewer'; -import {PdfViewerComponent} from '../pdf-viewer/pdf-viewer.component'; -import {AnnotationUtils} from '../../../utils/annotation-utils'; -import {ManualRedactionDialogComponent} from "../manual-redaction-dialog/manual-redaction-dialog.component"; -import {UserService} from "../../../user/user.service"; -import {debounce} from "../../../utils/debounce"; -import scrollIntoView from 'scroll-into-view-if-needed' -import {ConfirmationDialogComponent} from "../../../common/confirmation-dialog/confirmation-dialog.component"; +import { TranslateService } from '@ngx-translate/core'; +import { NotificationService, NotificationType } from '../../../notification/notification.service'; +import { MatDialog } from '@angular/material/dialog'; +import { AppStateService } from '../../../state/app-state.service'; +import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component'; +import { ViewerSyncService } from '../service/viewer-sync.service'; +import { Annotations } from '@pdftron/webviewer'; +import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'; +import { AnnotationUtils } from '../../../utils/annotation-utils'; +import { ManualRedactionDialogComponent } from '../manual-redaction-dialog/manual-redaction-dialog.component'; +import { UserService } from '../../../user/user.service'; +import { debounce } from '../../../utils/debounce'; +import scrollIntoView from 'scroll-into-view-if-needed'; +import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog/confirmation-dialog.component'; @Component({ selector: 'redaction-file-preview-screen', @@ -68,7 +68,7 @@ export class FilePreviewScreenComponent implements OnInit { this._activatedRoute.params.subscribe(params => { this.projectId = params.projectId; this.fileId = params.fileId; - this.appStateService.activateFile(this.projectId, this.fileId) + this.appStateService.activateFile(this.projectId, this.fileId); }); } @@ -117,7 +117,10 @@ export class FilePreviewScreenComponent implements OnInit { this._viewerSyncService.activateViewer(value); } - public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') { + public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION', $event?: MouseEvent) { + if ($event) { + $event.stopPropagation(); + } if (value !== this._selectedTab) { this._selectedTab = value; setTimeout(() => { @@ -134,7 +137,7 @@ export class FilePreviewScreenComponent implements OnInit { const pageNumber = annotation.getPageNumber(); let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber); if (!el) { - el = {pageNumber, redactions: 0, hints: 0, ignore: 0} + el = { pageNumber, redactions: 0, hints: 0, ignore: 0 }; this.quickNavigation.push(el); } if (annotation.Id.startsWith('hint:')) { @@ -201,7 +204,7 @@ export class FilePreviewScreenComponent implements OnInit { ref.afterClosed().subscribe(() => { this._manualRedactionEntry = null; - }) + }); } viewerPageChanged(pageNumber: number) { @@ -238,8 +241,8 @@ export class FilePreviewScreenComponent implements OnInit { behavior: 'smooth', scrollMode: 'if-needed', block: 'center', - inline: 'center', - }) + inline: 'center' + }); } } @@ -288,11 +291,11 @@ export class FilePreviewScreenComponent implements OnInit { id: annotation.Id, removeFromDictionary: false }] - }, this.appStateService.activeProjectId, this.appStateService.activeFile.fileId).subscribe(ok=>{ - this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.success.label'), null, NotificationType.SUCCESS); - },(err)=>{ - this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.failed.label',err), null, NotificationType.ERROR); - }); + }, this.appStateService.activeProjectId, this.appStateService.activeFile.fileId).subscribe(ok => { + this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.success.label'), null, NotificationType.SUCCESS); + }, (err) => { + this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.failed.label', err), null, NotificationType.ERROR); + }); } }); } From bfca1865ddeb71ce3ee5eaae96cd480f11884c03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 15 Oct 2020 03:28:54 +0300 Subject: [PATCH 5/7] Quick navigation list items --- .../initials-avatar.component.ts | 2 +- .../file-preview-screen.component.html | 34 ++++++++------- .../file-preview-screen.component.scss | 17 +++++++- .../file-preview-screen.component.ts | 11 ++++- .../project-listing-screen.component.html | 2 +- .../project-overview-screen.component.html | 6 +-- .../src/assets/styles/red-components.scss | 42 +++++++++++++------ 7 files changed, 80 insertions(+), 34 deletions(-) diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts index 253df0d9d..6c65d0a68 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts @@ -10,7 +10,7 @@ export class InitialsAvatarComponent implements OnInit { public username: string; @Input() - public color: 'red-white' | 'gray-red' | 'gray-dark' = 'gray-dark'; + public color = 'lightgray-dark'; @Input() public size: 'small' | 'large' = 'small'; 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 4f6b4aabb..d08fb5864 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,20 +58,26 @@ [ngClass]="{ active: item.pageNumber === activeViewerPage }" (click)="selectPage(item.pageNumber)" > -
Page {{ item.pageNumber }}
-
-
- - {{item.redactions}} Redactions -
-
- - {{item.hints}} Hints -
-
- - {{item.ignore}} Ignore -
+
{{ item.pageNumber }}
+
+
H
+ {{item.hints}} +
+
+
R
+ {{item.redactions}} +
+
+
C
+ {{item.comments}} +
+
+
S
+ {{item.requests}} +
+
+
I
+ {{item.ignore}}
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 2fee29db8..f8b4a11ed 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 @@ -105,6 +105,9 @@ redaction-pdf-viewer { } .page-navigation { + display: flex; + align-items: center; + gap: 12px; cursor: pointer; border-bottom: 1px solid $separator; padding: 14px; @@ -115,7 +118,19 @@ redaction-pdf-viewer { } .page-number { - font-weight: 600; + border: 1px solid $separator; + padding: 7px; + margin-right: 3px; + width: 14px; + text-align: center; + } + + .page-stats { + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + opacity: 1; } &.active { 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 55cdd6607..4b4ac8a55 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 @@ -45,7 +45,14 @@ export class FilePreviewScreenComponent implements OnInit { public fileId: string; public annotations: Annotations.Annotation[] = []; public selectedAnnotation: Annotations.Annotation; - public quickNavigation: { pageNumber: number, redactions: number, hints: number, ignore: number; }[] = []; + public quickNavigation: { + pageNumber: number, + hints: number, + redactions: number, + comments: number; + suggestions: number, + ignore: number; + }[] = []; private _manualRedactionEntry: ManualRedactionEntry; @@ -137,7 +144,7 @@ export class FilePreviewScreenComponent implements OnInit { const pageNumber = annotation.getPageNumber(); let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber); if (!el) { - el = { pageNumber, redactions: 0, hints: 0, ignore: 0 }; + el = { pageNumber, redactions: 0, hints: 0, ignore: 0, comments: 0, suggestions: 0 }; this.quickNavigation.push(el); } if (annotation.Id.startsWith('hint:')) { 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 dbaaa3af2..db5058065 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 @@ -57,7 +57,7 @@
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 fc1465971..e705dc45e 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 @@ -120,7 +120,7 @@
@@ -136,10 +136,10 @@
-
+2
+
+2
-
+
+
+
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 9d836670f..571d0e406 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -1,44 +1,62 @@ @import "red-variables"; -.oval { +.oval, .square { font-weight: 600; display: flex; justify-content: center; align-items: center; height: 24px; width: 24px; - border-radius: 12px; font-size: 10px; - border: 1px solid #E2E4E9; - letter-spacing: 0; line-height: 12px; text-align: center; text-transform: uppercase; - font-family: Inter, sans-serif; + border: none; &.large { height: 32px; width: 32px; - border-radius: 16px; font-size: 13px; } - &.gray-dark { - background-color: $grey-4; - border: none; + &.x-small { + height: 16px; + width: 16px; + font-size: 11px; + line-height: 14px; } - &.gray-red { + &.lightgray-dark { + background-color: $grey-4; + } + + &.lightgray-red { background-color: $grey-4; color: $red-1; - border: none; + } + + &.darkgray-white { + background-color: $grey-1; + color: $white; + } + + &.lightgray-white { + background-color: $grey-5; + color: $white; } &.red-white { background-color: $red-1; color: $white; - border: none; } + + &.white-dark { + border: 1px solid #E2E4E9; + } +} + +.oval { + border-radius: 50%; } .stats-subtitle { From 84c6612ccb996ce3022f7a3a56d97e3b4cfcf887 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 15 Oct 2020 06:02:46 +0300 Subject: [PATCH 6/7] Annotations filter menu --- .../file-preview-screen.component.html | 42 ++++++++++++++++--- .../file-preview-screen.component.scss | 34 +++++++++++++-- .../file-preview-screen.component.ts | 28 ++++++++++++- .../screens/file/service/filters.service.ts | 22 ++++++++++ apps/red-ui/src/app/utils/types.d.ts | 8 ++++ apps/red-ui/src/assets/i18n/en.json | 27 ++++++++++++ apps/red-ui/src/assets/styles/red-button.scss | 12 +++++- .../src/assets/styles/red-checkbox.scss | 12 ++++++ apps/red-ui/src/assets/styles/red-logo.scss | 4 +- apps/red-ui/src/assets/styles/red-menu.scss | 30 +++++++++++++ .../src/assets/styles/red-page-layout.scss | 2 +- apps/red-ui/src/assets/styles/red-select.scss | 4 +- .../src/assets/styles/red-text-styles.scss | 9 +++- apps/red-ui/src/assets/styles/red-theme.scss | 2 + .../src/assets/styles/red-variables.scss | 4 +- 15 files changed, 220 insertions(+), 20 deletions(-) create mode 100644 apps/red-ui/src/app/screens/file/service/filters.service.ts create mode 100644 apps/red-ui/src/assets/styles/red-checkbox.scss create mode 100644 apps/red-ui/src/assets/styles/red-menu.scss 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 d08fb5864..72b1c0788 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 @@ -5,10 +5,9 @@ translate="file-preview.view-toggle.label">
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ {{ filters[key].symbol }} +
+ {{filters[key].label | translate }} + +
+ +
@@ -88,7 +114,10 @@ #annotationsContainer>
- +
@@ -115,7 +144,10 @@
- +
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 f8b4a11ed..2b6f7c5a8 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,21 @@ redaction-pdf-viewer { justify-content: space-between; padding: 0 25px; - mat-icon { + > div { + position: relative; + + .dot { + background: $primary; + height: 10px; + width: 10px; + border-radius: 50%; + position: absolute; + top: 0; + left: 0; + } + } + + .close-icon { height: 14px; width: 14px; cursor: pointer; @@ -91,7 +105,7 @@ redaction-pdf-viewer { } &.active { - border-left: 2px solid $red-1; + border-left: 2px solid $primary; } .annotation-actions { @@ -114,7 +128,7 @@ redaction-pdf-viewer { border-left: 4px solid transparent; &:hover { - background-color: #F4F5F7; + background-color: $grey-2; } .page-number { @@ -134,7 +148,19 @@ redaction-pdf-viewer { } &.active { - border-left: 4px solid $red-1; + border-left: 4px solid $primary; } } } + +.filter-menu-header { + display: flex; + justify-content: space-between; + width: 250px; + padding: 7px 15px 15px; + + .actions { + display: flex; + gap: 8px; + } +} 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 4b4ac8a55..2bc6c905b 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 @@ -21,6 +21,8 @@ import { UserService } from '../../../user/user.service'; import { debounce } from '../../../utils/debounce'; import scrollIntoView from 'scroll-into-view-if-needed'; import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog/confirmation-dialog.component'; +import { AnnotationFilters } from '../../../utils/types'; +import { FiltersService } from '../service/filters.service'; @Component({ selector: 'redaction-file-preview-screen', @@ -54,6 +56,12 @@ export class FilePreviewScreenComponent implements OnInit { ignore: number; }[] = []; + public filters: AnnotationFilters; + + public get filterKeys() { + return Object.keys(this.filters); + } + private _manualRedactionEntry: ManualRedactionEntry; activeViewerPage: number; @@ -71,12 +79,14 @@ export class FilePreviewScreenComponent implements OnInit { private readonly _manualRedactionControllerService: ManualRedactionControllerService, private readonly _userService: UserService, private readonly _fileUploadControllerService: FileUploadControllerService, - private readonly _projectControllerService: ProjectControllerService) { + private readonly _projectControllerService: ProjectControllerService, + private readonly _filtersService: FiltersService) { this._activatedRoute.params.subscribe(params => { this.projectId = params.projectId; this.fileId = params.fileId; this.appStateService.activateFile(this.projectId, this.fileId); }); + this.filters = _filtersService.filters; } get user() { @@ -310,4 +320,20 @@ export class FilePreviewScreenComponent implements OnInit { public downloadFile(type: 'original' | 'annotated' | 'redacted') { console.log(`Downloading ${type}...`); } + + public setAllFilters(value: boolean) { + Object.keys(this.filters).map((key) => { + this.filters[key].value = value; + }); + } + + public get hasActiveFilters(): boolean { + let activeFilters = false; + Object.keys(this.filters).map((key) => { + if (this.filters[key].value) { + activeFilters = true; + } + }); + return activeFilters; + } } diff --git a/apps/red-ui/src/app/screens/file/service/filters.service.ts b/apps/red-ui/src/app/screens/file/service/filters.service.ts new file mode 100644 index 000000000..0d1bb937a --- /dev/null +++ b/apps/red-ui/src/app/screens/file/service/filters.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import { AnnotationFilters } from '../../../utils/types'; + +@Injectable({ + providedIn: 'root' +}) +export class FiltersService { + constructor() { + } + + private _filters: AnnotationFilters = { + hint: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' }, + redaction: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' }, + comment: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' }, + suggestion: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' }, + ignored: { label: 'file-preview.filter-menu.ignored.label', value: false, class: 'oval lightgray-white', symbol: 'I' }, + } + + public get filters(): AnnotationFilters { + return JSON.parse(JSON.stringify(this._filters)); + } +} diff --git a/apps/red-ui/src/app/utils/types.d.ts b/apps/red-ui/src/app/utils/types.d.ts index ec17ca4ad..d68b9a903 100644 --- a/apps/red-ui/src/app/utils/types.d.ts +++ b/apps/red-ui/src/app/utils/types.d.ts @@ -15,3 +15,11 @@ export class SortingOption { column: string; } +export class AnnotationFilters { + [key: string]: { + label: string, + value: boolean, + class: string, + symbol: string + } +} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index cd0ac6e98..52aeb5636 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -342,6 +342,33 @@ "view-toggle": { "label": "Redacted View" }, + "filter-menu": { + "label": "Filter", + "all": { + "label": "All" + }, + "none": { + "label": "None" + }, + "filter-types": { + "label": "Filter types" + }, + "hint": { + "label": "Hint annotation" + }, + "redaction": { + "label": "Redaction" + }, + "comment": { + "label": "Comment" + }, + "suggestion": { + "label": "Suggested redaction" + }, + "ignored": { + "label": "Ignored redaction" + } + }, "tabs": { "quick-navigation": { "label": "Quick Navigation" diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index b9749c218..87f4277b4 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -1,5 +1,15 @@ -button.mat-flat-button { +@import "red-variables"; + +.mat-button, .mat-flat-button { font-family: Inter, sans-serif !important; font-weight: 400 !important; border-radius: 25px !important; + + .dropdown-icon { + width: 16px; + } +} + +.mat-button[aria-expanded="true"], .mat-button.overlay { + background: rgba($primary, 0.1); } diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss new file mode 100644 index 000000000..919495916 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-checkbox.scss @@ -0,0 +1,12 @@ +@import "red-variables"; + +.mat-checkbox .mat-checkbox-frame { + border: 1px solid $grey-5; +} + +.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background { + margin-top: 1px; + margin-left: 1px; + width: 18px; + height: 18px; +} diff --git a/apps/red-ui/src/assets/styles/red-logo.scss b/apps/red-ui/src/assets/styles/red-logo.scss index bb61aa598..9629df19d 100644 --- a/apps/red-ui/src/assets/styles/red-logo.scss +++ b/apps/red-ui/src/assets/styles/red-logo.scss @@ -12,13 +12,13 @@ height: 6px; width: 16px; border-radius: 3px; - background-color: $red-1; + background-color: $primary; } .line-2 { height: 6px; width: 22px; border-radius: 6px; - background-color: $red-1; + background-color: $primary; } } diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss new file mode 100644 index 000000000..755380deb --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -0,0 +1,30 @@ +@import "red-variables"; + +.mat-menu-panel { + border-radius: 8px !important; + box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); + + .mat-menu-item { + font-family: 'Inter', sans-serif; + font-size: 13px; + color: $accent; + + .mat-checkbox-layout { + width: 100%; + + .mat-checkbox-inner-container { + margin-left: 0; + } + + .mat-checkbox-label { + font-family: 'Inter', sans-serif; + font-size: 13px; + color: $accent; + + display: flex; + align-items: center; + gap: 4px; + } + } + } +} 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 f7dc22bf8..4e92e58e2 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -167,7 +167,7 @@ html, body { } &:last-child { - color: $red-1; + color: $primary; } } diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss index af5f5049f..5a97fd6e4 100644 --- a/apps/red-ui/src/assets/styles/red-select.scss +++ b/apps/red-ui/src/assets/styles/red-select.scss @@ -42,11 +42,11 @@ line-height: 14px; &.mat-selected.mat-active { - color: $red-1; + color: $primary; } &:hover { - background: #F4F5F7 !important; + background: $grey-2 !important; } } } 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 b078a6445..9922075cf 100644 --- a/apps/red-ui/src/assets/styles/red-text-styles.scss +++ b/apps/red-ui/src/assets/styles/red-text-styles.scss @@ -2,10 +2,10 @@ @import "red-mixins"; a { - color: $red-1; + color: $primary; &:hover { - color: lighten($red-1, 10%) + color: lighten($primary, 10%) } cursor: pointer; @@ -51,3 +51,8 @@ a { .clamp-2 { @include line-clamp(2); } + +.primary { + color: $primary; + opacity: 1; +} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 46606ca48..61e61229d 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -9,7 +9,9 @@ @import "red-input"; @import "red-button"; @import "red-select"; +@import "red-checkbox"; @import "red-toggle"; +@import "red-menu"; @import "red-media-queries"; @import "red-tables"; @import "red-components"; diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index 46645f5e2..55ef43b4e 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -7,7 +7,7 @@ $light: #FFF; $dark: #000; $grey-1: #283241; -$grey-2: #ECECEE; +$grey-2: #F4F5F7; $grey-3: #AAACB3; $grey-4: #E2E4E9; $grey-5: #D3D5DA; @@ -16,7 +16,7 @@ $blue-1: #4875F7; $blue-2: #48C9F7; $blue-3: #5B97DB; $blue-4: #374C81; -$red-1: #F65757; +$red-1: #DD4D50; $yellow-1: #FFB83B; $green-1: #46CE7D; $green-2: #5CE594; From f97f9bac62d797f15471d917294eb71f9fa44163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 15 Oct 2020 07:02:07 +0300 Subject: [PATCH 7/7] Filter annotations logic --- .../file-preview-screen.component.html | 25 +++---------- .../file-preview-screen.component.ts | 36 +++++++++++++------ .../screens/file/service/filters.service.ts | 8 ++--- apps/red-ui/src/assets/styles/red-button.scss | 5 +++ 4 files changed, 40 insertions(+), 34 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 72b1c0788..53a51feca 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 @@ -81,29 +81,14 @@
{{ item.pageNumber }}
-
-
H
- {{item.hints}} -
-
-
R
- {{item.redactions}} -
-
-
C
- {{item.comments}} -
-
-
S
- {{item.requests}} -
-
-
I
- {{item.ignore}} +
+
{{ filters[key].symbol }}
+ {{item[key]}}
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 2bc6c905b..6aeb277a1 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 @@ -24,6 +24,15 @@ import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog import { AnnotationFilters } from '../../../utils/types'; import { FiltersService } from '../service/filters.service'; +class QuickNavigationItem { + pageNumber: number; + hints: number; + redactions: number; + comments: number; + suggestions: number; + ignored: number; +} + @Component({ selector: 'redaction-file-preview-screen', templateUrl: './file-preview-screen.component.html', @@ -47,14 +56,7 @@ export class FilePreviewScreenComponent implements OnInit { public fileId: string; public annotations: Annotations.Annotation[] = []; public selectedAnnotation: Annotations.Annotation; - public quickNavigation: { - pageNumber: number, - hints: number, - redactions: number, - comments: number; - suggestions: number, - ignore: number; - }[] = []; + public quickNavigation: QuickNavigationItem[] = []; public filters: AnnotationFilters; @@ -154,14 +156,14 @@ export class FilePreviewScreenComponent implements OnInit { const pageNumber = annotation.getPageNumber(); let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber); if (!el) { - el = { pageNumber, redactions: 0, hints: 0, ignore: 0, comments: 0, suggestions: 0 }; + el = { pageNumber, redactions: 0, hints: 0, ignored: 0, comments: 0, suggestions: 0 }; this.quickNavigation.push(el); } if (annotation.Id.startsWith('hint:')) { el.hints++; } if (annotation.Id.startsWith('ignore:')) { - el.ignore++; + el.ignored++; } if (annotation.Id.startsWith('redaction:')) { el.redactions++; @@ -171,6 +173,16 @@ export class FilePreviewScreenComponent implements OnInit { this.annotations = AnnotationUtils.sortAnnotations(this.annotations); } + public showQuickNavigationItem(item: QuickNavigationItem): boolean { + let showItem = false; + Object.keys(this.filters).map((key) => { + if (this.showAnnotations(item, key)) { + showItem = true; + } + }) + return showItem; + } + public handleAnnotationSelected(annotation: Annotations.Annotation) { this.selectedAnnotation = annotation; this.selectTab('ANNOTATIONS'); @@ -336,4 +348,8 @@ export class FilePreviewScreenComponent implements OnInit { }); return activeFilters; } + + public showAnnotations(item: QuickNavigationItem, type: string): boolean { + return item[type] && (!this.hasActiveFilters || (this.hasActiveFilters && this.filters[type]?.value)); + } } diff --git a/apps/red-ui/src/app/screens/file/service/filters.service.ts b/apps/red-ui/src/app/screens/file/service/filters.service.ts index 0d1bb937a..cc5a7bf90 100644 --- a/apps/red-ui/src/app/screens/file/service/filters.service.ts +++ b/apps/red-ui/src/app/screens/file/service/filters.service.ts @@ -9,10 +9,10 @@ export class FiltersService { } private _filters: AnnotationFilters = { - hint: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' }, - redaction: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' }, - comment: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' }, - suggestion: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' }, + hints: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' }, + redactions: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' }, + comments: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' }, + suggestions: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' }, ignored: { label: 'file-preview.filter-menu.ignored.label', value: false, class: 'oval lightgray-white', symbol: 'I' }, } diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index 87f4277b4..013149c7d 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -5,6 +5,11 @@ font-weight: 400 !important; border-radius: 25px !important; + .mat-button-wrapper { + display: flex; + align-items: center; + } + .dropdown-icon { width: 16px; }