From fb12ef40a3a2d449ac0072ae03414438de30277c Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Thu, 5 Jan 2023 13:54:48 +0200
Subject: [PATCH] RED-5904 - Add tooltip for disabled delta button

---
 .../view-switch/view-switch.component.html    | 69 ++++++++++---------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.html b/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.html
index cafc08275..ec5944a2b 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.html
@@ -9,39 +9,42 @@
         {{ 'file-preview.standard' | translate }}
     </button>
 
-    <button
-        (click)="switchView(viewModes.DELTA)"
-        *deny="roles.getRss"
-        [class.active]="viewMode === viewModes.DELTA"
-        [disabled]="(canSwitchToDeltaView$ | async) === false"
-        [iqserHelpMode]="'views'"
-        [matTooltip]="'file-preview.delta-tooltip' | translate"
-        class="red-tab"
-    >
-        {{ 'file-preview.delta' | translate }}
-    </button>
+    <div [matTooltip]="'file-preview.delta-tooltip' | translate">
+        <button
+            (click)="switchView(viewModes.DELTA)"
+            *deny="roles.getRss"
+            [class.active]="viewMode === viewModes.DELTA"
+            [disabled]="(canSwitchToDeltaView$ | async) === false"
+            [iqserHelpMode]="'views'"
+            class="red-tab"
+        >
+            {{ 'file-preview.delta' | translate }}
+        </button>
+    </div>
 
-    <button
-        (click)="switchView(viewModes.REDACTED)"
-        *deny="roles.getRss"
-        [class.active]="viewMode === viewModes.REDACTED"
-        [disabled]="(canSwitchToRedactedView$ | async) === false"
-        [iqserHelpMode]="'views'"
-        [matTooltip]="'file-preview.redacted-tooltip' | translate"
-        class="red-tab"
-    >
-        {{ 'file-preview.redacted' | translate }}
-    </button>
+    <div [matTooltip]="'file-preview.redacted-tooltip' | translate">
+        <button
+            (click)="switchView(viewModes.REDACTED)"
+            *deny="roles.getRss"
+            [class.active]="viewMode === viewModes.REDACTED"
+            [disabled]="(canSwitchToRedactedView$ | async) === false"
+            [iqserHelpMode]="'views'"
+            class="red-tab"
+        >
+            {{ 'file-preview.redacted' | translate }}
+        </button>
+    </div>
 
-    <button
-        (click)="switchView(viewModes.TEXT_HIGHLIGHTS)"
-        *deny="roles.getRss"
-        [class.active]="viewMode === viewModes.TEXT_HIGHLIGHTS"
-        [disabled]="(canSwitchToEarmarksView$ | async) === false"
-        [iqserHelpMode]="'views'"
-        [matTooltip]="'file-preview.text-highlights-tooltip' | translate"
-        class="red-tab"
-    >
-        {{ 'file-preview.text-highlights' | translate }}
-    </button>
+    <div [matTooltip]="'file-preview.text-highlights-tooltip' | translate">
+        <button
+            (click)="switchView(viewModes.TEXT_HIGHLIGHTS)"
+            *deny="roles.getRss"
+            [class.active]="viewMode === viewModes.TEXT_HIGHLIGHTS"
+            [disabled]="(canSwitchToEarmarksView$ | async) === false"
+            [iqserHelpMode]="'views'"
+            class="red-tab"
+        >
+            {{ 'file-preview.text-highlights' | translate }}
+        </button>
+    </div>
 </ng-container>