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

RED-10575 - hid the "read only" text when file is in processing state

Browse Source
This commit is contained in:
Valentin Mihai 2024-12-03 23:26:33 +02:00
parent 003817ed9d
commit 49c59897bf
3 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
View File

@ -1,24 +1,35 @@
<div *ngIf="_state.file() as file" class="justify-center banner read-only flex"> @if (_state.file(); as file) {
<div *ngIf="file.isFullProcessing" class="ocr-indicator"> <div class="justify-center banner read-only flex">
<ng-container *ngIf="file.isOcrProcessing; else defaultProcessing"> @if (file.isFullProcessing) {
<redaction-ocr-progress-bar <div class="ocr-indicator">
[numberOfOCRedPages]="file.numberOfOCRedPages" @if (file.isOcrProcessing) {
[numberOfPagesToOCR]="file.numberOfPagesToOCR" <redaction-ocr-progress-bar
[showLabel]="true" [numberOfOCRedPages]="file.numberOfOCRedPages"
></redaction-ocr-progress-bar> [numberOfPagesToOCR]="file.numberOfPagesToOCR"
</ng-container> [showLabel]="true"
></redaction-ocr-progress-bar>
} @else {
<span [translate]="'processing.basic'" class="read-only-text"></span>
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar>
}
</div>
}
<ng-template #defaultProcessing> <div class="flex-center">
<span [translate]="'processing.basic'" class="read-only-text"></span> @if (!customTranslation) {
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar> <mat-icon
</ng-template> [matTooltip]="file.isFullProcessing ? ('readonly' | translate) : null"
[matTooltipPosition]="'above'"
class="primary-white"
svgIcon="red:read-only"
></mat-icon>
@if (!file.isFullProcessing) {
<span [translate]="_state.dossier().isActive ? 'readonly' : 'readonly-archived'" class="read-only-text"></span>
}
}
@if (customTranslation) {
<span [translate]="customTranslation" class="read-only-text"></span>
}
</div>
</div> </div>
}
<div class="flex-center">
<ng-container *ngIf="!customTranslation">
<mat-icon class="primary-white" svgIcon="red:read-only"></mat-icon>
<span [translate]="_state.dossier().isActive ? 'readonly' : 'readonly-archived'" class="read-only-text"></span>
</ng-container>
<span *ngIf="customTranslation" [translate]="customTranslation" class="read-only-text"></span>
</div>
</div>

2
apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.scss
View File

@ -22,7 +22,7 @@
.ocr-indicator { .ocr-indicator {
display: flex; display: flex;
flex: 1; margin-right: 5px;
align-items: center; align-items: center;
} }

3
apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
View File

@ -5,13 +5,14 @@ import { NgIf } from '@angular/common';
import { MatProgressBar } from '@angular/material/progress-bar'; import { MatProgressBar } from '@angular/material/progress-bar';
import { MatIcon } from '@angular/material/icon'; import { MatIcon } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { MatTooltip } from '@angular/material/tooltip';
@Component({ @Component({
selector: 'redaction-readonly-banner', selector: 'redaction-readonly-banner',
templateUrl: './readonly-banner.component.html', templateUrl: './readonly-banner.component.html',
styleUrls: ['./readonly-banner.component.scss'], styleUrls: ['./readonly-banner.component.scss'],
standalone: true, standalone: true,
imports: [OcrProgressBarComponent, NgIf, MatProgressBar, MatIcon, TranslateModule], imports: [OcrProgressBarComponent, NgIf, MatProgressBar, MatIcon, TranslateModule, MatTooltip],
}) })
export class ReadonlyBannerComponent { export class ReadonlyBannerComponent {
protected readonly _state = inject(FilePreviewStateService); protected readonly _state = inject(FilePreviewStateService);