1) Styling fix

2) Disable fixes

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -38,7 +38,7 @@
                             <a class="dropdown-item" (click)="showing.emit()" *ngIf="field.isHidden">
                                 Show
                             </a>
-                            <a class="dropdown-item" (click)="deleting.emit()">
+                            <a class="dropdown-item dropdown-item-delete" (click)="deleting.emit()">
                                 Delete
                             </a>
                         </div>

src/Squidex/app/framework/angular/date-time-editor.component.html

@@ -7,7 +7,7 @@
             <input type="text" class="form-control" [formControl]="timeControl" (blur)="touched()" />
         </div>
         <div class="form-group" [class.hidden]="!hasValue">
-            <button class="btn btn-link clear" (click)="reset()">Clear</button>
+            <button class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
         </div>
     </div>
 </div>

src/Squidex/app/framework/angular/date-time-editor.component.ts

@@ -52,6 +52,8 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnInit, Af
     @ViewChild('dateInput')
     public dateInput: ElementRef;
 
+    public isDisabled = false;
+
     public ngOnInit() {
         this.timeControl.valueChanges.subscribe(value => {
             if (!value || value.length === 0) {
@@ -92,6 +94,8 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnInit, Af
     }
 
     public setDisabledState(isDisabled: boolean): void {
+        this.isDisabled = isDisabled;
+
         if (isDisabled) {
             this.dateControl.disable({ emitEvent: false });
             this.timeControl.disable({ emitEvent: false });

src/Squidex/app/framework/angular/geolocation-editor.component.html

@@ -10,7 +10,7 @@
                 <input type="number" class="form-control" formControlName="longitude" step="any" />
             </div>
             <div class="form-group" [class.hidden]="!hasValue">
-                <button type="reset" class="btn btn-link clear" (click)="reset()">Clear</button>
+                <button type="reset" class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
             </div>
 
             <button type="submit" class="hidden"></button>

src/Squidex/app/framework/angular/geolocation-editor.component.ts

@@ -48,11 +48,11 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi
                 ]]
         });
 
-    public isDisabled = false;
-
     @ViewChild('editor')
     public editor: ElementRef;
 
+    public isDisabled = false;
+
     constructor(
         private readonly resourceLoader: ResourceLoaderService,
         private readonly formBuilder: FormBuilder
@@ -69,6 +69,34 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi
 
     public setDisabledState(isDisabled: boolean): void {
         this.isDisabled = isDisabled;
+
+        if (isDisabled) {
+            if (this.map) {
+                this.map.zoomControl.disable();
+                this.map._handlers.forEach((handler: any) => {
+                    handler.disable();
+                });
+            }
+
+            if (this.marker) {
+                this.marker.dragging.disable();
+            }
+
+            this.geolocationForm.disable();
+        } else {
+            if (this.map) {
+                this.map.zoomControl.enable();
+                this.map._handlers.forEach((handler: any) => {
+                    handler.enable();
+                });
+            }
+
+            if (this.marker) {
+                this.marker.dragging.enable();
+            }
+
+            this.geolocationForm.enable();
+        }
     }
 
     public registerOnChange(fn: any) {
@@ -101,12 +129,21 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi
             }).addTo(this.map);
 
             this.map.on('click', (event: any) => {
-                this.value = { latitude: event.latlng.lat, longitude: event.latlng.lng };
+                if (!this.marker) {
+                    this.value = { latitude: event.latlng.lat, longitude: event.latlng.lng };
 
-                this.updateMarker(false, true);
+                    this.updateMarker(false, true);
+                }
             });
 
             this.updateMarker(true, false);
+
+            if (this.isDisabled) {
+                this.map.zoomControl.disable();
+                this.map._handlers.forEach((handler: any) => {
+                    handler.disable();
+                });
+            }
         });
     }
 
@@ -128,6 +165,10 @@ export class GeolocationEditorComponent implements ControlValueAccessor, AfterVi
                 this.marker.on('dragend', (event: any) => {
                     this.updateMarker(false, true);
                 });
+
+                if (this.isDisabled) {
+                    this.marker.dragging.disable();
+                }
             }
 
             const latLng = L.latLng(this.value.latitude, this.value.longitude);

src/Squidex/app/framework/angular/markdown-editor.component.ts

@@ -76,6 +76,7 @@ export class MarkdownEditorComponent implements ControlValueAccessor, AfterViewI
         this.resourceLoader.loadScript('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js').then(() => {
             this.simplemde = new SimpleMDE({ element: this.editor.nativeElement });
             this.simplemde.value(this.value || '');
+            this.simplemde.codemirror.setOption('readOnly', this.isDisabled);
 
             this.simplemde.codemirror.on('change', () => {
                 const value = this.simplemde.value();

src/Squidex/app/framework/angular/rich-editor.component.ts

@@ -70,6 +70,7 @@ export class RichEditorComponent implements ControlValueAccessor, AfterViewInit,
             tinymce.init({
                 setup: (editor: any) => {
                     self.tinyEditor = editor;
+                    self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design');
 
                     self.tinyEditor.on('change', () => {
                         const value = editor.getContent();

src/Squidex/app/theme/_bootstrap.scss

@@ -56,6 +56,11 @@ body {
             &:active {
                 background: $color-theme-error-dark;
                 border: 0;
+            }
+        }
+
+        &.dropdown-item {
+            &:active {
                 color: $color-accent-dark;
             }
         }