From c4ab01ac9dc091ecd98985bdd9f7616b54c751a3 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Tue, 30 May 2023 17:08:03 +0200
Subject: [PATCH] RED-6012 - disabled alignment when all form is disabled

---
 .../watermark-screen/watermark-screen.component.html      | 6 ++++--
 .../watermark-screen/watermark-screen.component.scss      | 8 ++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
index eb02b8739..824380cc5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
@@ -54,7 +54,7 @@
         <div class="iqser-input-group">
             <label [translate]="'watermark-screen.form.alignment'" class="all-caps-label mb-8"></label>
             <div class="flex">
-                <div class="alignment-buttons">
+                <div class="alignment-buttons" [class.disabled]="form.controls.horizontalTextAlignment.disabled">
                     <div
                         *ngFor="let alignment of watermarkHorizontalAlignments"
                         class="alignment"
@@ -62,12 +62,13 @@
                         [ngClass]="'horizontal-' + alignment.toLowerCase()"
                         [matTooltip]="translations.HORIZONTAL[alignment] | translate"
                         [matTooltipPosition]="'above'"
+                        [class.disabled]="form.controls.horizontalTextAlignment.disabled"
                         (click)="alignHorizontally(alignment)"
                     >
                         <mat-icon [svgIcon]="'red:align-horizontal-' + alignment.toLowerCase()"></mat-icon>
                     </div>
                 </div>
-                <div class="alignment-buttons">
+                <div class="alignment-buttons" [class.disabled]="form.controls.verticalTextAlignment.disabled">
                     <div
                         *ngFor="let alignment of watermarkVerticalAlignments"
                         class="alignment"
@@ -75,6 +76,7 @@
                         [ngClass]="'vertical-' + alignment.toLowerCase()"
                         [matTooltip]="translations.VERTICAL[alignment] | translate"
                         [matTooltipPosition]="'above'"
+                        [class.disabled]="form.controls.verticalTextAlignment.disabled"
                         (click)="alignVertically(alignment)"
                     >
                         <mat-icon [svgIcon]="'red:align-vertical-' + alignment.toLowerCase()"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
index aa79d5ba1..68f3c8a63 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
@@ -100,6 +100,10 @@
         border: 1px solid var(--iqser-grey-5);
         margin-right: 10px;
 
+        &.disabled {
+            cursor: not-allowed;
+        }
+
         .alignment {
             width: 33px;
             display: flex;
@@ -127,6 +131,10 @@
                 border-top-right-radius: 5px;
                 border-bottom-right-radius: 5px;
             }
+
+            &.disabled {
+                pointer-events: none;
+            }
         }
 
         .alignment:not(.active):hover {