Schemas improved.

src/Squidex/app/features/administration/pages/users/user-page.component.ts

@@ -63,10 +63,8 @@ export class UserPageComponent implements OnDestroy, OnInit {
     }
 
     public ngOnDestroy() {
-        if (this.selectedUserSubscription) {
         this.selectedUserSubscription.unsubscribe();
     }
-    }
 
     public ngOnInit() {
         this.selectedUserSubscription =
@@ -120,10 +118,10 @@ export class UserPageComponent implements OnDestroy, OnInit {
     }
 
     private resetFormState(message: string = '') {
+        this.userFormSubmitted = false;
         this.userForm.enable();
         this.userForm.controls['password'].reset();
         this.userForm.controls['passwordConfirm'].reset();
-        this.userFormSubmitted = false;
         this.userFormError = message;
     }
 }

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

@@ -44,7 +44,7 @@
                 <div class="form-group">
                     <sqx-control-errors for="name" [submitted]="addFieldFormSubmitted"></sqx-control-errors>
 
-                    <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter field name" sqxFocusOnInit />
+                    <input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput placeholder="Enter field name" sqxFocusOnInit />
                 </div>
 
                 <div class="form-group">
@@ -77,15 +77,8 @@
     <div class="modal-content" *ngIf="editForm">
         <form [formGroup]="editForm">
             <div class="modal-header">
-                
-                <h4 class="modal-title" *ngIf="editStep === 1">
-                    Step 1 of 3: Common Properties
-                </h4>
-                <h4 class="modal-title" *ngIf="editStep === 2">
-                    Step 2 of 3: Validation
-                </h4>
-                <h4 class="modal-title" *ngIf="editStep === 3">
-                    Step 3 of 3: Editing Settings
+                <h4 class="modal-title">
+                    Configure Field
                 </h4>
                 
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()">
@@ -93,20 +86,30 @@
                 </button>
             </div>
 
-            <div class="modal-body">
-                <h3 class="wizard-title" *ngIf="editStep === 1">Common</h3>
-                <h3 class="wizard-title" *ngIf="editStep === 2">Validation</h3>
-                <h3 class="wizard-title" *ngIf="editStep === 3">Editing</h3>
+            <div class="modal-tabs">
+                <ul class="nav nav-tabs2">
+                    <li class="nav-item">
+                        <a class="nav-link" [class.active]="editTab === 1" (click)="selectTab(1)">Common</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" [class.active]="editTab === 2" (click)="selectTab(2)">Validation</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" [class.active]="editTab === 3" (click)="selectTab(3)">Editing</a>
+                    </li>
+                </ul>
+            </div>
             
-                <div [class.hidden]="editStep !== 1">
+            <div class="modal-body">
+                <div [class.hidden]="editTab !== 1">
                     <sqx-field-form-common [editForm]="editForm" [editFormSubmitted]="editFormSubmitted" [showName]="false" [field]="editField"></sqx-field-form-common>
                 </div>
     
-                <div [class.hidden]="editStep !== 2">
+                <div [class.hidden]="editTab !== 2">
                     <sqx-field-form-validation [editForm]="editForm" [field]="editField"></sqx-field-form-validation>
                 </div>
     
-                <div [class.hidden]="editStep !== 3">
+                <div [class.hidden]="editTab !== 3">
                     <sqx-field-form-ui [editForm]="editForm" [field]="editField"></sqx-field-form-ui>
                 </div>
             </div>
@@ -114,10 +117,7 @@
                 <div class="clearfix">
                     <button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
 
-                    <div class="float-right" *ngIf="editStep !== 2">
-                        <button class="btn btn-primary" (click)="next()">Next</button>
-                    </div>
-                    <div class="float-right" *ngIf="editStep === 2">
+                    <div class="float-right">
                         <button class="btn btn-success" (click)="configureField(false)">Configure and close</button>
                         <button class="btn btn-success" (click)="configureField(true)">Configure and new field</button>
                     </div>

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

@@ -3,9 +3,16 @@
 
 $icon-size: 4.5rem;
 
