From b6a48cda31b39a83773746badadb555a769e15cf Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 29 Apr 2022 13:47:41 +0200
Subject: [PATCH] Hide change button for disabled fields. (#876)

---
 .../pages/content/editor/content-field.component.html    | 2 +-
 .../pages/content/editor/content-field.component.scss    | 2 +-
 .../pages/content/editor/content-field.component.ts      | 4 +++-
 frontend/src/app/shared/state/contents.forms-helpers.ts  | 9 ---------
 4 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/features/content/pages/content/editor/content-field.component.html b/frontend/src/app/features/content/pages/content/editor/content-field.component.html
index cd9175af8..2a0ad2ea8 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-field.component.html
+++ b/frontend/src/app/features/content/pages/content/editor/content-field.component.html
@@ -50,7 +50,7 @@
     </div>
 
     <div class="col-6 col-right" *ngIf="formModelCompare && formCompare">
-        <div class="copy-button-container">
+        <div class="copy-button-container" *ngIf="!(isDisabled | async)">
             <button type="button" class="btn btn-primary btn-sm field-copy" (click)="copy()" *ngIf="isDifferent | async">
                 <i class="icon-arrow_back"></i>
             </button>
diff --git a/frontend/src/app/features/content/pages/content/editor/content-field.component.scss b/frontend/src/app/features/content/pages/content/editor/content-field.component.scss
index d25b14a88..e98674518 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-field.component.scss
+++ b/frontend/src/app/features/content/pages/content/editor/content-field.component.scss
@@ -61,7 +61,7 @@
     }
 
     &-copy {
-        @include absolute($t: 1rem, $l: -1rem);
+        @include absolute($t: 1rem, $l: -1.5rem);
         z-index: 1000;
     }
 }
diff --git a/frontend/src/app/features/content/pages/content/editor/content-field.component.ts b/frontend/src/app/features/content/pages/content/editor/content-field.component.ts
index 266f27da4..7ecb2a350 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-field.component.ts
+++ b/frontend/src/app/features/content/pages/content/editor/content-field.component.ts
@@ -7,7 +7,7 @@
 
 import { Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
-import { AppLanguageDto, AppsState, changed$, EditContentForm, FieldForm, invalid$, LocalStoreService, SchemaDto, Settings, TranslationsService } from '@app/shared';
+import { AppLanguageDto, AppsState, changed$, disabled$, EditContentForm, FieldForm, invalid$, LocalStoreService, SchemaDto, Settings, TranslationsService } from '@app/shared';
 
 @Component({
     selector: 'sqx-content-field[form][formContext][formLevel][formModel][language][languages][schema]',
@@ -52,6 +52,7 @@ export class ContentFieldComponent implements OnChanges {
 
     public isDifferent?: Observable<boolean>;
     public isInvalid?: Observable<boolean>;
+    public isDisabled?: Observable<boolean>;
 
     @HostBinding('class')
     public get class() {
@@ -78,6 +79,7 @@ export class ContentFieldComponent implements OnChanges {
 
         if (changes['formModel'] && this.formModel) {
             this.isInvalid = invalid$(this.formModel.form);
+            this.isDisabled = disabled$(this.formModel.form);
         }
 
         if ((changes['formModel'] || changes['formModelCompare']) && this.formModelCompare) {
diff --git a/frontend/src/app/shared/state/contents.forms-helpers.ts b/frontend/src/app/shared/state/contents.forms-helpers.ts
index 8b0f4d5c1..f4e889149 100644
--- a/frontend/src/app/shared/state/contents.forms-helpers.ts
+++ b/frontend/src/app/shared/state/contents.forms-helpers.ts
@@ -120,18 +120,9 @@ export interface FormGlobals {
 }
 
 export abstract class AbstractContentForm<T extends FieldDto, TForm extends AbstractControl> extends Hidden {
-    private readonly disabled$ = new BehaviorSubject<boolean>(false);
     private readonly collapsed$ = new BehaviorSubject<boolean | null>(null);
     private readonly ruleSet: CompiledRules;
 
-    public get disabled() {
-        return this.disabled$.value;
-    }
-
-    public get disabledChanges(): Observable<boolean> {
-        return this.disabled$;
-    }
-
     public get collapsed() {
         return this.collapsed$.value;
     }