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

RED-3691 & some css improvements

Browse Source
This commit is contained in:
Adina Țeudan 2022-03-29 22:43:02 +03:00
parent ce1838354c
commit 9a717846b9
10 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
View File

@ -16,10 +16,8 @@
min-height: 100%;
}
&.active {
&:not(.lower-height) .active-bar-marker {
background-color: variables.$primary;
}
&.active .active-bar-marker {
background-color: variables.$primary;
}
.annotation {

16
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
View File

@ -34,8 +34,8 @@
<div class="right-content">
<div *ngIf="state.isReadonly$ | async" class="justify-center banner read-only d-flex">
<div *ngIf="file.isFullProcessing" class="ocr-indicator">
<span *ngIf="file.isOcrProcessing" class="read-only-text" [translate]="'processing.ocr'"></span>
<span *ngIf="!file.isOcrProcessing" class="read-only-text" [translate]="'processing.basic'"></span>
<span *ngIf="file.isOcrProcessing" [translate]="'processing.ocr'" class="read-only-text"></span>
<span *ngIf="!file.isOcrProcessing" [translate]="'processing.basic'" class="read-only-text"></span>
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar>
</div>
@ -73,7 +73,7 @@
></iqser-circle-button>
</div>
<div [class.lower-height]="(multiSelectService.active$ | async) || (state.isReadonly$ | async)" class="annotations-wrapper">
<div class="annotations-wrapper">
<div
#quickNavigation
(keydown)="preventKeyDefault($event)"
@ -115,7 +115,7 @@
</div>
</div>
<div style="overflow: hidden; width: 100%">
<div class="content">
<div
*ngIf="(isHighlights$ | async) === false"
[attr.anotation-page-header]="activeViewerPage"
@ -182,8 +182,12 @@
>.
</ng-container>
<ng-container *ngIf="displayedPages.length === 0">
{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
<ng-container *ngIf="(fileDataService.numberOfVisibleAnnotations$ | async) === 0">
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
</ng-container>
<ng-container *ngIf="(fileDataService.numberOfVisibleAnnotations$ | async) > 0 && displayedPages.length === 0"
>{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
<a (click)="filterService.reset()" class="with-underline" translate="file-preview.tabs.annotations.reset"></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
</ng-container>

13
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
View File

@ -1,6 +1,10 @@
@use 'variables';
@use 'common-mixins';
:host {
display: contents;
}
.banner {
padding: 13px 16px;
color: variables.$white;
@ -61,8 +65,11 @@
display: flex;
height: 100%;
&.lower-height {
height: calc(100% - 40px);
.content {
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
}
}
@ -120,8 +127,8 @@
.annotations {
overflow: hidden;
width: 100%;
height: calc(100% - 32px);
display: flex;
flex: 1;
align-items: center;
flex-direction: column;

10
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
View File

@ -77,7 +77,7 @@ export class FileWorkloadComponent {
readonly documentInfoService: DocumentInfoService,
readonly excludedPagesService: ExcludedPagesService,
readonly fileDataService: FileDataService,
private readonly _viewModeService: ViewModeService,
readonly viewModeService: ViewModeService,
private readonly _pdf: PdfViewer,
private readonly _changeDetectorRef: ChangeDetectorRef,
private readonly _annotationProcessingService: AnnotationProcessingService,
@ -115,7 +115,7 @@ export class FileWorkloadComponent {
}
private get _isHighlights$(): Observable<boolean> {
return this._viewModeService.viewMode$.pipe(map(() => this._viewModeService.isTextHighlights));
return this.viewModeService.viewMode$.pipe(map(() => this.viewModeService.isTextHighlights));
}
private get _multiSelectInactive$() {
@ -346,7 +346,7 @@ export class FileWorkloadComponent {
secondary: INestedFilter[] = [],
): Map<number, AnnotationWrapper[]> {
if (!primary || primary.length === 0) {
this.displayedPages = this.#allPages;
this.displayedPages = this.viewModeService.onlyPagesWithAnnotations ? [] : this.#allPages;
return;
}
@ -354,13 +354,13 @@ export class FileWorkloadComponent {
const pagesThatDisplayAnnotations = [...this.displayedAnnotations.keys()];
const enabledFilters = this.filterService.enabledFlatFilters;
if (enabledFilters.some(f => f.id === 'pages-without-annotations')) {
if (enabledFilters.length === 1) {
if (enabledFilters.length === 1 && !this.viewModeService.onlyPagesWithAnnotations) {
this.displayedPages = this.#allPages.filter(page => !pagesThatDisplayAnnotations.includes(page));
} else {
this.displayedPages = [];
}
this.displayedAnnotations.clear();
} else if (enabledFilters.length) {
} else if (enabledFilters.length || this.viewModeService.onlyPagesWithAnnotations) {
this.displayedPages = pagesThatDisplayAnnotations;
} else {
this.displayedPages = this.#allPages;

6
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
View File

@ -23,9 +23,11 @@
width: 350px;
min-width: 350px;
position: relative;
display: flex;
flex-direction: column;
::ng-deep .right-title {
height: 70px;
min-height: 70px;
display: flex;
border-bottom: 1px solid variables.$separator;
align-items: center;
@ -43,9 +45,9 @@
}
::ng-deep .right-content {
height: calc(100% - 72px);
box-sizing: border-box;
display: flex;
flex: 1;
}
}

2
apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
View File

@ -41,6 +41,7 @@ export class FileDataService {
readonly hasChangeLog$ = new BehaviorSubject<boolean>(false);
readonly annotations$: Observable<Record<string, AnnotationWrapper>>;
readonly visibleAnnotations$: Observable<AnnotationWrapper[]>;
readonly numberOfVisibleAnnotations$: Observable<number>;
readonly hiddenAnnotations = new Set<string>();
readonly #redactionLog$ = new Subject<IRedactionLog>();
@ -70,6 +71,7 @@ export class FileDataService {
),
shareDistinctLast(),
);
this.numberOfVisibleAnnotations$ = this.visibleAnnotations$.pipe(map(annotations => annotations.length));
}
get visibleAnnotations() {

6
apps/red-ui/src/app/modules/file-preview/services/view-mode.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { ViewMode } from '@red/domain';
import { ViewMode, ViewModes } from '@red/domain';
import { map } from 'rxjs/operators';
import { shareDistinctLast } from '@iqser/common-ui';
@ -23,6 +23,10 @@ export class ViewModeService {
this.isDelta$ = this._is('DELTA');
}
get onlyPagesWithAnnotations(): boolean {
return ([ViewModes.DELTA, ViewModes.TEXT_HIGHLIGHTS] as ViewMode[]).includes(this.viewMode);
}
get viewMode() {
return this._viewMode$.value;
}

2
apps/red-ui/src/assets/i18n/de.json
View File

@ -1268,6 +1268,7 @@
"jump-to-next": "Springe zu Nächster",
"jump-to-previous": "Springe zu Vorheriger",
"label": "Arbeitsvorrat",
"no-annotations": "",
"page-is": "Diese Seite ist",
"reset": "",
"select": "Auswählen",
@ -1406,7 +1407,6 @@
"title": "SMTP-Konto konfigurieren"
},
"help-mode": {
"button-text": "Hilfe-Modus (H)",
"clicking-anywhere-on": "<b>Klicken Sie auf eine beliebige Stelle des Bildschirms </b> um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, <b>verändert sich der Mauszeiger</b>, um Ihnen zu zeigen, ob ein Element interaktiv ist.",
"instructions": "Hilfe-Modus-Anleitungen öffnen",
"text": "Hilfe-Modus",

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

@ -1268,6 +1268,7 @@
"jump-to-next": "Jump to Next",
"jump-to-previous": "Jump to Previous",
"label": "Workload",
"no-annotations": "There are no available annotations.",
"page-is": "This page is",
"reset": "reset",
"select": "Select",
@ -1406,7 +1407,6 @@
"title": "Configure SMTP Account"
},
"help-mode": {
"button-text": "Help Mode (H)",
"clicking-anywhere-on": "<b> Clicking anywhere on the screen </b> will show you which areas are interactive. Hovering an interactive area will <b> change the mouse cursor </b> to let you know if the element is interactive.",
"instructions": "Open Help Mode Instructions",
"text": "Help Mode",

2
libs/common-ui

@ -1 +1 @@
Subproject commit 320c3d3f4a68cef5a7387ed93af7fcc28e6a9dde
Subproject commit 750aedd48a4a7af04b2026a51843420237ff94e5