-.form-check {
-    margin-top: .4rem;
-    margin-bottom: -.2rem;
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.nav-link {
+    cursor: default;
+}
+
+.nav-tabs {
+    margin-bottom: 1rem;
 }
 
 .type {

src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 
 import {
@@ -37,7 +37,7 @@ export class FieldWizardComponent {
     public fieldTypes = fieldTypes;
 
     public editFormSubmitted = false;
-    public editStep = 0;
+    public editTab = 0;
     public editForm: FormGroup | null;
     public editField: FieldDto | null;
 
@@ -58,6 +58,9 @@ export class FieldWizardComponent {
             isLocalizable: [false]
         });
 
+    @ViewChild('nameInput')
+    public nameInput: ElementRef;
+
     @Input()
     public schema: SchemaDetailsDto;
 
@@ -74,8 +77,8 @@ export class FieldWizardComponent {
         this.completed.emit();
     }
 
-    public next() {
-        this.editStep++;
+    public selectTab(tab: number) {
+        this.editTab = tab;
     }
 
     public addField(next: boolean, configure: boolean) {
@@ -99,9 +102,11 @@ export class FieldWizardComponent {
 
                     if (configure) {
                         this.editField = dto;
-                        this.editStep = 1;
+                        this.editTab = 1;
                         this.editForm = new FormGroup({});
-                    } else if (!next) {
+                    } else if (next) {
+                        this.nameInput.nativeElement.focus();
+                    } else {
                         this.complete();
                     }
                 }, error => {
@@ -120,10 +125,10 @@ export class FieldWizardComponent {
                 .subscribe(() => {
                     this.resetEditForm();
 
-                    if (this.next) {
+                    if (next) {
                         this.editField = null;
                         this.editForm = null;
-                        this.editStep = 1;
+                        this.editTab = 1;
                     } else {
                         this.complete();
                     }
@@ -134,16 +139,16 @@ export class FieldWizardComponent {
     }
 
     private resetEditForm() {
+        this.editFormSubmitted = false;
         this.editForm!.enable();
         this.editForm!.reset(this.editField!.properties);
-        this.editFormSubmitted = false;
     }
 
     private resetFieldForm(error = '') {
-        this.addFieldError = error;
-        this.addFieldForm.enable();
-        this.addFieldForm.reset({ type: 'String' });
         this.addFieldFormSubmitted = false;
+        this.addFieldForm.enable();
+        this.addFieldForm.reset({ type: 'String' }, { emitEvent: false });
+        this.addFieldError = error;
     }
 }
 

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

@@ -40,7 +40,7 @@
     </div>
 
     <div class="form-group row">
-        <div class="col col-9 offset-3">
+        <div class="col col-6 offset-3">
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" id="fieldListfield" formControlName="isListField" /> 
                 <label class="form-check-label" for="fieldListfield">
@@ -49,7 +49,7 @@
             </div>
 
             <small class="form-text text-muted">
-                List fields are shown as a column in the content list. If no list field is defined, the first field is shown by default.
+                List fields are shown as a column in the content list.<br />When no list field is defined, the first field is used.
             </small>
         </div>
     </div>

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

@@ -1,8 +1,19 @@
-<form [formGroup]="editForm" (ngSubmit)="saveSchema()">
+<div class="modal-dialog">
+    <div class="modal-content">
+        <form [formGroup]="editForm" (ngSubmit)="saveSchema()">
+            <div class="modal-header">
+                <h4 class="modal-title">Edit Schema</h4>
+
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            <div class="modal-body">
                 <div class="form-group">
                     <label for="schemaName">Name</label>
 
-		<input type="text" class="form-control" id="schemaName" [attr.value]="name" readonly />
+                    <input type="text" class="form-control" id="schemaName" readonly [ngModel]="schema.name" [ngModelOptions]="{standalone: true}" />
                 </div>
 
                 <div class="form-group">
@@ -20,9 +31,14 @@
 
                     <textarea type="text" class="form-control" id="schemaHints" formControlName="hints" rows="4"></textarea>
                 </div>
+            </div>
         
-    <div class="form-group clearfix">
-        <button type="reset" class="float-left btn btn-secondary" (click)="cancel()" [disabled]="editFormSubmitted">Cancel</button>
+            <div class="modal-footer">
+                <div class="clearfix">
+                    <button type="reset" class="float-left btn btn-secondary" (click)="complete()" [disabled]="editFormSubmitted">Cancel</button>
                     <button type="submit" class="float-right btn btn-primary">Save</button>
                 </div>
-</form>
+            </div>
+        </form>
+    </div>
+</div>

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

@@ -8,36 +8,21 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 
-import {
-    AppContext,
-    SchemaPropertiesDto,
-    SchemasService,
-    Version
-} from 'shared';
+import { SchemaDetailsDto, UpdateSchemaDto } from 'shared';
+
+import { SchemasState } from './../../state/schemas.state';
 
 @Component({
     selector: 'sqx-schema-edit-form',
     styleUrls: ['./schema-edit-form.component.scss'],
-    templateUrl: './schema-edit-form.component.html',
-    providers: [
-        AppContext
-    ]
+    templateUrl: './schema-edit-form.component.html'
 })
 export class SchemaEditFormComponent implements OnInit {
     @Output()
-    public saved = new EventEmitter<SchemaPropertiesDto>();
-
-    @Output()
-    public cancelled = new EventEmitter();
-
-    @Input()
-    public name: string;
-
-    @Input()
-    public properties: SchemaPropertiesDto;
+    public completed = new EventEmitter();
 
     @Input()
-    public version: Version;
+    public schema: SchemaDetailsDto;
 
     public editFormSubmitted = false;
     public editForm =
@@ -52,19 +37,18 @@ export class SchemaEditFormComponent implements OnInit {
                 ]]
         });
 
-    constructor(public readonly ctx: AppContext,
-        private readonly schemas: SchemasService,
+    constructor(
+        private readonly schemasState: SchemasState,
         private readonly formBuilder: FormBuilder
     ) {
     }
 
     public ngOnInit() {
-        this.editForm.patchValue(this.properties);
+        this.editForm.patchValue(this.schema.properties);
     }
 
-    public cancel() {
-        this.emitCancelled();
-        this.resetEditForm();
+    public complete() {
+        this.completed.emit();
     }
 
     public saveSchema() {
@@ -73,35 +57,19 @@ export class SchemaEditFormComponent implements OnInit {
         if (this.editForm.valid) {
             this.editForm.disable();
 
-            const requestDto = this.editForm.value;
+            const requestDto = <UpdateSchemaDto>this.editForm.value;
 
-            this.schemas.putSchema(this.ctx.appName, this.name, requestDto, this.version)
+            this.schemasState.update(this.schema, requestDto)
                 .subscribe(dto => {
-                    this.emitSaved(requestDto);
-                    this.resetEditForm();
+                    this.complete();
                 }, error => {
-                    this.ctx.notifyError(error);
                     this.enableEditForm();
                 });
         }
     }
 
-    private emitCancelled() {
-        this.cancelled.emit();
-    }
-
-    private emitSaved(requestDto: any) {
-        this.saved.emit(new SchemaPropertiesDto(requestDto.label, requestDto.hints));
-    }
-
     private enableEditForm() {
         this.editForm.enable();
         this.editFormSubmitted = false;
     }
-
-    private resetEditForm() {
-        this.editForm.reset();
-        this.editForm.enable();
-        this.editFormSubmitted = false;
-    }
 }

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

@@ -60,7 +60,7 @@
 
     <div class="panel-main">
         <div class="panel-content panel-content-scroll" dnd-sortable-container [sortableData]="schema.fields">
-            <div *ngFor="let field of schema.fields; let i = index" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
+            <div *ngFor="let field of schema.fields; let i = index; trackBy: schemasState.trackByField" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
                 <sqx-field [field]="field" [schema]="schema"></sqx-field>
             </div>
 
@@ -89,21 +89,26 @@
 
 <div class="modal" *sqxModalView="editSchemaDialog;onRoot:true" @fade>
     <div class="modal-backdrop"></div>
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title">Edit Schema</h4>
  
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="editSchemaDialog.hide()">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
+    <sqx-schema-edit-form [schema]="schema" 
+        (completed)="editSchemaDialog.hide()">
+    </sqx-schema-edit-form>
+</div>
 
-            <div class="modal-body">
-                <sqx-schema-edit-form [name]="schema.name" [properties]="schema.properties" [version]="schema.version" (saved)="onSchemaSaved($event)" (cancelled)="editSchemaDialog.hide()"></sqx-schema-edit-form>
-            </div>
-        </div>
-    </div>
+<div class="modal" *sqxModalView="addFieldDialog;onRoot:true;closeAuto:false" @fade>
+    <div class="modal-backdrop"></div>
+
+    <sqx-field-wizard [schema]="schema"
+        (completed)="addFieldDialog.hide()">
+    </sqx-field-wizard>
+</div>
+
+<div class="modal" *sqxModalView="configureScriptsDialog;onRoot:true" @fade>
+    <div class="modal-backdrop"></div>
+
+    <sqx-schema-scripts-form [schema]="schema"
+        (completed)="configureScriptsDialog.hide()">
+    </sqx-schema-scripts-form>
 </div>
 
 <div class="modal" *sqxModalView="exportSchemaDialog;onRoot:true" @fade>
@@ -125,22 +130,4 @@
     </div>
 </div>
 
-
-<div class="modal" *sqxModalView="addFieldDialog;onRoot:true;closeAuto:false" @fade>
-    <div class="modal-backdrop"></div>
-
-    <sqx-field-wizard
-        (completed)="addFieldDialog.hide()" [schema]="schema">
-    </sqx-field-wizard>
-</div>
-
-<div class="modal" *sqxModalView="configureScriptsDialog;onRoot:true" @fade>
-    <div class="modal-backdrop"></div>
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <sqx-schema-scripts-form [schema]="schema" (saved)="onSchemaScriptsSaved($event)" (cancelled)="configureScriptsDialog.hide()"></sqx-schema-scripts-form>
-        </div>
-    </div>
-</div>
-
 <router-outlet></router-outlet>

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -36,7 +36,7 @@ import { SchemasState } from './../../state/schemas.state';
     ]
 })
 export class SchemaPageComponent implements OnDestroy, OnInit {
-    private schemaCreatedSubscription: Subscription;
+    private selectedSchemaSubscription: Subscription;
 
     public fieldTypes = fieldTypes;
 
@@ -59,10 +59,11 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
     }
 
     public ngOnDestroy() {
-        this.schemaCreatedSubscription.unsubscribe();
+        this.selectedSchemaSubscription.unsubscribe();
     }
 
     public ngOnInit() {
+        this.selectedSchemaSubscription =
             this.schemasState.selectedSchema
                 .subscribe(schema => {
                     this.schema = schema!;

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

@@ -1,19 +1,23 @@
-<form [formGroup]="editForm" (ngSubmit)="saveSchema()">
+<div class="modal-dialog modal-lg">
+    <div class="modal-content">
+        <form [formGroup]="editForm" (ngSubmit)="saveSchema()">
             <div class="modal-header">
                 <h4 class="modal-title">Scripts</h4>
 
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="cancel()">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
 
-    <div class="modal-body">
-        <ul class="nav nav-tabs">
+            <div class="modal-tabs clearfix">
+                <ul class="nav nav-tabs2">
                     <li class="nav-item" *ngFor="let script of scripts">
                         <a class="nav-link" [class.active]="selectedField === 'script' + script" (click)="selectField('script' + script)">{{script}}</a>
                     </li>
                 </ul>
+            </div>
 
+            <div class="modal-body">
                 <div class="form-group">
                     <div *ngFor="let script of scripts">
                         <div *ngIf="selectedField === 'script' + script">
@@ -25,9 +29,10 @@
 
             <div class="modal-footer">
                 <div class="clearfix">
-            <button type="reset" class="float-left btn btn-secondary" (click)="cancel()" [disabled]="editFormSubmitted">Cancel</button>
+                    <button type="reset" class="float-left btn btn-secondary" (click)="complete()" [disabled]="editFormSubmitted">Cancel</button>
                     <button type="submit" class="float-right btn btn-primary">Save</button>
                 </div>
             </div>
-</form>
-
+        </form>
+    </div>
+</div>

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

@@ -8,27 +8,18 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 
-import {
-    AppContext,
-    SchemaDetailsDto,
-    SchemasService,
-    UpdateSchemaScriptsDto
-} from 'shared';
+import { SchemaDetailsDto, UpdateSchemaScriptsDto } from 'shared';
+
+import { SchemasState } from './../../state/schemas.state';
 
 @Component({
     selector: 'sqx-schema-scripts-form',
     styleUrls: ['./schema-scripts-form.component.scss'],
-    templateUrl: './schema-scripts-form.component.html',
-    providers: [
-        AppContext
-    ]
+    templateUrl: './schema-scripts-form.component.html'
 })
 export class SchemaScriptsFormComponent implements OnInit {
     @Output()
-    public saved = new EventEmitter<UpdateSchemaScriptsDto>();
-
-    @Output()
-    public cancelled = new EventEmitter();
+    public completed = new EventEmitter();
 
     @Input()
     public schema: SchemaDetailsDto;
@@ -53,8 +44,8 @@ export class SchemaScriptsFormComponent implements OnInit {
             scriptChange: ''
         });
 
-    constructor(public readonly ctx: AppContext,
-        private readonly schemas: SchemasService,
+    constructor(
+        private readonly schemasState: SchemasState,
         private readonly formBuilder: FormBuilder
     ) {
     }
@@ -63,9 +54,8 @@ export class SchemaScriptsFormComponent implements OnInit {
         this.editForm.patchValue(this.schema);
     }
 
-    public cancel() {
-        this.emitCancelled();
-        this.resetEditForm();
+    public complete() {
+        this.completed.emit();
     }
 
     public saveSchema() {
@@ -74,33 +64,17 @@ export class SchemaScriptsFormComponent implements OnInit {
         if (this.editForm.valid) {
             this.editForm.disable();
 
-            const requestDto =
-                new UpdateSchemaScriptsDto(
-                    this.editForm.controls['scriptQuery'].value,
-                    this.editForm.controls['scriptCreate'].value,
-                    this.editForm.controls['scriptUpdate'].value,
-                    this.editForm.controls['scriptDelete'].value,
-                    this.editForm.controls['scriptChange'].value);
+            const requestDto = <UpdateSchemaScriptsDto>this.editForm.value;
 
-            this.schemas.putSchemaScripts(this.ctx.appName, this.schema.name, requestDto, this.schema.version)
+            this.schemasState.configureScripts(this.schema, requestDto)
                 .subscribe(dto => {
-                    this.emitSaved(requestDto);
-                    this.resetEditForm();
+                    this.complete();
                 }, error => {
-                    this.ctx.notifyError(error);
                     this.enableEditForm();
                 });
         }
     }
 
-    private emitCancelled() {
-        this.cancelled.emit();
-    }
-
-    private emitSaved(requestDto: UpdateSchemaScriptsDto) {
-        this.saved.emit(requestDto);
-    }
-
     public selectField(field: string) {
         this.selectedField = field;
     }
@@ -109,10 +83,4 @@ export class SchemaScriptsFormComponent implements OnInit {
         this.editForm.enable();
         this.editFormSubmitted = false;
     }
-
-    private resetEditForm() {
-        this.editForm.reset();
-        this.editForm.enable();
-        this.editFormSubmitted = false;
-    }
 }

src/Squidex/app/features/schemas/pages/schema/types/geolocation-validation.component.html

@@ -1,6 +1,6 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <div class="col col-9 offset-3">
+        <div class="col col-9">
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />    
                 <label class="form-check-label" for="fieldRequired">

src/Squidex/app/features/schemas/pages/schema/types/json-validation.component.html

@@ -1,6 +1,6 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <div class="col col-9 offset-3">
+        <div class="col col-9">
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
                 <label class="form-check-label" for="fieldRequired">

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -29,7 +29,7 @@
     <div class="panel-main">
         <div class="panel-content">
             <ul class="nav nav-panel nav-dark nav-dark-bordered flex-column">
-                <li class="nav-item" *ngFor="let schema of schemasFiltered | async; trackBy: schemasState.trackBy">
+                <li class="nav-item" *ngFor="let schema of schemasFiltered | async; trackBy: schemasState.trackBySchema">
                     <a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active">
                         <div class="row">
                             <div class="col col-4">

src/Squidex/app/features/schemas/state/schemas.state.ts

@@ -24,7 +24,9 @@ import {
     SchemaDto,
     SchemaDetailsDto,
     SchemasService,
-    UpdateFieldDto
+    UpdateFieldDto,
+    UpdateSchemaScriptsDto,
+    UpdateSchemaDto
 } from 'shared';
 
 @Injectable()
@@ -171,6 +173,22 @@ export class SchemasState {
             });
     }
 
+    public configureScripts(schema: SchemaDetailsDto, request: UpdateSchemaScriptsDto): Observable<any> {
+        return this.schemasService.putSchemaScripts(this.app, schema.name, request, schema.version)
+            .catch(error => this.notifyError(error))
+            .do(dto => {
+                this.replaceSchema(schema.configureScripts(request, this.user, dto.version));
+            });
+    }
+
+    public update(schema: SchemaDetailsDto, request: UpdateSchemaDto): Observable<any> {
+        return this.schemasService.putSchema(this.app, schema.name, request, schema.version)
+            .catch(error => this.notifyError(error))
+            .do(dto => {
+                this.replaceSchema(schema.update(request, this.user, dto.version));
+            });
+    }
+
     public delete(schema: SchemaDto): Observable<any> {
         return this.schemasService.deleteSchema(this.app, schema.name, schema.version)
             .catch(error => this.notifyError(error))
@@ -185,10 +203,14 @@ export class SchemasState {
         this.selectedSchema.nextBy(v => v !== null && v.id === schema.id ? <SchemaDetailsDto>schema : v);
     }
 
-    public trackBy(index: number, schema: SchemaDto): any {
+    public trackBySchema(index: number, schema: SchemaDto): any {
         return schema.id;
     }
 
+    public trackByField(index: number, field: FieldDto): any {
+        return field.fieldId;
+    }
+
     private notifyError(error: string | ErrorDto) {
         if (error instanceof ErrorDto) {
             this.dialogs.notify(Notification.error(error.displayMessage));

src/Squidex/app/theme/_bootstrap.scss

@@ -464,6 +464,13 @@ a {
         }
     }
 
+    &-tabs {
+        background: $color-border;
+        position: relative;
+        padding: 1rem 1.25rem;
+        height: 70px;
+    }
+
     &-footer {
         .clearfix {
             width: 100%;

src/Squidex/app/theme/_lists.scss

@@ -138,6 +138,7 @@
                 background: $color-border;
                 position: relative;
                 padding: 1rem 1.25rem;
+                height: 70px;
             }
         }
     }

src/Squidex/app/theme/icomoon/demo.html

@@ -704,182 +704,6 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-caret-up">
-                
-                </span>
-                <span class="mls"> icon-caret-up</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92b;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-contents">
-                
-                </span>
-                <span class="mls"> icon-contents</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e946" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe946;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-trigger-ContentChanged">
-                
-                </span>
-                <span class="mls"> icon-trigger-ContentChanged</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e946" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe946;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-Date">
-                
-                </span>
-                <span class="mls"> icon-control-Date</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e936" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-DateTime">
-                
-                </span>
-                <span class="mls"> icon-control-DateTime</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e937" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe937;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-Markdown">
-                
-                </span>
-                <span class="mls"> icon-control-Markdown</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e938" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe938;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-grid">
-                
-                </span>
-                <span class="mls"> icon-grid</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f00a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf00a;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-list">
-                
-                </span>
-                <span class="mls"> icon-list</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f0c9" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf0c9;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-user-o">
-                
-                </span>
-                <span class="mls"> icon-user-o</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e932" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe932;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-rules">
-                
-                </span>
-                <span class="mls"> icon-rules</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e947" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-action-Webhook">
-                
-                </span>
-                <span class="mls"> icon-action-Webhook</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e947" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -81,7 +81,7 @@
 <glyph unicode="&#xe947;" glyph-name="rules, action-Webhook" d="M217.6-41.143c-3.2 0-3.2 0-6.4 0h-3.2c-144 25.6-208 144-208 249.6 0 99.2 57.6 208 185.6 240v147.2c0 19.2 12.8 32 32 32s32-12.8 32-32v-172.8c0-16-12.8-28.8-25.6-32-108.8-16-160-102.4-160-182.4s48-166.4 153.6-185.6h6.4c16-3.2 28.8-19.2 25.6-38.4-3.2-16-16-25.6-32-25.6zM774.4-50.743c0 0 0 0 0 0-102.4 0-211.2 60.8-243.2 185.6h-176c-19.2 0-32 12.8-32 32s12.8 32 32 32h201.6c16 0 28.8-12.8 32-25.6 16-108.8 102.4-156.8 182.4-160 80 0 166.4 48 185.6 153.6v3.2c3.2 16 19.2 28.8 38.4 25.6 16-3.2 28.8-19.2 25.6-38.4v-3.2c-22.4-140.8-140.8-204.8-246.4-204.8zM787.2 272.457c-19.2 0-32 12.8-32 32v176c0 16 12.8 28.8 25.6 32 108.8 16 156.8 102.4 160 182.4 0 80-48 166.4-153.6 185.6h-3.2c-19.2 6.4-32 22.4-28.8 38.4s19.2 28.8 38.4 25.6h3.2c144-25.6 208-144 208-249.6 0-99.2-60.8-208-185.6-240v-150.4c0-16-16-32-32-32zM41.6 704.457c-3.2 0-3.2 0-6.4 0-16 3.2-28.8 19.2-25.6 35.2v3.2c25.6 144 140.8 208 246.4 208 0 0 3.2 0 3.2 0 99.2 0 208-60.8 240-185.6h147.2c19.2 0 32-12.8 32-32s-12.8-32-32-32h-172.8c-16 0-28.8 12.8-32 25.6-16 108.8-102.4 156.8-182.4 160-80 0-166.4-48-185.6-153.6v-3.2c-3.2-16-16-25.6-32-25.6zM256 563.657c-32 0-67.2 12.8-92.8 38.4-51.2 51.2-51.2 134.4 0 185.6 25.6 22.4 57.6 35.2 92.8 35.2s67.2-12.8 92.8-38.4c25.6-25.6 38.4-57.6 38.4-92.8s-12.8-67.2-38.4-92.8c-25.6-22.4-57.6-35.2-92.8-35.2zM256 758.857c-16 0-32-6.4-44.8-19.2-25.6-25.6-25.6-67.2 0-92.8s67.2-25.6 92.8 0c12.8 12.8 19.2 28.8 19.2 48s-6.4 32-19.2 44.8-28.8 19.2-48 19.2zM771.2 77.257c-32 0-67.2 12.8-92.8 38.4-51.2 51.2-51.2 134.4 0 185.6 25.6 25.6 57.6 38.4 92.8 38.4s67.2-12.8 92.8-38.4c25.6-25.6 38.4-57.6 38.4-92.8s-12.8-67.2-38.4-92.8c-28.8-25.6-60.8-38.4-92.8-38.4zM771.2 272.457c-19.2 0-35.2-6.4-48-19.2-25.6-25.6-25.6-67.2 0-92.8s67.2-25.6 92.8 0c12.8 12.8 19.2 28.8 19.2 48s-6.4 35.2-19.2 48-28.8 16-44.8 16zM745.6 563.657c-32 0-67.2 12.8-92.8 38.4s-38.4 57.6-38.4 92.8 12.8 67.2 38.4 92.8c25.6 22.4 60.8 35.2 92.8 35.2s67.2-12.8 92.8-38.4c51.2-51.2 51.2-134.4 0-185.6v0c-25.6-22.4-57.6-35.2-92.8-35.2zM745.6 758.857c-19.2 0-35.2-6.4-48-19.2s-19.2-28.8-19.2-48 6.4-35.2 19.2-48c25.6-25.6 67.2-25.6 92.8 0s25.6 67.2 0 92.8c-9.6 16-25.6 22.4-44.8 22.4zM259.2 77.257c-32 0-67.2 12.8-92.8 38.4s-38.4 57.6-38.4 92.8 12.8 67.2 38.4 92.8c25.6 22.4 57.6 35.2 92.8 35.2s67.2-12.8 92.8-38.4c51.2-51.2 51.2-134.4 0-185.6v0c-25.6-22.4-57.6-35.2-92.8-35.2zM259.2 272.457c-19.2 0-35.2-6.4-48-19.2s-19.2-28.8-19.2-48 6.4-35.2 19.2-48c25.6-25.6 67.2-25.6 92.8 0s25.6 67.2 0 92.8c-9.6 16-25.6 22.4-44.8 22.4z" />
 <glyph unicode="&#xe948;" glyph-name="assets" d="M800-73.143h-576c-124.8 0-224 99.2-224 224v576c0 124.8 99.2 224 224 224h576c124.8 0 224-99.2 224-224v-576c0-124.8-99.2-224-224-224zM224 886.857c-89.6 0-160-70.4-160-160v-576c0-89.6 70.4-160 160-160h576c89.6 0 160 70.4 160 160v576c0 89.6-70.4 160-160 160h-576zM771.2 90.057h-438.4c-12.8 0-22.4 6.4-28.8 19.2s-3.2 25.6 3.2 35.2l300.8 355.2c6.4 6.4 16 12.8 25.6 12.8s19.2-6.4 25.6-12.8l192-275.2c3.2-3.2 3.2-6.4 3.2-9.6 16-44.8 3.2-73.6-6.4-89.6-22.4-32-70.4-35.2-76.8-35.2zM403.2 154.057h371.2c6.4 0 22.4 3.2 25.6 9.6 3.2 3.2 3.2 12.8 0 25.6l-166.4 236.8-230.4-272zM332.8 448.457c-76.8 0-140.8 64-140.8 140.8s64 140.8 140.8 140.8 140.8-64 140.8-140.8-60.8-140.8-140.8-140.8zM332.8 666.057c-41.6 0-76.8-32-76.8-76.8s35.2-76.8 76.8-76.8 76.8 35.2 76.8 76.8-32 76.8-76.8 76.8z" />
 <glyph unicode="&#xe949;" glyph-name="document-lock" d="M358.4 848.457c-28.314 0-51.2-22.886-51.2-51.2v-204.8h51.2v204.8h307.2v-153.6c0-28.314 22.886-51.2 51.2-51.2h153.6v-512h-307.2v-51.2h307.2c28.314 0 51.2 22.886 51.2 51.2v548.2l-219.8 219.8h-292.2zM716.8 761.057l117.4-117.4h-117.4zM153.6 310.857v-281.6h358.4v281.6zM179.2 310.857v76.8c0 84.48 69.12 153.6 153.6 153.6s153.6-69.12 153.6-153.6v-76.8h-51.2v76.8c0 56.32-46.080 102.4-102.4 102.4s-102.4-46.080-102.4-102.4v-76.8z" />
-<glyph unicode="&#xe94a;" glyph-name="type-Tags" d="M295.954 137.249h-94.705c-47.353 0-88.786 41.434-88.786 88.786v491.283c0 47.353 41.434 88.786 88.786 88.786h94.705v59.191h-94.705c-82.867 0-147.977-65.11-147.977-147.977v-491.283c0-82.867 65.11-147.977 147.977-147.977h94.705v59.191zM970.728 486.474c-82.867 171.653-201.249 378.821-272.277 378.821h-112.462v-59.191h112.462c35.514-11.838 136.139-177.572 213.087-337.387-76.948-153.896-177.572-325.549-213.087-337.387h-112.462v-59.191h112.462c71.029 0 183.491 207.168 272.277 384.74l5.919 11.838-5.919 17.757zM266.358 622.659v-260.462h59.191v260.462h-59.191zM479.422 622.659v-260.462h59.191v260.462h-59.191z" />
+<glyph unicode="&#xe94a;" glyph-name="type-Tags" d="M295.954 137.249h-94.705c-47.353 0-88.786 41.434-88.786 88.786v491.283c0 47.353 41.434 88.786 88.786 88.786h94.705v59.191h-94.705c-82.867 0-147.977-65.11-147.977-147.977v-491.283c0-82.867 65.11-147.977 147.977-147.977h94.705v59.191zM970.728 486.474c-82.867 171.653-201.249 378.821-272.277 378.821h-112.462v-59.191h112.462c35.514-11.838 136.139-177.572 213.087-337.387-76.948-153.896-177.572-325.549-213.087-337.387h-112.462v-59.191h112.462c71.029 0 183.491 207.168 272.277 384.74l5.919 11.838-5.919 17.757zM266.358 622.659v-260.462h59.191v260.462zM479.422 622.659v-260.462h59.191v260.462z" />
 <glyph unicode="&#xe94b;" glyph-name="orleans" d="M512 924.477l-424.96-242.8v-485.64l424.96-242.8 424.96 242.8v485.64l-424.96 242.8zM512 715.337l245.76-138.24v-276.48l-245.76-138.24-245.76 138.24v276.48l245.76 138.24z" />
 <glyph unicode="&#xe94c;" glyph-name="action-Algolia" d="M512 933.053c-267.728 0-485.053-217.059-485.053-485.053s217.069-485.053 485.053-485.053c267.983 0 485.053 217.314 485.053 485.308s-217.069 484.797-485.053 484.797zM512 106.504c-188.747 0-341.745 152.988-341.745 341.752 0 188.745 152.998 341.733 341.745 341.733 188.765 0 341.745-152.988 341.745-341.733 0-188.763-152.98-341.752-341.745-341.752zM512 719.478v-254.585c0-7.443 7.957-12.405 14.654-8.939l225.774 117.231c5.042 2.659 6.844 8.986 3.96 13.901-46.936 82.204-133.855 138.576-234.205 142.298z" />
 <glyph unicode="&#xe94d;" glyph-name="action-Slack" horiz-adv-x="951" d="M868 507.428c46.857 0 82.857-34.286 82.857-81.143 0-36.571-18.857-62.286-53.143-74.286l-98.286-33.714 32-95.429c2.857-8.571 4-17.714 4-26.857 0-45.143-36.571-82.857-81.714-82.857-36 0-68 22.286-79.429 56.571l-31.429 94.286-177.143-60.571 31.429-93.714c2.857-8.571 4.571-17.714 4.571-26.857 0-44.571-36.571-82.857-82.286-82.857-36 0-67.429 22.286-78.857 56.571l-31.429 93.143-87.429-30.286c-9.143-2.857-18.857-5.143-28.571-5.143-46.286 0-81.143 34.286-81.143 80.571 0 35.429 22.857 67.429 56.571 78.857l89.143 30.286-60 178.857-89.143-30.857c-9.143-2.857-18.286-4.571-27.429-4.571-45.714 0-81.143 34.857-81.143 80.571 0 35.429 22.857 67.429 56.571 78.857l89.714 30.286-30.286 90.857c-2.857 8.571-4.571 17.714-4.571 26.857 0 45.143 36.571 82.857 82.286 82.857 36 0 67.429-22.286 78.857-56.571l30.857-91.429 177.143 60-30.857 91.429c-2.857 8.571-4.571 17.714-4.571 26.857 0 45.143 37.143 82.857 82.286 82.857 36 0 68-22.857 79.429-56.571l30.286-92 92.571 31.429c8 2.286 16 3.429 24.571 3.429 44.571 0 82.857-33.143 82.857-78.857 0-35.429-27.429-65.143-59.429-76l-89.714-30.857 60-180.571 93.714 32c8.571 2.857 17.714 4.571 26.286 4.571zM414.286 357.714l177.143 60-60 180-177.143-61.143z" />

src/Squidex/app/theme/icomoon/icons/type-Tags.svg

@@ -1,17 +1,74 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 17.3 17.3" style="enable-background:new 0 0 17.3 17.3;" xml:space="preserve">
-<style type="text/css">
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 17.3 17.3"
+   style="enable-background:new 0 0 17.3 17.3;"
+   xml:space="preserve"
+   sodipodi:docname="type-Tags.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+   id="metadata4295"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs4293" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1017"
+   id="namedview4291"
+   showgrid="false"
+   inkscape:zoom="49.017343"
+   inkscape:cx="5.3348465"
+   inkscape:cy="8.6499996"
+   inkscape:window-x="-8"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+<style
+   type="text/css"
+   id="style4278">
 	.st0{fill:#C1C6C8;}
 	.st1{fill:none;stroke:#C1C6C8;stroke-miterlimit:10;}
 </style>
-<g>
-	<path class="st0" d="M5,13.9H3.4c-0.8,0-1.5-0.7-1.5-1.5V4.1c0-0.8,0.7-1.5,1.5-1.5l1.6,0v-1H3.4C2,1.6,0.9,2.7,0.9,4.1v8.3
-		c0,1.4,1.1,2.5,2.5,2.5H5V13.9z"/>
-	<path class="st0" d="M16.4,8C15,5.1,13,1.6,11.8,1.6H9.9v1l1.9,0c0.6,0.2,2.3,3,3.6,5.7c-1.3,2.6-3,5.5-3.6,5.7H9.9v1h1.9
-		c1.2,0,3.1-3.5,4.6-6.5l0.1-0.2L16.4,8z"/>
+<g
+   id="g4284"
+   style="fill:#000000">
+	<path
+   class="st0"
+   d="M5,13.9H3.4c-0.8,0-1.5-0.7-1.5-1.5V4.1c0-0.8,0.7-1.5,1.5-1.5l1.6,0v-1H3.4C2,1.6,0.9,2.7,0.9,4.1v8.3   c0,1.4,1.1,2.5,2.5,2.5H5V13.9z"
+   id="path4280"
+   style="fill:#000000" />
+	<path
+   class="st0"
+   d="M16.4,8C15,5.1,13,1.6,11.8,1.6H9.9v1l1.9,0c0.6,0.2,2.3,3,3.6,5.7c-1.3,2.6-3,5.5-3.6,5.7H9.9v1h1.9   c1.2,0,3.1-3.5,4.6-6.5l0.1-0.2L16.4,8z"
+   id="path4282"
+   style="fill-opacity:1;fill:#000000" />
 </g>
-<line class="st1" x1="5" y1="5.7" x2="5" y2="10.1"/>
-<line class="st1" x1="8.6" y1="5.7" x2="8.6" y2="10.1"/>
+<path
+   style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+   d="m 4.5,5.6992188 v 4.4003902 h 1 V 5.6992188 Z"
+   id="line4286"
+   inkscape:connector-curvature="0" />
+<path
+   style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+   d="m 8.0996094,5.6992188 v 4.4003902 h 1 V 5.6992188 Z"
+   id="line4288"
+   inkscape:connector-curvature="0" />
 </svg>

src/Squidex/app/theme/icomoon/selection.json

@@ -1405,22 +1405,14 @@
         "paths": [
           "M295.954 822.751h-94.705c-47.353 0-88.786-41.434-88.786-88.786v-491.283c0-47.353 41.434-88.786 88.786-88.786h94.705v-59.191h-94.705c-82.867 0-147.977 65.11-147.977 147.977v491.283c0 82.867 65.11 147.977 147.977 147.977h94.705v-59.191z",
           "M970.728 473.526c-82.867-171.653-201.249-378.821-272.277-378.821h-112.462v59.191h112.462c35.514 11.838 136.139 177.572 213.087 337.387-76.948 153.896-177.572 325.549-213.087 337.387h-112.462v59.191h112.462c71.029 0 183.491-207.168 272.277-384.74l5.919-11.838-5.919-17.757z",
-          "M266.358 337.341v260.462h59.191v-260.462h-59.191z",
-          "M479.422 337.341v260.462h59.191v-260.462h-59.191z"
+          "M266.358 337.341v260.462h59.191v-260.462z",
+          "M479.422 337.341v260.462h59.191v-260.462z"
         ],
         "attrs": [
-          {
-            "fill": "rgb(193, 198, 200)"
-          },
-          {
-            "fill": "rgb(193, 198, 200)"
-          },
-          {
-            "fill": "rgb(193, 198, 200)"
-          },
-          {
-            "fill": "rgb(193, 198, 200)"
-          }
+          {},
+          {},
+          {},
+          {}
         ],
         "isMulticolor": false,
         "isMulticolor2": false,
@@ -1430,18 +1422,10 @@
         ]
       },
       "attrs": [
-        {
-          "fill": "rgb(193, 198, 200)"
-        },
-        {
-          "fill": "rgb(193, 198, 200)"
-        },
-        {
-          "fill": "rgb(193, 198, 200)"
-        },
-        {
-          "fill": "rgb(193, 198, 200)"
-        }
+        {},
+        {},
+        {},
+        {}
       ],
       "properties": {
         "order": 98,

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?y97utm');
-  src:  url('fonts/icomoon.eot?y97utm#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?y97utm') format('truetype'),
-    url('fonts/icomoon.woff?y97utm') format('woff'),
-    url('fonts/icomoon.svg?y97utm#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?ajcf5j');
+  src:  url('fonts/icomoon.eot?ajcf5j#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?ajcf5j') format('truetype'),
+    url('fonts/icomoon.woff?ajcf5j') format('woff'),
+    url('fonts/icomoon.svg?ajcf5j#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -153,39 +153,6 @@
 .icon-unlocked:before {
   content: "\e933";
 }
-.icon-caret-up:before {
-  content: "\e92b";
-}
-.icon-contents:before {
-  content: "\e946";
-}
-.icon-trigger-ContentChanged:before {
-  content: "\e946";
-}
-.icon-control-Date:before {
-  content: "\e936";
-}
-.icon-control-DateTime:before {
-  content: "\e937";
-}
-.icon-control-Markdown:before {
-  content: "\e938";
-}
-.icon-grid:before {
-  content: "\f00a";
-}
-.icon-list:before {
-  content: "\f0c9";
-}
-.icon-user-o:before {
-  content: "\e932";
-}
-.icon-rules:before {
-  content: "\e947";
-}
-.icon-action-Webhook:before {
-  content: "\e947";
-}
 .icon-circle:before {
   content: "\e951";
 }
@@ -200,7 +167,6 @@
 }
 .icon-type-Tags:before {
   content: "\e94a";
-  color: #c1c6c8;
 }
 .icon-activity:before {
   content: "\e904";