From c4926909a8ac04ef2ada43556d73d6bd145ac5f6 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 28 Jun 2019 21:03:28 +0200
Subject: [PATCH] Controls fixed.

---
 .../pages/schema/schema-page.component.html   |  4 +--
 .../angular/forms/code-editor.component.html  |  2 +-
 .../angular/forms/code-editor.component.scss  |  8 ++++-
 .../angular/forms/code-editor.component.ts    |  6 ++--
 .../angular/forms/iframe-editor.component.ts  |  6 ++--
 .../angular/forms/json-editor.component.scss  |  8 ++++-
 .../angular/forms/json-editor.component.ts    |  8 ++---
 .../framework/angular/stateful.component.ts   | 31 -------------------
 .../components/rich-editor.component.html     |  2 +-
 9 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
index 334bd3430..a141af0ea 100644
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@@ -25,10 +25,10 @@
             </button>
             <div class="dropdown-menu" *sqxModalView="editOptionsDropdown;closeAlways:true" [sqxModalTarget]="buttonOptions" @fade>
                 <a class="dropdown-item" (click)="configureScriptsDialog.show()">
-                    Edit Scripts
+                    Configure Scripts
                 </a>
                 <a class="dropdown-item" (click)="configurePreviewUrlsDialog.show()">
-                    Edit Preview Urls
+                    Configure Preview Urls
                 </a>
                 
                 <ng-container *ngIf="schemasState.canCreate">
diff --git a/src/Squidex/app/framework/angular/forms/code-editor.component.html b/src/Squidex/app/framework/angular/forms/code-editor.component.html
index bb84a4048..d3bfca0a3 100644
--- a/src/Squidex/app/framework/angular/forms/code-editor.component.html
+++ b/src/Squidex/app/framework/angular/forms/code-editor.component.html
@@ -1 +1 @@
-<div class="editor" #editor></div>
\ No newline at end of file
+<div class="editor" #editor>Loading editor...</div>
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/code-editor.component.scss b/src/Squidex/app/framework/angular/forms/code-editor.component.scss
index 7d9334f08..9a7b03689 100644
--- a/src/Squidex/app/framework/angular/forms/code-editor.component.scss
+++ b/src/Squidex/app/framework/angular/forms/code-editor.component.scss
@@ -3,11 +3,13 @@
 
 // sass-lint:disable class-name-format
 
+$editor-height: 20rem;
+
 :host ::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;
-        height: 20rem;
+        height: $editor-height;
     }
 
     .ace_active-line,
@@ -22,4 +24,8 @@
     .ace_gutter {
         background: $color-border !important;
     }
