diff --git a/apps/red-ui/src/app/common/filter/filter.component.scss b/apps/red-ui/src/app/common/filter/filter.component.scss index cd0f453c6..16ca6d85e 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.scss +++ b/apps/red-ui/src/app/common/filter/filter.component.scss @@ -25,3 +25,11 @@ gap: 8px; } } + +.mat-checkbox { + width: 100%; + + label { + width: 100%; + } +} diff --git a/apps/red-ui/src/app/common/filter/filter.component.ts b/apps/red-ui/src/app/common/filter/filter.component.ts index 0ecb46e50..b6a35f169 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.ts +++ b/apps/red-ui/src/app/common/filter/filter.component.ts @@ -1,4 +1,5 @@ import { + ChangeDetectorRef, Component, EventEmitter, Input, @@ -24,7 +25,10 @@ export class FilterComponent implements OnChanges { @Input() hasArrow = true; @Input() icon: string; - constructor(public readonly appStateService: AppStateService) {} + constructor( + public readonly appStateService: AppStateService, + private readonly _changeDetectorRef: ChangeDetectorRef + ) {} ngOnChanges(changes: SimpleChanges): void { if (changes.filters) { @@ -59,6 +63,7 @@ export class FilterComponent implements OnChanges { filter.indeterminate = false; filter.filters?.forEach((f) => (f.checked = filter.checked)); } + this._changeDetectorRef.detectChanges(); } activateAllFilters() { 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 057772813..c50069ead 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 @@ -62,10 +62,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 a64f2eff7..121ce45ca 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 @@ -139,22 +139,19 @@ redaction-pdf-viewer { } } } +} - .page-number { - border: 1px solid $separator; - padding: 5px 10px; - display: flex; - justify-content: center; - align-items: center; - height: 28px; - min-height: 28px; - min-width: 14px; - opacity: 0.7; - font-size: 11px; - line-height: 14px; +::ng-deep .download-btn { + line-height: 16px !important; + width: 34px; + height: 34px; - &.active { - border: 1px solid $primary; - } + .mat-button-wrapper { + line-height: 16px !important; + } + + .mat-icon { + height: 16px !important; + width: 16px !important; } } 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 8906c93aa..06d18c4c8 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 @@ -123,9 +123,7 @@ export class FilePreviewScreenComponent implements OnInit { .subscribe((viewedPages) => { this.viewedPages = viewedPages; }); - this._loadFileData().subscribe(() => { - this._displayNewRuleToast(); - }); + this._loadFileData().subscribe(() => {}); this.appStateService.fileStatusChanged.subscribe((fileStatus: FileStatus) => { if (fileStatus.fileId === this.fileId) { this._loadFileData().subscribe(() => { @@ -344,9 +342,19 @@ export class FilePreviewScreenComponent implements OnInit { return; } + if ($event.key === 'ArrowLeft') { + this.pagesPanelActive = true; + } + if ($event.key === 'ArrowRight') { + this.pagesPanelActive = false; + // if we activated annotationsPanel - select first annotation from this page in case there is no + // selected annotation on this page + if (!this.pagesPanelActive) { + this._selectFirstAnnotationOnCurrentPageIfNecessary(); + } + } + if ($event.key === 'ArrowLeft' || $event.key === 'ArrowRight') { - this.pagesPanelActive = !this.pagesPanelActive; - this._changeDetectorRef.detectChanges(); return; } @@ -355,6 +363,17 @@ export class FilePreviewScreenComponent implements OnInit { } else { this._navigatePages($event); } + this._changeDetectorRef.detectChanges(); + } + + private _selectFirstAnnotationOnCurrentPageIfNecessary() { + if ( + (!this.selectedAnnotation || + this.activeViewerPage !== this.selectedAnnotation.pageNumber) && + this.displayedPages.indexOf(this.activeViewerPage) >= 0 + ) { + this.selectAnnotation(this.displayedAnnotations[this.activeViewerPage].annotations[0]); + } } private _navigateAnnotations($event: KeyboardEvent) { @@ -475,6 +494,7 @@ export class FilePreviewScreenComponent implements OnInit { viewerReady($event: WebViewerInstance) { this.instance = $event; this.viewReady = true; + this._displayNewRuleToast(); this._cleanupAndRedrawManualAnnotations(); } diff --git a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html index 47d7bb481..d0955c95d 100644 --- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html +++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html @@ -4,6 +4,7 @@ [class.active]="active" [id]="'quick-nav-page-' + number" (click)="pageSelected.emit(number)" + (dblclick)="toggleReadState()" >
diff --git a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts index 6f068d39b..668d41a49 100644 --- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts +++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts @@ -1,6 +1,14 @@ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { + Component, + EventEmitter, + HostListener, + Input, + OnChanges, + Output, + SimpleChanges +} from '@angular/core'; import { ViewedPages, ViewedPagesControllerService } from '@redaction/red-ui-http'; -import { AppState, AppStateService } from '../../../state/app-state.service'; +import { AppStateService } from '../../../state/app-state.service'; @Component({ selector: 'redaction-page-indicator', @@ -37,22 +45,57 @@ export class PageIndicatorComponent implements OnChanges { } if (this.active && !this.read) { this.pageReadTimeout = setTimeout(() => { - this._markPageRead(); - }, 10 * 1000); + if (this.active && !this.read) { + this._markPageRead(); + } + }, 3 * 1000); // 3 seconds } } private _markPageRead() { - if (this.active && !this.read) { - this._viewedPagesControllerService - .addPage( - { page: this.number }, - this._appStateService.activeProjectId, - this._appStateService.activeFileId - ) - .subscribe(() => { - this.viewedPages?.pages?.push(this.number); - }); + this._viewedPagesControllerService + .addPage( + { page: this.number }, + this._appStateService.activeProjectId, + this._appStateService.activeFileId + ) + .subscribe(() => { + this.viewedPages?.pages?.push(this.number); + }); + } + + private _markPageUnread() { + this._viewedPagesControllerService + .removePage( + { page: this.number }, + this._appStateService.activeProjectId, + this._appStateService.activeFileId + ) + .subscribe(() => { + this.viewedPages?.pages?.splice(this.viewedPages?.pages?.indexOf(this.number), 1); + }); + } + + @HostListener('window:keydown', ['$event']) + handleKeyDown(event: KeyboardEvent) { + if (this.active && event.key === 'Enter') { + if ( + document.activeElement && + document.activeElement.className.indexOf('activePanel') >= 0 + ) { + this.toggleReadState(); + event.stopPropagation(); + event.preventDefault(); + return false; + } + } + } + + toggleReadState() { + if (this.read) { + this._markPageUnread(); + } else { + this._markPageRead(); } } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 4042fd9f7..9ceb48c7b 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -167,7 +167,7 @@ "approve": "Approve", "no-files": "This Project contains no files yet. You can start your work by uploading some files!", "new-rule": { - "label": "New Rule", + "label": "Outdated", "toast": { "message-project": "Some documents were not processed with the latest rule/dictionary set. They are marked with:\n\n", "message-file": "This documents was not processed with the latest rule/dictionary set.\n\n", @@ -243,7 +243,7 @@ "tabs": { "quick-navigation": "Quick Navigation", "annotations": { - "label": "Annotations", + "label": "Workload", "accept-suggestion": { "add-to-dict": "Approve and add to dictionary", "only-here": "Approve only here" diff --git a/apps/red-ui/src/assets/icons/general/close.svg b/apps/red-ui/src/assets/icons/general/close.svg old mode 100755 new mode 100644 index 25e88df0d..a6017e535 --- a/apps/red-ui/src/assets/icons/general/close.svg +++ b/apps/red-ui/src/assets/icons/general/close.svg @@ -1,14 +1,9 @@ - - - - - - + + close + + -