Started with diff view.

src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.ts

@@ -32,7 +32,7 @@ export class EventConsumersPageComponent extends ResourceOwner implements OnInit
     public ngOnInit() {
         this.eventConsumersState.load().pipe(onErrorResumeNext()).subscribe();
 
-        this.takeOver(timer(2000, 2000).pipe(switchMap(() => this.eventConsumersState.load(true, true))));
+        this.own(timer(2000, 2000).pipe(switchMap(() => this.eventConsumersState.load(true, true))));
     }
 
     public reload() {

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

@@ -38,7 +38,7 @@ export class RestorePageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             timer(0, 2000).pipe(switchMap(() => this.backupsService.getRestore().pipe(onErrorResumeNext())))
                 .subscribe(job => {
                     if (job) {

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

@@ -35,7 +35,7 @@ export class UserPageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.usersState.selectedUser
                 .subscribe(selectedUser => {
                     this.user = selectedUser!;

src/Squidex/app/features/api/pages/graphql/graphql-page.component.html

@@ -1,5 +1,5 @@
 <sqx-title message="{app} | API | GraphQL" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="*" isFullSize="true">
+<sqx-panel desiredWidth="*" minWidth="50rem" isFullSize="true">
    <div inner #graphiQLContainer></div>
 </sqx-panel>

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

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | Assets" parameter1="app" [value1]="appsState.appName"></sqx-title>
 
-<sqx-panel desiredWidth="*" showSidebar="true">
+<sqx-panel desiredWidth="*" minWidth="50rem" showSidebar="true">
     <ng-container title>
         Assets
     </ng-container>

src/Squidex/app/features/content/declarations.ts

@@ -9,6 +9,7 @@ export * from './pages/comments/comments-page.component';
 export * from './pages/content/content-field.component';
 export * from './pages/content/content-history-page.component';
 export * from './pages/content/content-page.component';
+export * from './pages/content/field-languages.component';
 export * from './pages/contents/contents-filters-page.component';
 export * from './pages/contents/contents-page.component';
 export * from './pages/schemas/schemas-page.component';

src/Squidex/app/features/content/module.ts

@@ -36,6 +36,7 @@ import {
     ContentStatusComponent,
     DueTimeSelectorComponent,
     FieldEditorComponent,
+    FieldLanguagesComponent,
     PreviewButtonComponent,
     ReferencesEditorComponent,
     SchemasPageComponent
@@ -119,6 +120,7 @@ const routes: Routes = [
         ContentsSelectorComponent,
         DueTimeSelectorComponent,
         FieldEditorComponent,
+        FieldLanguagesComponent,
         PreviewButtonComponent,
         ReferencesEditorComponent,
         SchemasPageComponent

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -1,42 +1,79 @@
-<div class="table-items-row" [class.invalid]="isInvalid | async">
+<div class="row no-gutters" [class.compare]="fieldFormCompare">
-    <div class="languages-buttons" *ngIf="field.isLocalizable && languages.length > 1">
+    <div [class.col-12]="!fieldFormCompare" [class.col-6]="fieldFormCompare">
-        <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-secondary btn-sm btn-text mr-1" (click)="toggleShowAll()">
+        <div class="table-items-row" [class.field-invalid]="isInvalid | async">
-            {{showAllControls ? 'Single Language' : 'All Languages'}}
+            <div class="languages-buttons">
-        </button>
+                <sqx-field-languages 
-    
+                    [field]="field"
-        <ng-container *ngIf="field.properties.isComplexUI || !showAllControls">
+                    [language]="language"
-            <sqx-language-selector size="sm" #buttonLanguages
+                    (languageChange)="languageChange.emit($event)"
-                [selectedLanguage]="language"
+                    [languages]="languages"
-                (selectedLanguageChange)="languageChange.emit($event)"
+                    [showAllControls]="showAllControls"
-                [languages]="languages.values">
+                    (showAllControlsChange)="changeShowAllControls($event)">
-            </sqx-language-selector>
+                </sqx-field-languages>
-    
+            </div>
-            <sqx-onboarding-tooltip helpId="languages" [for]="buttonLanguages" position="topRight" after="120000">
+            
-                Please remember to check all languages when you see validation errors.
+            <ng-container *ngIf="showAllControls; else singleControl">
-            </sqx-onboarding-tooltip>
+                <div class="form-group" *ngFor="let language of languages; trackBy: trackByLanguage">
-        </ng-container> 
+                    <sqx-field-editor
+                        [displaySuffix]="prefix(language)"
+                        [form]="form"
+                        [field]="field"
+                        [language]="language"
+                        [languages]="languages"
+                        [control]="fieldForm.controls[language.iso2Code]">
+                    </sqx-field-editor>
+                </div>
+            </ng-container>
+        
+            <ng-template #singleControl>
+                <sqx-field-editor
+                    [form]="form"
+                    [field]="field"
+                    [language]="language"
+                    [languages]="languages"
+                    [control]="selectedFormControl">
+                </sqx-field-editor>
+            </ng-template>
+        </div>
     </div>
 
-    <ng-container *ngIf="showAllControls; else singleControl">
+    <div class="col-6 col-right" *ngIf="fieldFormCompare">
-        <div class="form-group" *ngFor="let language of languages">
+        <button type="button" class="btn btn-primary btn-sm field-copy" (click)="copy()">
-            <sqx-field-editor
+            <i class="icon-arrow_back"></i>
-                [displaySuffix]="'(' + language.iso2Code + ')'"
+        </button>
-                [form]="form"
-                [field]="field"
-                [language]="language"
-                [languages]="languages"
-                [control]="fieldForm.controls[language.iso2Code]">
-            </sqx-field-editor>
-        </div>
-    </ng-container>
 
-    <ng-template #singleControl>
+        <div class="table-items-row">
-        <sqx-field-editor
+            <div class="languages-buttons">
-            [form]="form"
+                <sqx-field-languages 
-            [field]="field"
+                    [field]="field"
-            [language]="language"
+                    [language]="language"
-            [languages]="languages"
+                    (languageChange)="languageChange.emit($event)"
-            [control]="selectedFormControl">
+                    [languages]="languages"
-        </sqx-field-editor>
+                    [showAllControls]="showAllControls"
-    </ng-template>
+                    (showAllControlsChange)="changeShowAllControls($event)">
+                </sqx-field-languages>
+            </div>
+
+            <ng-container *ngIf="showAllControls; else singleControlCompare">
+                <div class="form-group" *ngFor="let language of languages; trackBy: trackByLanguage">
+                    <sqx-field-editor
+                        [displaySuffix]="prefix(language)"
+                        [field]="field"
+                        [language]="language"
+                        [languages]="languages"
+                        [control]="fieldFormCompare?.controls[language.iso2Code]">
+                    </sqx-field-editor>
+                </div>
+            </ng-container>
+        
+            <ng-template #singleControlCompare>
+                <sqx-field-editor
+                    [field]="field"
+                    [language]="language"
+                    [languages]="languages"
+                    [control]="selectedFormControlCompare">
+                </sqx-field-editor>
+            </ng-template>
+        </div>
+    </div>
 </div>

src/Squidex/app/features/content/pages/content/content-field.component.scss

@@ -11,8 +11,26 @@
     @include absolute(.7rem, 1.25rem, auto, auto);
 }
 
-.invalid {
+.row {
-    border-left-color: $color-theme-error;
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+}
+
+.col-12 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+.col-6 {
+    & {
+        padding-left: 1.5rem;
+        padding-right: .5rem;
+    }
+
+    &.col-right {
+        padding-left: .5rem;
+        padding-right: 1.5rem;
+    }
 }
 
 .field {
@@ -20,9 +38,24 @@
         color: $color-theme-error;
     }
 
+    &-invalid {
+        border-left-color: $color-theme-error;
+    }
+
     &-disabled {
         color: $color-border-dark;
         font-size: .8rem;
         font-weight: normal;
     }
+
+    &-copy {
+        @include absolute(1rem, auto, auto, -1rem);
+        z-index: 1000;
+    }
+}
+
+.compare {
+    padding: .5rem 0;
+    border: 0;
+    border-bottom: 1px solid $color-border;
 }

src/Squidex/app/features/content/pages/content/content-field.component.ts

@@ -36,6 +36,9 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
     @Input()
     public fieldForm: FormGroup;
 
+    @Input()
+    public fieldFormCompare?: FormGroup;
+
     @Input()
     public schema: SchemaDto;
 
@@ -49,6 +52,8 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
     public languageChange = new EventEmitter<AppLanguageDto>();
 
     public selectedFormControl: AbstractControl;
+    public selectedFormControlCompare?: AbstractControl;
+
     public showAllControls = false;
 
     public isInvalid: Observable<boolean>;
@@ -68,20 +73,24 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
         }
     }
 
-    public toggleShowAll() {
+    public changeShowAllControls(value: boolean) {
-        this.showAllControls = !this.showAllControls;
+        this.showAllControls = value;
 
         this.localStore.setBoolean(this.configKey(), this.showAllControls);
     }
 
-    public ngDoCheck() {
+    public copy() {
-        let control: AbstractControl;
+        if (this.selectedFormControlCompare && this.fieldFormCompare) {
-
+            if (this.showAllControls) {
-        if (this.field.isLocalizable) {
+                this.fieldForm.setValue(this.fieldFormCompare.value);
-            control = this.fieldForm.controls[this.language.iso2Code];
+            } else {
-        } else {
+                this.selectedFormControl.setValue(this.selectedFormControlCompare.value);
-            control = this.fieldForm.controls[fieldInvariant];
+            }
         }
+    }
+
+    public ngDoCheck() {
+        const control = this.findControl(this.fieldForm);
 
         if (this.selectedFormControl !== control) {
             if (this.selectedFormControl && Types.isFunction(this.selectedFormControl['_clearChangeFns'])) {
@@ -90,6 +99,34 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
 
             this.selectedFormControl = control;
         }
+
+        if (this.fieldFormCompare) {
+            const controlCompare = this.findControl(this.fieldFormCompare);
+
+            if (this.selectedFormControlCompare !== controlCompare) {
+                if (this.selectedFormControlCompare && Types.isFunction(this.selectedFormControlCompare['_clearChangeFns'])) {
+                    this.selectedFormControlCompare['_clearChangeFns']();
+                }
+
+                this.selectedFormControlCompare = controlCompare;
+            }
+        }
+    }
+
+    private findControl(form: FormGroup) {
+        if (this.field.isLocalizable) {
+            return form.controls[this.language.iso2Code];
+        } else {
+            return form.controls[fieldInvariant];
+        }
+    }
+
+    public prefix(language: AppLanguageDto) {
+        return `(${language.iso2Code}`;
+    }
+
+    public trackByLanguage(index: number, language: AppLanguageDto) {
+        return language.iso2Code;
     }
 
     private configKey() {

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

@@ -1,7 +1,7 @@
 <sqx-title message="{app} | {schema} | Content" parameter1="app" parameter2="schema" [value1]="appsState.appName" [value2]="schema.displayName"></sqx-title>
 
 <form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()">
-    <sqx-panel desiredWidth="*" [showSidebar]="content">
+    <sqx-panel desiredWidth="*" minWidth="40rem" [showSidebar]="content">
         <ng-container title>
             <a class="btn btn-text" (click)="back()" *ngIf="!schema.isSingleton">
                 <i class="icon-angle-left"></i>
@@ -116,6 +116,7 @@
                     [form]="contentForm"
                     [field]="field"
                     [fieldForm]="contentForm.form.get(field.name)"
+                    [fieldFormCompare]="contentFormCompare?.form.get(field.name)"
                     [schema]="schema"
                     [languages]="languages"
                     [(language)]="language">

src/Squidex/app/features/content/pages/content/content-page.component.ts

@@ -47,6 +47,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     public content: ContentDto;
     public contentVersion: Version | null;
     public contentForm: EditContentForm;
+    public contentFormCompare: EditContentForm | null = null;
 
     public dropdown = new ModalModel();
 
@@ -70,14 +71,14 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.languagesState.languages
                 .subscribe(languages => {
                     this.languages = languages.map(x => x.language);
                     this.language = this.languages.at(0);
                 }));
 
-        this.takeOver(
+        this.own(
             this.schemasState.selectedSchema
                 .subscribe(schema => {
                     if (schema) {
@@ -87,7 +88,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                     }
                 }));
 
-        this.takeOver(
+        this.own(
             this.contentsState.selectedContent
                 .subscribe(content => {
                     if (content) {
@@ -97,7 +98,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                     }
                 }));
 
-        this.takeOver(
+        this.own(
             this.messageBus.of(ContentVersionSelected)
                 .subscribe(message => {
                     this.loadVersion(message.version);
@@ -208,26 +209,25 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
             .subscribe();
     }
 
-    private loadVersion(version: Version) {
+    private loadVersion(version: Version | null) {
-        if (this.content) {
+        if (!this.content || version === null || version.eq(this.content.version)) {
+            this.contentFormCompare = null;
+            this.contentVersion = null;
+        } else {
             this.contentsState.loadVersion(this.content, version)
                 .subscribe(dto => {
-                    if (this.content.version.value !== version.value) {
+                    if (this.contentFormCompare === null) {
-                        this.contentVersion = version;
+                        this.contentFormCompare = new EditContentForm(this.schema, this.languages);
-                    } else {
+                        this.contentFormCompare.form.disable();
-                        this.contentVersion = null;
                     }
 
-                    this.loadContent(dto);
+                    this.contentFormCompare.load(dto.payload);
+                    this.contentVersion = version;
                 });
         }
     }
 
     public showLatest() {
-        if (this.contentVersion) {
+        this.loadVersion(null);
-            this.contentVersion = null;
-
-            this.loadContent(this.content.dataDraft);
-        }
     }
 }

src/Squidex/app/features/content/pages/content/field-languages.component.ts

@@ -0,0 +1,55 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import {
+    AppLanguageDto,
+    ImmutableArray,
+    RootFieldDto
+} from '@app/shared';
+
+@Component({
+    selector: 'sqx-field-languages',
+    template: `
+        <ng-container *ngIf="field.isLocalizable && languages.length > 1">
+            <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-text-secondary btn-sm mr-1" (click)="showAllControlsChange.emit(!showAllControls)">
+                {{showAllControls ? 'Single Language' : 'All Languages'}}
+            </button>
+
+            <ng-container *ngIf="field.properties.isComplexUI || !showAllControls">
+                <sqx-language-selector size="sm" #buttonLanguages
+                    [selectedLanguage]="language"
+                    (selectedLanguageChange)="languageChange.emit($event)"
+                    [languages]="languages.values">
+                </sqx-language-selector>
+
+                <sqx-onboarding-tooltip helpId="languages" [for]="buttonLanguages" position="topRight" after="120000">
+                    Please remember to check all languages when you see validation errors.
+                </sqx-onboarding-tooltip>
+            </ng-container>
+        </ng-container>`
+})
+export class FieldLanguagesComponent {
+    @Input()
+    public field: RootFieldDto;
+
+    @Input()
+    public showAllControls: boolean;
+
+    @Input()
+    public language: AppLanguageDto;
+
+    @Input()
+    public languages: ImmutableArray<AppLanguageDto>;
+
+    @Output()
+    public languageChange = new EventEmitter<AppLanguageDto>();
+
+    @Output()
+    public showAllControlsChange = new EventEmitter<AppLanguageDto>();
+}

src/Squidex/app/features/content/pages/contents/contents-filters-page.component.ts

@@ -33,7 +33,7 @@ export class ContentsFiltersPageComponent extends ResourceOwner implements OnIni
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.schemasState.selectedSchema
                 .subscribe(schema => {
                     if (schema) {

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -1,6 +1,6 @@
 <sqx-title message="{app} | {schema} | Contents" parameter1="app" parameter2="schema" [value1]="appsState.appName" [value2]="schema.displayName"></sqx-title>
 
-<sqx-panel desiredWidth="*" contentClass="grid" showSidebar="true">
+<sqx-panel desiredWidth="*" minWidth="50rem" contentClass="grid" showSidebar="true">
     <ng-container title>
         <ng-container *ngIf="contentsState.isArchive | async; else noArchive">
             Archive

src/Squidex/app/features/content/pages/contents/contents-page.component.ts

@@ -61,7 +61,7 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.schemasState.selectedSchema
                 .subscribe(schema => {
                     this.resetSelection();
@@ -72,13 +72,13 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
                     this.contentsState.init().pipe(onErrorResumeNext()).subscribe();
                 }));
 
-        this.takeOver(
+        this.own(
             this.contentsState.contents
                 .subscribe(() => {
                     this.updateSelectionSummary();
                 }));
 
-        this.takeOver(
+        this.own(
             this.languagesState.languages
                 .subscribe(languages => {
                     this.languages = languages.map(x => x.language);

src/Squidex/app/features/content/shared/assets-editor.component.scss

@@ -44,8 +44,7 @@
     & {
         @include transition(border-color .4s ease);
         @include border-radius;
-        @include flex-box;
+        @include truncate-nowidth;
-        @include truncate;
         border: 2px dashed darken($color-border, 10%);
         font-weight: normal;
         text-align: center;

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

@@ -5,7 +5,7 @@
 
 	<span class="field-disabled pl-1" *ngIf="field.isDisabled">Disabled</span>
 
-	<sqx-control-errors [for]="control" [fieldName]="field.displayName" [submitted]="form.submitted | async"></sqx-control-errors>
+	<sqx-control-errors *ngIf="form" [for]="control" [fieldName]="field.displayName" [submitted]="form.submitted | async"></sqx-control-errors>
 
 	<div>
 		<ng-container *ngIf="field.properties.editorUrl; else noEditor">

src/Squidex/app/features/dashboard/pages/dashboard-page.component.ts

@@ -106,7 +106,7 @@ export class DashboardPageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.app.pipe(
                     switchMap(app => this.usagesService.getTodayStorage(app.name)))
                 .subscribe(dto => {
@@ -114,7 +114,7 @@ export class DashboardPageComponent extends ResourceOwner implements OnInit {
                     this.assetsMax = dto.maxAllowed;
                 }));
 
-        this.takeOver(
+        this.own(
             this.app.pipe(
                     switchMap(app => this.usagesService.getMonthCalls(app.name)))
                 .subscribe(dto => {
@@ -122,14 +122,14 @@ export class DashboardPageComponent extends ResourceOwner implements OnInit {
                     this.callsMax = dto.maxAllowed;
                 }));
 
-        this.takeOver(
+        this.own(
             this.app.pipe(
                     switchMap(app => this.historyService.getHistory(app.name, '')))
                 .subscribe(dto => {
                     this.history = dto;
                 }));
 
-        this.takeOver(
+        this.own(
             this.app.pipe(
                     switchMap(app => this.usagesService.getStorageUsages(app.name, DateTime.today().addDays(-20), DateTime.today())))
                 .subscribe(dtos => {
@@ -166,7 +166,7 @@ export class DashboardPageComponent extends ResourceOwner implements OnInit {
                     };
                 }));
 
-        this.takeOver(
+        this.own(
             this.app.pipe(
                     switchMap(app => this.usagesService.getCallsUsages(app.name, DateTime.today().addDays(-20), DateTime.today())))
                 .subscribe(dtos => {

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

@@ -68,7 +68,7 @@ export class SchemaPageComponent extends ResourceOwner implements OnDestroy, OnI
     public ngOnInit() {
         this.patternsState.load().pipe(onErrorResumeNext()).subscribe();
 
-        this.takeOver(
+        this.own(
             this.schemasState.selectedSchema
                 .subscribe(schema => {
                     if (schema) {
@@ -92,8 +92,7 @@ export class SchemaPageComponent extends ResourceOwner implements OnDestroy, OnI
     }
 
     public trackByField(index: number, field: FieldDto) {
-        const a = this;
+        return field.fieldId + this.schema.id;
-        return field.fieldId + a.schema.id;
     }
 
     public deleteSchema() {

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts

@@ -57,14 +57,14 @@ export class NumberUIComponent extends ResourceOwner implements OnInit {
             this.editForm.controls['editor'].valueChanges.pipe(
                 startWith(this.properties.editor), map(x => !(x && (x === 'Input' || x === 'Dropdown'))));
 
-        this.takeOver(
+        this.own(
             this.hideAllowedValues.subscribe(isSelection => {
                 if (isSelection) {
                     this.editForm.controls['allowedValues'].setValue(undefined);
                 }
             }));
 
-        this.takeOver(
+        this.own(
             this.hideInlineEditable.subscribe(isSelection => {
                 if (isSelection) {
                     this.editForm.controls['inlineEditable'].setValue(false);

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.ts

@@ -54,14 +54,14 @@ export class StringUIComponent extends ResourceOwner implements OnInit {
             this.editForm.controls['editor'].valueChanges.pipe(
                 startWith(this.properties.editor), map(x => !(x && (x === 'Input' || x === 'Dropdown' || x === 'Slug'))));
 
-        this.takeOver(
+        this.own(
             this.hideAllowedValues.subscribe(isSelection => {
                 if (isSelection) {
                     this.editForm.controls['allowedValues'].setValue(undefined);
                 }
             }));
 
-        this.takeOver(
+        this.own(
             this.hideInlineEditable.subscribe(isSelection => {
                 if (isSelection) {
                     this.editForm.controls['inlineEditable'].setValue(false);

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.ts

@@ -82,7 +82,7 @@ export class StringValidationComponent extends ResourceOwner implements OnDestro
         this.showPatternMessage =
             this.editForm.controls['pattern'].value && this.editForm.controls['pattern'].value.trim().length > 0;
 
-        this.takeOver(
+        this.own(
             this.editForm.controls['pattern'].valueChanges
                 .subscribe((value: string) => {
                     if (!value || value.length === 0) {

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

@@ -47,7 +47,7 @@ export class SchemasPageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.messageBus.of(SchemaCloning)
                 .subscribe(m => {
                     this.import = m.schema;
@@ -55,7 +55,7 @@ export class SchemasPageComponent extends ResourceOwner implements OnInit {
                     this.addSchemaDialog.show();
                 }));
 
-        this.takeOver(
+        this.own(
             this.route.params.pipe(map(q => q['showDialog']))
                 .subscribe(showDialog => {
                     if (showDialog) {

src/Squidex/app/features/settings/pages/backups/backups-page.component.ts

@@ -32,7 +32,7 @@ export class BackupsPageComponent extends ResourceOwner implements OnInit {
     public ngOnInit() {
         this.backupsState.load().pipe(onErrorResumeNext()).subscribe();
 
-        this.takeOver(
+        this.own(
             timer(3000, 3000).pipe(switchMap(() => this.backupsState.load(true, true).pipe(onErrorResumeNext())))
                 .subscribe());
     }

src/Squidex/app/features/settings/pages/languages/languages-page.component.ts

@@ -34,7 +34,7 @@ export class LanguagesPageComponent extends ResourceOwner implements OnInit {
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.languagesState.newLanguages
                 .subscribe(languages => {
                     if (languages.length > 0) {

src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts

@@ -29,12 +29,12 @@ export class IgnoreScrollbarDirective extends ResourceOwner implements OnInit, A
             this.parent = this.renderer.parentNode(this.element.nativeElement);
         }
 
-        this.takeOver(
+        this.own(
             this.renderer.listen(this.element.nativeElement, 'resize', () => {
                 this.reposition();
             }));
 
-        this.takeOver(timer(100, 100).subscribe(() => this.reposition));
+        this.own(timer(100, 100).subscribe(() => this.reposition));
     }
 
     public ngAfterViewInit() {

src/Squidex/app/framework/angular/image-source.directive.ts

@@ -50,7 +50,7 @@ export class ImageSourceDirective extends ResourceOwner implements OnChanges, On
             this.parent = this.renderer.parentNode(this.element.nativeElement);
         }
 
-        this.takeOver(
+        this.own(
             this.renderer.listen(this.parent, 'resize', () => {
                 this.resize();
             }));

src/Squidex/app/framework/angular/modals/modal-dialog.component.ts

@@ -21,7 +21,7 @@ interface State {
     animations: [
         fadeAnimation
     ],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.Default
 })
 export class ModalDialogComponent extends StatefulComponent<State> implements AfterViewInit {
     @Input()

src/Squidex/app/framework/angular/modals/modal-target.directive.ts

@@ -49,17 +49,17 @@ export class ModalTargetDirective extends ResourceOwner implements AfterViewInit
         if (this.target) {
             this.targetElement = this.target;
 
-            this.takeOver(
+            this.own(
                 this.renderer.listen(this.targetElement, 'resize', () => {
                     this.updatePosition();
                 }));
 
-            this.takeOver(
+            this.own(
                 this.renderer.listen(this.element.nativeElement, 'resize', () => {
                     this.updatePosition();
                 }));
 
-            this.takeOver(timer(100, 100).subscribe(() => this.updatePosition()));
+            this.own(timer(100, 100).subscribe(() => this.updatePosition()));
         }
     }
 

src/Squidex/app/framework/angular/modals/modal-view.directive.ts

@@ -6,19 +6,22 @@
  */
 
 import { Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 import {
     DialogModel,
     ModalModel,
-    ResourceOwner,
     Types
 } from '@app/framework/internal';
 
 import { RootViewComponent } from './root-view.component';
+
 @Directive({
     selector: '[sqxModalView]'
 })
-export class ModalViewDirective extends ResourceOwner implements OnChanges, OnDestroy {
+export class ModalViewDirective implements OnChanges, OnDestroy {
+    private subscription: Subscription | null = null;
+    private documentClickListener: Function | null = null;
     private renderedView: EmbeddedViewRef<any> | null = null;
 
     @Input('sqxModalView')
@@ -39,11 +42,11 @@ export class ModalViewDirective extends ResourceOwner implements OnChanges, OnDe
         private readonly viewContainer: ViewContainerRef,
         private readonly rootView: RootViewComponent
     ) {
-        super();
     }
 
     public ngOnDestroy() {
-        super.ngOnDestroy();
+        this.unsubscribeToModal();
+        this.unsubscribeToClick();
 
         if (Types.is(this.modalView, DialogModel) || Types.is(this.modalView, ModalModel)) {
             this.modalView.hide();
@@ -55,13 +58,13 @@ export class ModalViewDirective extends ResourceOwner implements OnChanges, OnDe
             return;
         }
 
-        super.ngOnDestroy();
+        this.unsubscribeToModal();
 
         if (Types.is(this.modalView, DialogModel) || Types.is(this.modalView, ModalModel)) {
-            this.takeOver(
+            this.subscription =
                 this.modalView.isOpen.subscribe(isOpen => {
                     this.update(isOpen);
-                }));
+                });
         } else {
             this.update(!!this.modalView);
         }
@@ -92,7 +95,7 @@ export class ModalViewDirective extends ResourceOwner implements OnChanges, OnDe
 
             this.renderedView = null;
 
-            super.ngOnDestroy();
+            this.unsubscribeToClick();
         }
     }
 
@@ -105,7 +108,7 @@ export class ModalViewDirective extends ResourceOwner implements OnChanges, OnDe
             return;
         }
 
-        this.takeOver(
+        this.documentClickListener =
             this.renderer.listen('document', 'click', (event: MouseEvent) => {
                 if (!event.target || this.renderedView === null) {
                     return;
@@ -133,6 +136,20 @@ export class ModalViewDirective extends ResourceOwner implements OnChanges, OnDe
                         return;
                     }
                 }
-            }));
+            });
+    }
+
+    private unsubscribeToModal() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+
+    private unsubscribeToClick() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+        }
     }
 }

src/Squidex/app/framework/angular/panel.component.ts

@@ -31,6 +31,9 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     @Input()
     public desiredWidth = '10rem';
 
+    @Input()
+    public minWidth?: string;
+
     @Input()
     public isBlank = false;
 
@@ -84,6 +87,7 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
             this.styleWidth = size;
 
             this.renderer.setStyle(this.panel.nativeElement, 'width', size);
+            this.renderer.setStyle(this.panel.nativeElement, 'minWidth', this.minWidth);
             this.renderWidth = this.panel.nativeElement.offsetWidth;
         }
     }

src/Squidex/app/framework/angular/routers/parent-link.directive.ts

@@ -29,7 +29,7 @@ export class ParentLinkDirective extends ResourceOwner implements OnDestroy, OnI
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.route.url.subscribe(() => {
                 this.url = this.isLazyLoaded ?
                     this.router.createUrlTree(['.'], { relativeTo: this.route.parent!.parent }).toString() :

src/Squidex/app/framework/angular/stateful.component.ts

@@ -19,7 +19,7 @@ declare type UnsubscribeFunction = () => void;
 export class ResourceOwner implements OnDestroy {
     private subscriptions: (Subscription | UnsubscribeFunction)[] = [];
 
-    public takeOver<T>(subscription: Subscription | UnsubscribeFunction | Observable<T>) {
+    public own<T>(subscription: Subscription | UnsubscribeFunction | Observable<T>) {
         if (subscription) {
             if (Types.isFunction(subscription['subscribe'])) {
                 const observable = <Observable<T>>subscription;
@@ -66,7 +66,7 @@ export abstract class StatefulComponent<T = any> extends State<T> implements OnD
     }
 
     public takeOver<R>(subscription: Subscription | UnsubscribeFunction | Observable<R>) {
-        this.subscriptions.takeOver(subscription);
+        this.subscriptions.own(subscription);
     }
 }
 

src/Squidex/app/framework/angular/user-report.component.ts

@@ -32,7 +32,7 @@ export class UserReportComponent extends ResourceOwner implements OnDestroy, OnI
         window['_urq'] = window['_urq'] || [];
         window['_urq'].push(['initSite', this.config.siteId]);
 
-        this.takeOver(
+        this.own(
             timer(4000).subscribe(() => {
                 this.resourceLoader.loadScript('https://cdn.userreport.com/userreport.js');
             }));

src/Squidex/app/framework/utils/version.spec.ts

@@ -13,6 +13,13 @@ describe('Version', () => {
 
         expect(version.value).toBe('1.0');
     });
+
+    it('should ignore prefix for equal comparison', () => {
+        expect(new Version('2').eq(new Version('2'))).toBeTruthy();
+        expect(new Version('2').eq(new Version('W/2'))).toBeTruthy();
+        expect(new Version('W/2').eq(new Version('2'))).toBeTruthy();
+        expect(new Version('W/2').eq(new Version('W/2'))).toBeTruthy();
+    });
 });
 
 describe('Versioned', () => {

src/Squidex/app/framework/utils/version.ts

@@ -10,6 +10,18 @@ export class Version {
         public readonly value: string
     ) {
     }
+
+    public eq(other: Version) {
+        return other && other.trimmed() === this.trimmed();
+    }
+
+    private trimmed(): string {
+        if (this.value.startsWith('W/')) {
+            return this.value.substr(2);
+        } else {
+            return this.value;
+        }
+    }
 }
 
 export class Versioned<T> {

src/Squidex/app/shared/components/comments.component.ts

@@ -50,7 +50,7 @@ export class CommentsComponent extends ResourceOwner implements OnDestroy, OnIni
     public ngOnInit() {
         this.state = new CommentsState(this.appsState, this.commentsId, this.commentsService, this.dialogs);
 
-        this.takeOver(
+        this.own(
             timer(0, 4000).pipe(switchMap(() => this.state.load().pipe(onErrorResumeNext())))
                 .subscribe());
     }

src/Squidex/app/shared/components/permission.directive.ts

@@ -44,14 +44,14 @@ export class PermissionDirective extends ResourceOwner implements OnChanges, OnI
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.appsState.selectedApp.subscribe(app => {
                 if (app && !this.app) {
                     this.update(app, this.schemasState.snapshot.selectedSchema);
                 }
             }));
 
-        this.takeOver(
+        this.own(
             this.schemasState.selectedSchema.subscribe(schema => {
                 if (schema && !this.schema) {
                     this.update(this.appsState.snapshot.selectedApp, schema);

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

@@ -162,12 +162,12 @@ export class ContentsService {
                 pretifyError('Failed to load content. Please reload.'));
     }
 
-    public getVersionData(appName: string, schemaName: string, id: string, version: Version): Observable<any> {
+    public getVersionData(appName: string, schemaName: string, id: string, version: Version): Observable<Versioned<any>> {
         const url = this.apiUrl.buildUrl(`/api/content/${appName}/${schemaName}/${id}/${version.value}`);
 
         return HTTP.getVersioned<any>(this.http, url).pipe(
                 map(response => {
-                    return response.payload.body;
+                    return new Versioned(response.version, response.payload.body);
                 }),
                 pretifyError('Failed to load data. Please reload.'));
     }

src/Squidex/app/shared/state/contents.state.ts

@@ -301,7 +301,8 @@ export abstract class ContentsStateBase extends State<Snapshot> {
     }
 
     public loadVersion(content: ContentDto, version: Version): Observable<Versioned<any>> {
-        return this.contentsService.getVersionData(this.appName, this.schemaName, content.id, version).pipe(notify(this.dialogs));
+        return this.contentsService.getVersionData(this.appName, this.schemaName, content.id, version).pipe(
+            notify(this.dialogs));
     }
 
     private get appName() {

src/Squidex/app/shell/pages/internal/internal-area.component.ts

@@ -34,7 +34,7 @@ export class InternalAreaComponent extends ResourceOwner implements OnDestroy, O
     }
 
     public ngOnInit() {
-        this.takeOver(
+        this.own(
             this.route.queryParams.subscribe(params => {
                 const successMessage = params['successMessage'];
 

src/Squidex/app/theme/icomoon/demo-files/demo.css

@@ -147,10 +147,10 @@ p {
   font-size: 16px;
 }
 .fs1 {
-  font-size: 28px;
+  font-size: 24px;
 }
 .fs2 {
-  font-size: 24px;
+  font-size: 28px;
 }
 .fs3 {
   font-size: 24px;

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

@@ -9,11 +9,174 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;113)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;114)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-arrow_back">
+                
+                </span>
+                <span class="mls"> icon-arrow_back</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e96e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe96e;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-external-link">
+                
+                </span>
+                <span class="mls"> icon-external-link</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e96d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe96d;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-minus-square">
+                
+                </span>
+                <span class="mls"> icon-minus-square</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e969" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe969;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-plus-square">
+                
+                </span>
+                <span class="mls"> icon-plus-square</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e968" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe968;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-drag2">
+                
+                </span>
+                <span class="mls"> icon-drag2</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e961" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe961;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-comments">
+                
+                </span>
+                <span class="mls"> icon-comments</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e95f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe95f;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-backup">
+                
+                </span>
+                <span class="mls"> icon-backup</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e95b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe95b;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-support">
+                
+                </span>
+                <span class="mls"> icon-support</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e95a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe95a;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-control-RichText">
+                
+                </span>
+                <span class="mls"> icon-control-RichText</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" 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 fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-download">
+                
+                </span>
+                <span class="mls"> icon-download</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93e;" 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: 14</h1>
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-clone">
                 
@@ -29,7 +192,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-control-Tags">
                 
@@ -45,7 +208,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-control-Checkboxes">
                 
@@ -61,7 +224,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-control-Html">
                 
@@ -77,7 +240,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-single-content">
                 
@@ -93,7 +256,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-multiple-content">
                 
@@ -109,7 +272,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-type-Array">
                 
@@ -125,7 +288,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-exclamation">
                 
@@ -141,7 +304,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-orleans">
                 
@@ -157,7 +320,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-document-lock">
                 
@@ -173,7 +336,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-document-unpublish">
                 
@@ -189,7 +352,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-angle-down">
                 
@@ -205,7 +368,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-angle-left">
                 
@@ -221,7 +384,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-angle-right">
                 
@@ -237,7 +400,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-angle-up">
                 
@@ -253,7 +416,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-api">
                 
@@ -269,7 +432,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-assets">
                 
@@ -285,7 +448,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-bug">
                 
@@ -301,7 +464,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-caret-down">
                 
@@ -317,7 +480,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-caret-left">
                 
@@ -333,7 +496,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-caret-right">
                 
@@ -349,7 +512,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-caret-up">
                 
@@ -365,7 +528,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-contents">
                 
@@ -381,7 +544,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-trigger-ContentChanged">
                 
@@ -397,7 +560,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-control-Date">
                 
@@ -413,7 +576,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-control-DateTime">
                 
@@ -429,7 +592,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-control-Markdown">
                 
@@ -445,7 +608,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-grid">
                 
@@ -461,7 +624,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-list1">
                 
@@ -477,7 +640,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-user-o">
                 
@@ -493,7 +656,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-rules">
                 
@@ -510,153 +673,6 @@
             </div>
         </div>
     </div>
-    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
-        <div class="glyph fs2">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-external-link">
-                
-                </span>
-                <span class="mls"> icon-external-link</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e96d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe96d;" 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-minus-square">
-                
-                </span>
-                <span class="mls"> icon-minus-square</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e969" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe969;" 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-plus-square">
-                
-                </span>
-                <span class="mls"> icon-plus-square</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e968" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe968;" 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-drag2">
-                
-                </span>
-                <span class="mls"> icon-drag2</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e961" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe961;" 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-comments">
-                
-                </span>
-                <span class="mls"> icon-comments</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e95f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe95f;" 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-backup">
-                
-                </span>
-                <span class="mls"> icon-backup</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e95b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe95b;" 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-support">
-                
-                </span>
-                <span class="mls"> icon-support</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e95a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe95a;" 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-RichText">
-                
-                </span>
-                <span class="mls"> icon-control-RichText</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e939" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe939;" 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-download">
-                
-                </span>
-                <span class="mls"> icon-download</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e93e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe93e;" 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: 16</h1>
         <div class="glyph fs3">

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

@@ -117,6 +117,7 @@
 <glyph unicode="&#xe96b;" glyph-name="caret-bottom" horiz-adv-x="585" d="M585.143 411.443c0-9.728-3.986-18.871-10.862-25.71l-256-256c-6.839-6.839-16.018-10.862-25.71-10.862s-18.871 3.986-25.71 10.862l-256 256c-6.839 6.839-10.862 16.018-10.862 25.71 0 20.005 16.567 36.571 36.571 36.571h512c20.005 0 36.571-16.567 36.571-36.571zM585.143 740.557c0-9.728-3.986-18.871-10.862-25.71l-256-256c-6.839-6.839-16.018-10.862-25.71-10.862s-18.871 3.986-25.71 10.862l-256 256c-6.839 6.839-10.862 16.018-10.862 25.71 0 20.005 16.567 36.571 36.571 36.571h512c20.005 0 36.571-16.567 36.571-36.571z" />
 <glyph unicode="&#xe96c;" glyph-name="caret-top" horiz-adv-x="585" d="M585.143 155.423c0-20.005-16.567-36.571-36.571-36.571h-512c-20.005 0-36.571 16.567-36.571 36.571 0 9.728 3.986 18.871 10.862 25.71l256 256c6.839 6.839 16.018 10.862 25.71 10.862s18.871-3.986 25.71-10.862l256-256c6.839-6.839 10.862-16.018 10.862-25.71zM585.143 484.577c0-20.005-16.567-36.571-36.571-36.571h-512c-20.005 0-36.571 16.567-36.571 36.571 0 9.728 3.986 18.871 10.862 25.71l256 256c6.839 6.839 16.018 10.862 25.71 10.862s18.871-3.986 25.71-10.862l256-256c6.839-6.839 10.862-16.018 10.862-25.71z" />
 <glyph unicode="&#xe96d;" glyph-name="external-link" d="M768 426.667c-25.6 0-42.667-17.067-42.667-42.667v-256c0-25.6-17.067-42.667-42.667-42.667h-469.333c-25.6 0-42.667 17.067-42.667 42.667v469.333c0 25.6 17.067 42.667 42.667 42.667h256c25.6 0 42.667 17.067 42.667 42.667s-17.067 42.667-42.667 42.667h-256c-72.533 0-128-55.467-128-128v-469.333c0-72.533 55.467-128 128-128h469.333c72.533 0 128 55.467 128 128v256c0 25.6-17.067 42.667-42.667 42.667zM934.4 827.734c-4.267 8.533-12.8 17.067-21.333 21.333-4.267 4.267-12.8 4.267-17.067 4.267h-256c-25.6 0-42.667-17.067-42.667-42.667s17.067-42.667 42.667-42.667h153.6l-396.8-396.8c-17.067-17.067-17.067-42.667 0-59.733 8.533-8.533 17.067-12.8 29.867-12.8s21.333 4.267 29.867 12.8l396.8 396.8v-153.6c0-25.6 17.067-42.667 42.667-42.667s42.667 17.067 42.667 42.667v256c0 4.267 0 12.8-4.267 17.067z" />
+<glyph unicode="&#xe96e;" glyph-name="arrow_back" d="M854 468.667v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list1" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />

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

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?5u1xcq');
+  src:  url('fonts/icomoon.eot?rs9se1');
-  src:  url('fonts/icomoon.eot?5u1xcq#iefix') format('embedded-opentype'),
+  src:  url('fonts/icomoon.eot?rs9se1#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?5u1xcq') format('truetype'),
+    url('fonts/icomoon.ttf?rs9se1') format('truetype'),
-    url('fonts/icomoon.woff?5u1xcq') format('woff'),
+    url('fonts/icomoon.woff?rs9se1') format('woff'),
-    url('fonts/icomoon.svg?5u1xcq#icomoon') format('svg');
+    url('fonts/icomoon.svg?rs9se1#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,36 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-arrow_back:before {
+  content: "\e96e";
+}
+.icon-external-link:before {
+  content: "\e96d";
+}
+.icon-minus-square:before {
+  content: "\e969";
+}
+.icon-plus-square:before {
+  content: "\e968";
+}
+.icon-drag2:before {
+  content: "\e961";
+}
+.icon-comments:before {
+  content: "\e95f";
+}
+.icon-backup:before {
+  content: "\e95b";
+}
+.icon-support:before {
+  content: "\e95a";
+}
+.icon-control-RichText:before {
+  content: "\e939";
+}
+.icon-download:before {
+  content: "\e93e";
+}
 .icon-clone:before {
   content: "\e96a";
 }
@@ -117,33 +147,6 @@
 .icon-rules:before {
   content: "\e947";
 }
-.icon-external-link:before {
-  content: "\e96d";
-}
-.icon-minus-square:before {
-  content: "\e969";
-}
-.icon-plus-square:before {
-  content: "\e968";
-}
-.icon-drag2:before {
-  content: "\e961";
-}
-.icon-comments:before {
-  content: "\e95f";
-}
-.icon-backup:before {
-  content: "\e95b";
-}
-.icon-support:before {
-  content: "\e95a";
-}
-.icon-control-RichText:before {
-  content: "\e939";
-}
-.icon-download:before {
-  content: "\e93e";
-}
 .icon-caret-bottom:before {
   content: "\e96b";
 }