+}
+
+.editor {
+    height: $editor-height;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/code-editor.component.ts b/src/Squidex/app/framework/angular/forms/code-editor.component.ts
index caa716184..93a422a63 100644
--- a/src/Squidex/app/framework/angular/forms/code-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/code-editor.component.ts
@@ -11,8 +11,8 @@ import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
 import {
-    ExternalControlComponent,
     ResourceLoaderService,
+    StatefulControlComponent,
     Types
 } from '@app/framework/internal';
 
@@ -29,7 +29,7 @@ export const SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CodeEditorComponent extends ExternalControlComponent<string> implements AfterViewInit {
+export class CodeEditorComponent extends StatefulControlComponent<any, any> implements AfterViewInit {
     private valueChanged = new Subject();
     private aceEditor: any;
     private value: string;
@@ -44,7 +44,7 @@ export class CodeEditorComponent extends ExternalControlComponent<string> implem
     constructor(changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {
-        super(changeDetector);
+        super(changeDetector, {});
     }
 
     public writeValue(obj: any) {
diff --git a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts
index f4badb851..d092d2c94 100644
--- a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts
@@ -8,7 +8,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { ExternalControlComponent, Types } from '@app/framework/internal';
+import { StatefulControlComponent, Types } from '@app/framework/internal';
 
 export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IFrameEditorComponent), multi: true
@@ -21,7 +21,7 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class IFrameEditorComponent extends ExternalControlComponent<any> implements OnChanges, OnInit {
+export class IFrameEditorComponent extends StatefulControlComponent<any, any> implements OnChanges, OnInit {
     private value: any;
     private isDisabled = false;
     private isInitialized = false;
@@ -41,7 +41,7 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
     constructor(changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2
     ) {
-        super(changeDetector);
+        super(changeDetector, {});
     }
 
     public ngOnChanges(changes: SimpleChanges) {
diff --git a/src/Squidex/app/framework/angular/forms/json-editor.component.scss b/src/Squidex/app/framework/angular/forms/json-editor.component.scss
index 7d9334f08..9a7b03689 100644
--- a/src/Squidex/app/framework/angular/forms/json-editor.component.scss
+++ b/src/Squidex/app/framework/angular/forms/json-editor.component.scss
@@ -3,11 +3,13 @@
 
 // sass-lint:disable class-name-format
 
+$editor-height: 20rem;
+
 :host ::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;
-        height: 20rem;
+        height: $editor-height;
     }
 
     .ace_active-line,
@@ -22,4 +24,8 @@
     .ace_gutter {
         background: $color-border !important;
     }
+}
+
+.editor {
+    height: $editor-height;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/json-editor.component.ts b/src/Squidex/app/framework/angular/forms/json-editor.component.ts
index 0adf10a0a..87bf0dadf 100644
--- a/src/Squidex/app/framework/angular/forms/json-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/json-editor.component.ts
@@ -10,7 +10,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { ExternalControlComponent, ResourceLoaderService } from '@app/framework/internal';
+import { ResourceLoaderService, StatefulControlComponent } from '@app/framework/internal';
 
 declare var ace: any;
 
@@ -25,7 +25,7 @@ export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class JsonEditorComponent extends ExternalControlComponent<string> implements AfterViewInit {
+export class JsonEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit {
     private valueChanged = new Subject();
     private aceEditor: any;
     private value: any;
@@ -38,9 +38,7 @@ export class JsonEditorComponent extends ExternalControlComponent<string> implem
     constructor(changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {
-        super(changeDetector);
-
-        changeDetector.detach();
+        super(changeDetector, {});
     }
 
     public writeValue(obj: any) {
diff --git a/src/Squidex/app/framework/angular/stateful.component.ts b/src/Squidex/app/framework/angular/stateful.component.ts
index ec261fcfa..dcf50299e 100644
--- a/src/Squidex/app/framework/angular/stateful.component.ts
+++ b/src/Squidex/app/framework/angular/stateful.component.ts
@@ -113,36 +113,5 @@ export abstract class StatefulControlComponent<T, TValue> extends StatefulCompon
         this.next(s => ({ ...s, isDisabled }));
     }
 
-    public abstract writeValue(obj: any): void;
-}
-
-export abstract class ExternalControlComponent<TValue> extends StatefulComponent<any> implements ControlValueAccessor {
-    private fnChanged = (v: any) => { /* NOOP */ };
-    private fnTouched = () => { /* NOOP */ };
-
-    constructor(changeDetector: ChangeDetectorRef) {
-        super(changeDetector, {});
-
-        changeDetector.detach();
-    }
-
-    public registerOnChange(fn: any) {
-        this.fnChanged = fn;
-    }
-
-    public registerOnTouched(fn: any) {
-        this.fnTouched = fn;
-    }
-
-    protected callTouched() {
-        this.fnTouched();
-    }
-
-    protected callChange(value: TValue) {
-        this.fnChanged(value);
-    }
-
-    public abstract setDisabledState(isDisabled: boolean): void;
-
     public abstract writeValue(obj: any): void;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/rich-editor.component.html b/src/Squidex/app/shared/components/rich-editor.component.html
index 44a1469e8..d4aaa1e17 100644
--- a/src/Squidex/app/shared/components/rich-editor.component.html
+++ b/src/Squidex/app/shared/components/rich-editor.component.html
@@ -1,5 +1,5 @@
 <div class="drop-container" (sqxDropFile)="insertFiles($event)" [onlyImages]="true">
-    <div class="editor" #editor></div>
+    <div class="editor" #editor>Loading editor...</div>
 </div>
 
 <ng-container *sqxModalView="assetsDialog;onRoot:true;closeAuto:false">