Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

fixes

Browse Source
This commit is contained in:
Timo Bejan 2020-11-04 22:28:46 +02:00
parent ebc56886ce
commit e86c36f3b6
9 changed files with 119 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/red-ui/src/app/common/filter/filter.component.scss
View File

@ -25,3 +25,11 @@
gap: 8px;
}
}
.mat-checkbox {
width: 100%;
label {
width: 100%;
}
}

7
apps/red-ui/src/app/common/filter/filter.component.ts
View File

@ -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() {

4
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -62,10 +62,10 @@
</div>
<button
*ngIf="appStateService.isActiveProjectOwnerAndManager && fileReadyForDownload"
(click)="downloadFile('REDACTED')"
color="primary"
mat-flat-button
class="download-btn"
mat-mini-fab
>
<mat-icon svgIcon="red:download"></mat-icon>
</button>

27
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -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;
}
}

30
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -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();
}

1
apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html
View File

@ -4,6 +4,7 @@
[class.active]="active"
[id]="'quick-nav-page-' + number"
(click)="pageSelected.emit(number)"
(dblclick)="toggleReadState()"
>
<mat-icon svgIcon="red:page"> </mat-icon>
<div class="text">

71
apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts
View File

@ -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();
}
}
}

4
apps/red-ui/src/assets/i18n/en.json
View File

@ -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"

17
apps/red-ui/src/assets/icons/general/close.svg Executable file → Normal file
View File

@ -1,14 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
>
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<g fill="none" fill-rule="evenodd" id="Artboard" stroke="none" stroke-width="1"
transform="translate(-125.000000, -2943.000000)">
<g fill="currentColor" fill-rule="nonzero" id="Group-3" transform="translate(125.000000, 2941.000000)">
<path
d="M0.214065204,20.7905764 L8.99613075,12.0085125 L0.214414005,3.20847714 C-0.0687971994,2.92529436 -0.0687971994,2.49561043 0.214403514,2.21240971 C0.497586287,1.92919851 0.927270223,1.92919851 1.21047618,2.21240447 L9.99219817,10.9941265 L18.7922336,2.21240971 C19.0754163,1.92919851 19.5051003,1.92919851 19.788301,2.21239922 C20.0715122,2.495582 20.0715122,2.92526593 19.7883062,3.20847189 L11.0065843,11.9901939 L19.788301,20.7902293 C20.0715122,21.0734121 20.0715122,21.503096 19.7883062,21.786302 C19.6615861,21.9130221 19.4563549,22 19.2902593,22 C19.1241636,22 18.9189324,21.9130221 18.7922123,21.786302 L10.0104903,13.00458 L1.21044964,21.786302 C1.08372954,21.9130221 0.878498298,22 0.712402662,22 C0.54632641,22 0.341278436,21.9130692 0.214305668,21.7862005 C-0.0714409748,21.5029802 -0.0713493013,21.0732218 0.214065204,20.7905764 Z"
id="close_icon"></path>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>close</title>
<g id="close" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
<path
d="M93,0 L100,7 L57,50 L100,93 L93,100 L50,57 L7,100 L3.55271368e-15,93 L43,50 L3.55271368e-15,7 L7,0 L50,43 L93,0 Z"
id="Combined-Shape" fill-rule="nonzero"></path>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 480 B