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

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

Browse Source 
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
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">
<div *ngIf="file.isFullProcessing" class="ocr-indicator">
<ng-container *ngIf="file.isOcrProcessing; else defaultProcessing">
<redaction-ocr-progress-bar
[numberOfOCRedPages]="file.numberOfOCRedPages"
[numberOfPagesToOCR]="file.numberOfPagesToOCR"
[showLabel]="true"
></redaction-ocr-progress-bar>
</ng-container>
@if (_state.file(); as file) {
<div class="justify-center banner read-only flex">
@if (file.isFullProcessing) {
<div class="ocr-indicator">
@if (file.isOcrProcessing) {
<redaction-ocr-progress-bar
[numberOfOCRedPages]="file.numberOfOCRedPages"
[numberOfPagesToOCR]="file.numberOfPagesToOCR"
[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>
<span [translate]="'processing.basic'" class="read-only-text"></span>
<mat-progress-bar class="white ml-8 w-100" mode="indeterminate"></mat-progress-bar>
</ng-template>
<div class="flex-center">
@if (!customTranslation) {
<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>
}
}
@if (customTranslation) {
<span [translate]="customTranslation" class="read-only-text"></span>
}
</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 {
display: flex;
flex: 1;
margin-right: 5px;
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 { MatIcon } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { MatTooltip } from '@angular/material/tooltip';
@Component({
selector: 'redaction-readonly-banner',
templateUrl: './readonly-banner.component.html',
styleUrls: ['./readonly-banner.component.scss'],
standalone: true,
imports: [OcrProgressBarComponent, NgIf, MatProgressBar, MatIcon, TranslateModule],
imports: [OcrProgressBarComponent, NgIf, MatProgressBar, MatIcon, TranslateModule, MatTooltip],
})
export class ReadonlyBannerComponent {
protected readonly _state = inject(FilePreviewStateService);