From 9c05136206ac75be7c25da13693a2d6028ae7999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 18 Jan 2021 18:05:39 +0200
Subject: [PATCH] Disable changes in watermark screen when no permissions to
 update

---
 .../watermark-screen.component.html           | 10 +++++++---
 .../watermark-screen.component.scss           |  6 +++++-
 .../watermark-screen.component.ts             | 19 +++++++++++++------
 apps/red-ui/src/assets/styles/red-input.scss  |  4 ++++
 apps/red-ui/src/assets/styles/red-slider.scss | 16 +++++++++++++++-
 5 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index 865006403..f87f43b31 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -53,8 +53,9 @@
                     <div class="square-options">
                         <div
                             [class.active]="configForm.get('orientation').value === option"
+                            [class.disabled]="configForm.get('orientation').disabled"
                             [ngClass]="option"
-                            (click)="configForm.get('orientation').setValue(option); configChanged()"
+                            (click)="setValue('orientation', option)"
                             *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
                         >
                             <span>ABC</span>
@@ -83,12 +84,14 @@
                     />
                     <div
                         class="input-icon"
+                        [class.disabled]="configForm.get('hexColor').disabled"
                         [style.background]="configForm.get('hexColor').value"
                         [colorPicker]="configForm.get('hexColor').value"
+                        [cpDisabled]="configForm.get('hexColor').disabled"
                         [cpOutputFormat]="'hex'"
                         [cpPosition]="'top-right'"
                         [cpUseRootViewContainer]="true"
-                        (colorPickerChange)="configForm.get('hexColor').setValue($event); configChanged()"
+                        (colorPickerChange)="setValue('hexColor', $event)"
                     >
                         <mat-icon
                             *ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0"
@@ -102,8 +105,9 @@
                     <div class="square-options">
                         <div
                             [class.active]="configForm.get('fontType').value === option.value"
+                            [class.disabled]="configForm.get('fontType').disabled"
                             [ngClass]="option.value"
-                            (click)="configForm.get('fontType').setValue(option.value); configChanged()"
+                            (click)="setValue('fontType', option.value)"
                             *ngFor="
                                 let option of [
                                     { value: 'sans-serif', display: 'Sans Serif' },
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
index 3302061ab..a75fc9e4e 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
@@ -41,7 +41,11 @@
             cursor: pointer;
             transition: background-color 0.2s;
 
-            &:hover {
+            &.disabled {
+                cursor: default;
+            }
+
+            &:hover:not(.disabled) {
                 background-color: darken($grey-6, 2);
             }
 
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
index f238b111e..77f88d2a4 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
@@ -190,12 +190,19 @@ export class WatermarkScreenComponent implements OnInit {
 
     private _initForm() {
         this.configForm = this._formBuilder.group({
-            text: [null, Validators.required],
-            hexColor: [null, Validators.required],
-            opacity: [null, Validators.required],
-            fontSize: [null, Validators.required],
-            fontType: [null, Validators.required],
-            orientation: [null, Validators.required]
+            text: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
+            hexColor: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
+            opacity: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
+            fontSize: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
+            fontType: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required],
+            orientation: [{ value: null, disabled: !this.permissionsService.isAdmin() }, Validators.required]
         });
     }
+
+    public setValue(type: 'fontType' | 'orientation' | 'hexColor', value: any) {
+        if (!this.configForm.get(type).disabled) {
+            this.configForm.get(type).setValue(value);
+            this.configChanged();
+        }
+    }
 }
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index 17647b04c..f01563375 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -45,6 +45,10 @@ form {
             height: 14px;
             color: $grey-1;
         }
+
+        &.disabled {
+            cursor: default;
+        }
     }
 
     .mat-form-field-underline {
diff --git a/apps/red-ui/src/assets/styles/red-slider.scss b/apps/red-ui/src/assets/styles/red-slider.scss
index 14d637385..db97150e2 100644
--- a/apps/red-ui/src/assets/styles/red-slider.scss
+++ b/apps/red-ui/src/assets/styles/red-slider.scss
@@ -15,6 +15,11 @@
         border-radius: 3px;
     }
 
+    // For disabled state
+    .mat-slider-track-fill {
+        background-color: $primary;
+    }
+
     .mat-slider-track-background {
         height: 4px !important;
         margin-top: 1px;
@@ -31,6 +36,15 @@
     width: 16px !important;
     height: 16px !important;
     border-width: 0 !important;
-    transform: none !important;
     background-color: $primary !important;
 }
+
+.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
+    transform: scale(1) !important;
+}
+
+.mat-slider-horizontal.mat-slider-disabled {
+    .mat-slider-thumb {
+        transform: translateX(-3px);
+    }
+}