Merge branch 'VM/RED-10575' into 'master'

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

Closes RED-10575

See merge request redactmanager/red-ui!740
This commit is contained in:
Dan Percic 2024-12-04 10:39:54 +01:00
commit 4aa03ba3c5
3 changed files with 36 additions and 24 deletions

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) {
<div class="ocr-indicator">
@if (file.isOcrProcessing) {
<redaction-ocr-progress-bar <redaction-ocr-progress-bar
[numberOfOCRedPages]="file.numberOfOCRedPages" [numberOfOCRedPages]="file.numberOfOCRedPages"
[numberOfPagesToOCR]="file.numberOfPagesToOCR" [numberOfPagesToOCR]="file.numberOfPagesToOCR"
[showLabel]="true" [showLabel]="true"
></redaction-ocr-progress-bar> ></redaction-ocr-progress-bar>
</ng-container> } @else {
<ng-template #defaultProcessing>
<span [translate]="'processing.basic'" class="read-only-text"></span> <span [translate]="'processing.basic'" class="read-only-text"></span>
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar> <mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar>
</ng-template> }
</div> </div>
}
<div class="flex-center"> <div class="flex-center">
<ng-container *ngIf="!customTranslation"> @if (!customTranslation) {
<mat-icon class="primary-white" svgIcon="red:read-only"></mat-icon> <mat-icon
[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> <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> }
@if (customTranslation) {
<span [translate]="customTranslation" class="read-only-text"></span>
}
</div> </div>
</div> </div>
}

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

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);