Styles improved.

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -50,7 +50,7 @@
 					<sqx-geolocation-editor [isCompact]="isCompact" [formControl]="editorControl"></sqx-geolocation-editor>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Json'">
-					<sqx-json-editor [formControl]="editorControl"></sqx-json-editor>
+					<sqx-json-editor height="350" [formControl]="editorControl"></sqx-json-editor>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Number'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
@@ -112,7 +112,7 @@
 							<sqx-rich-editor [formControl]="editorControl"></sqx-rich-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Html'">
-							<sqx-code-editor [formControl]="editorControl" mode="ace/mode/html"></sqx-code-editor>
+							<sqx-code-editor height="350"  [formControl]="editorControl" mode="ace/mode/html"></sqx-code-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Markdown'">
 							<sqx-markdown-editor [formControl]="editorControl"></sqx-markdown-editor>

src/Squidex/app/features/rules/pages/rules/rule.component.scss

@@ -15,7 +15,7 @@
     }
 
     &-footer {
-        background: $color-border;
+        background: $color-table-footer;
         font-weight: normal;
         font-size: 90%;
     }

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

@@ -23,7 +23,7 @@ $padding: 1rem;
 }
 
 .drag-container {
-    @include absolute(1.75rem, auto, auto, .75rem);
+    @include absolute(1.6rem, auto, auto, .75rem);
     line-height: 1px;
 }
 
@@ -46,8 +46,9 @@ $padding: 1rem;
     padding: $padding;
     padding-left: 2 * $padding;
     position: relative;
-    border: 0;
-    background: $color-border;
+    border: 1px solid $color-border;
+    border-top-width: 0;
+    background: $color-table-footer;
 }
 
 .nested-field {
@@ -56,7 +57,7 @@ $padding: 1rem;
     }
 
     &-add {
-        border: 2px dashed $field-line;
+        border: 1px dashed $field-line;
         position: relative;
         padding: 1rem;
     }
@@ -64,14 +65,14 @@ $padding: 1rem;
     &-line-v {
         @include absolute($padding, auto, 3 * $padding + .25rem, $padding);
         border: 0;
-        border-left: 2px dashed $field-line;
+        border-left: 1px dashed $field-line;
         width: 2px;
     }
 
     &-line-h {
         @include absolute(-2px, auto, 50%, -$padding);
         border: 0;
-        border-bottom: 2px dashed $field-line;
+        border-bottom: 1px dashed $field-line;
         width: $padding - .25rem;
     }
 }

src/Squidex/app/features/schemas/pages/schema/schema-export-form.component.html

@@ -5,27 +5,32 @@
         </ng-container>
 
         <ng-container content>
-            <sqx-json-editor formControlName="json"></sqx-json-editor>
+            <sqx-json-editor [noBorder]="true" formControlName="json"></sqx-json-editor>
         </ng-container>
 
         <ng-container footer *ngIf="schema.canSynchronize">
-            <div class="float-left form-inline">
-                <div class="form-check pr-4">
-                    <input class="form-check-input" type="checkbox" id="fieldsDelete" formControlName="fieldsDelete" />
-                    <label class="form-check-label" for="fieldsDelete">
-                        Delete fields
-                    </label>
+            <div class="row align-items-center">
+                <div class="col">
+                    <div class="form-inline">
+                        <div class="form-check pr-4">
+                            <input class="form-check-input" type="checkbox" id="fieldsDelete" formControlName="fieldsDelete" />
+                            <label class="form-check-label" for="fieldsDelete">
+                                Delete fields
+                            </label>
+                        </div>
+        
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="fieldsRecreate" formControlName="fieldsRecreate" />
+                            <label class="form-check-label" for="fieldsRecreate">
+                                Recreate fields
+                            </label>
+                        </div>
+                    </div>
                 </div>
-
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="fieldsRecreate" formControlName="fieldsRecreate" />
-                    <label class="form-check-label" for="fieldsRecreate">
-                        Recreate fields
-                    </label>
+                <div class="col-auto">
+                    <button type="submit" class="btn btn-success" [disabled]="synchronizeForm.submitted | async">Synchronize</button>
                 </div>
             </div>
-
-            <button type="submit" class="float-right btn btn-success" [disabled]="synchronizeForm.submitted | async">Synchronize</button>
         </ng-container>
     </sqx-modal-dialog>  
 </form>

src/Squidex/app/features/schemas/pages/schema/schema-export-form.component.scss

@@ -1,6 +1,16 @@
 @import '_vars';
 @import '_mixins';
 
-.json {
-    min-height: 500px;
+:host ::ng-deep {
+    .modal-body {
+        padding: 0;
+    }
+
+    .modal-content {
+        height: 100%;
+    }
+
+    .editor {
+        @include absolute(0, 0, 0, 0);
+    }
 }

src/Squidex/app/features/schemas/pages/schema/schema-scripts-form.component.html

@@ -16,7 +16,7 @@
             <div class="form-group">
                 <ng-container *ngFor="let script of editForm.form.controls | sqxKeys">
                     <ng-container *ngIf="selectedField === script">
-                        <sqx-code-editor [formControlName]="script"></sqx-code-editor>
+                        <sqx-code-editor [noBorder]="true" [formControlName]="script"></sqx-code-editor>
                     </ng-container>
                 </ng-container>
             </div>

src/Squidex/app/features/schemas/pages/schema/schema-scripts-form.component.scss

@@ -3,4 +3,18 @@
 
 .nav-link {
     cursor: default;
+}
+
+:host ::ng-deep {
+    .modal-body {
+        padding: 0;
+    }
+
+    .modal-content {
+        height: 100%;
+    }
+
+    .editor {
+        @include absolute(0, 0, 0, 0);
+    }
 }

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html

@@ -79,7 +79,7 @@
                     Hide
                 </button>
         
-                <sqx-json-editor *ngIf="showImport" formControlName="import"></sqx-json-editor>
+                <sqx-json-editor height="250" *ngIf="showImport" formControlName="import"></sqx-json-editor>
             </div>
 
             <sqx-form-alert>

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.scss

@@ -8,14 +8,6 @@ $icon-size: 4.5rem;
     margin-left: -.5rem;
 }
 
