From 49c59897bf49d07d241778e63773e95d41317912 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 3 Dec 2024 23:26:33 +0200
Subject: [PATCH] RED-10575 - hid the "read only" text when file is in
 processing state

---
 .../readonly-banner.component.html            | 55 +++++++++++--------
 .../readonly-banner.component.scss            |  2 +-
 .../readonly-banner.component.ts              |  3 +-
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
index 1a0a8f423..f37c4646c 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html
@@ -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>
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.scss b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.scss
index 10bda726e..1e4587030 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.scss
@@ -22,7 +22,7 @@
 
     .ocr-indicator {
         display: flex;
-        flex: 1;
+        margin-right: 5px;
         align-items: center;
     }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
index c3387da3a..f595dbb52 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
@@ -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);