-:host ::ng-deep {
-    .editor {
-        height: 15rem !important;
-        margin-bottom: .5rem;
-        margin-top: 0;
-    }
-}
-
 .name-group {
     margin-bottom: 1.5rem;
 }

src/Squidex/app/framework/angular/forms/code-editor.component.html

@@ -1 +1 @@
-<div class="editor" #editor>Loading editor...</div>
+<div [ngStyle]="style" class="editor" [class.no-border]="noBorder" #editor></div>

src/Squidex/app/framework/angular/forms/code-editor.component.scss

@@ -3,13 +3,14 @@
 
 // sass-lint:disable class-name-format
 
-$editor-height: 20rem;
-
 :host ::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;
-        height: $editor-height;
+
+        &.no-border {
+            border: 0;
+        }
     }
 
     .ace_active-line,
@@ -24,8 +25,4 @@ $editor-height: 20rem;
     .ace_gutter {
         background: $color-border !important;
     }
-}
-
-.editor {
-    height: $editor-height;
 }

src/Squidex/app/framework/angular/forms/code-editor.component.ts

@@ -38,9 +38,15 @@ export class CodeEditorComponent extends StatefulControlComponent<undefined, str
     @ViewChild('editor', { static: false })
     public editor: ElementRef;
 
+    @Input()
+    public noBorder = false;
+
     @Input()
     public mode = 'ace/mode/javascript';
 
+    @Input()
+    public height = 0;
+
     constructor(changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {

src/Squidex/app/framework/angular/forms/json-editor.component.html

@@ -1 +1 @@
-<div class="editor" #editor></div>
+<div class="editor" [class.no-border]="noBorder" #editor></div>

src/Squidex/app/framework/angular/forms/json-editor.component.scss

@@ -9,7 +9,10 @@ $editor-height: 30rem;
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;
-        height: $editor-height;
+
+        &.no-border {
+            border: 0;
+        }
     }
 
     .ace_active-line,
@@ -24,8 +27,4 @@ $editor-height: 30rem;
     .ace_gutter {
         background: $color-border !important;
     }
-}
-
-.editor {
-    height: $editor-height;
 }

src/Squidex/app/framework/angular/forms/json-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -35,6 +35,12 @@ export class JsonEditorComponent extends StatefulControlComponent<{}, string> im
     @ViewChild('editor', { static: false })
     public editor: ElementRef<HTMLDivElement>;
 
+    @Input()
+    public noBorder = false;
+
+    @Input()
+    public height = 0;
+
     constructor(changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {
@@ -70,6 +76,10 @@ export class JsonEditorComponent extends StatefulControlComponent<{}, string> im
                 this.changeValue();
             });
 
+        if (this.height) {
+            this.editor.nativeElement.style.height = `${this.height}px`;
+        }
+
         this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js').then(() => {
             this.aceEditor = ace.edit(this.editor.nativeElement);
 

src/Squidex/app/shared/services/schemas.service.ts

@@ -123,6 +123,8 @@ export class SchemaDetailsDto extends SchemaDto {
     }
 
     public export(): any {
+        const fieldKeys = ['fieldId', '_links', 'parentFieldId'];
+
         const cleanup = (source: any, ...exclude: string[]): any => {
             const clone = {};
 
@@ -141,7 +143,7 @@ export class SchemaDetailsDto extends SchemaDto {
 
         const result: any = {
             fields: this.fields.map(field => {
-                const copy = cleanup(field, 'fieldId', '_links');
+                const copy = cleanup(field, ...fieldKeys);
 
                 copy.properties = cleanup(field.properties);
 
@@ -150,7 +152,7 @@ export class SchemaDetailsDto extends SchemaDto {
                         delete copy['nested'];
                     } else {
                         copy.nested = field.nested.map(nestedField => {
-                            const nestedCopy = cleanup(nestedField, 'fieldId', 'parentId');
+                            const nestedCopy = cleanup(nestedField, ...fieldKeys);
 
                             nestedCopy.properties = cleanup(nestedField.properties);
 

src/Squidex/app/theme/_bootstrap-vars.scss

@@ -34,6 +34,7 @@ $badge-bg-level: 2;
 $dropdown-border-color:     $color-border;
 
 $card-border-color:         $color-border;
+$card-border-radius:        0;
 $card-cap-bg:               $panel-light-background;
 
 $paragraph-margin-bottom:   .5rem;

src/Squidex/app/theme/_bootstrap.scss

@@ -511,6 +511,7 @@ a {
         @include box-shadow(0, 6px, 16px, .4);
         @include border-radiusn(.4rem, .35rem, .35rem, .4rem);
         max-height: 100%;
+        border: 0;
     }
 
     &-fh {

src/Squidex/app/theme/_lists.scss

@@ -148,7 +148,7 @@
     &-footer {
         padding: .75rem 1.25rem;
         background: $color-table-footer;
-        border: 1px solid $color-border;
+        border: 1px solid $color-input;
         border-bottom-width: 2px;
     }
 

src/Squidex/app/theme/_vars.scss

@@ -1,6 +1,6 @@
 $color-background:          #eef1f4;
 
-$color-border:              #e7ebef;
+$color-border:              #e4e7e9;
 $color-border-dark:         #b3bbbf;
 
 $color-title:               #000;