UI improved.

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

@@ -5,112 +5,106 @@
     
     <span class="field-disabled" *ngIf="field.isDisabled">Disabled</span>
 
-    <div [formGroup]="fieldForm">
-        <div *ngIf="field.isLocalizable && languages.length > 1">
-            <div class="languages-buttons" #buttonLanguages>
-                <sqx-language-selector size="sm" (selectedLanguageChanged)="selectLanguage($event)" [languages]="languages"></sqx-language-selector>
-            </div>
-
-            <sqx-onboarding-tooltip id="languages" [for]="buttonLanguages" position="topRight" after="120000">
-                Please remember to check all languages when you see validation errors.
-            </sqx-onboarding-tooltip>
+    <div *ngIf="field.isLocalizable && languages.length > 1">
+        <div class="languages-buttons" #buttonLanguages>
+            <sqx-language-selector size="sm" (selectedLanguageChanged)="selectLanguage($event)" [languages]="languages"></sqx-language-selector>
         </div>
 
-        <div *ngFor="let partition of fieldPartitions">
-            <div *ngIf="partition == fieldPartition">
-                <sqx-control-errors [for]="partition" fieldName="{{field.displayName}}" [submitted]="contentFormSubmitted"></sqx-control-errors>
+        <sqx-onboarding-tooltip id="languages" [for]="buttonLanguages" position="topRight" after="120000">
+            Please remember to check all languages when you see validation errors.
+        </sqx-onboarding-tooltip>
+    </div>
 
-                <div [ngSwitch]="field.properties.fieldType">
-                    <div *ngSwitchCase="'Number'">
-                        <div [ngSwitch]="field.properties.editor">
-                            <div *ngSwitchCase="'Input'">
-                                <input class="form-control" type="number" [formControlName]="partition" [placeholder]="field.displayPlaceholder" />
-                            </div>
-                            <div *ngSwitchCase="'Stars'">
-                                <sqx-stars [formControlName]="partition" [maximumStars]="field.properties.maxValue"></sqx-stars>
-                            </div>
-                            <div *ngSwitchCase="'Dropdown'">
-                                <select class="form-control" [formControlName]="partition">
-                                    <option [ngValue]="null"></option>
-                                    <option *ngFor="let value of field.properties.allowedValues" [ngValue]="value">{{value}}</option>
-                                </select>
-                            </div>
-                            <div *ngSwitchCase="'Radio'">
-                                <div class="form-check form-check-inline" *ngFor="let value of field.properties.allowedValues">
-                                    <input class="form-check-input" type="radio" [value]="value" [formControlName]="partition" />
-                                    <label class="form-check-label">
-                                        {{value}}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div *ngSwitchCase="'String'">
-                        <div [ngSwitch]="field.properties.editor">
-                            <div *ngSwitchCase="'Input'">
-                                <input class="form-control" type="text" [formControlName]="partition" [placeholder]="field.displayPlaceholder" />
-                            </div>
-                            <div *ngSwitchCase="'Slug'">
-                                <input class="form-control" type="text" [formControlName]="partition" [placeholder]="field.displayPlaceholder" sqxSlugifyInput />
-                            </div>
-                            <div *ngSwitchCase="'TextArea'">
-                                <textarea class="form-control" [formControlName]="partition" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
-                            </div>
-                            <div *ngSwitchCase="'RichText'">
-                                <sqx-rich-editor [formControlName]="partition" (assetPluginClicked)="assetPluginClicked()"></sqx-rich-editor>
-                            </div>
-                            <div *ngSwitchCase="'Markdown'">
-                                <sqx-markdown-editor [formControlName]="partition" (assetPluginClicked)="assetPluginClicked()"></sqx-markdown-editor>
-                            </div>
-                            <div *ngSwitchCase="'Dropdown'">
-                                <select class="form-control" [formControlName]="partition">
-                                    <option [ngValue]="null"></option>
-                                    <option *ngFor="let value of field.properties.allowedValues" [ngValue]="value">{{value}}</option>
-                                </select>
-                            </div>
-                            <div *ngSwitchCase="'Radio'">
-                                <div class="form-check form-check-inline" *ngFor="let value of field.properties.allowedValues">
-                                    <input class="form-check-input" type="radio" value="{{value}}" [formControlName]="partition" />
-                                    <label class="form-check-label">
-                                         {{value}}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div *ngSwitchCase="'Boolean'">
-                        <div [ngSwitch]="field.properties.editor">
-                            <div *ngSwitchCase="'Toggle'">
-                                <sqx-toggle [formControlName]="partition"></sqx-toggle>
-                            </div>
-                            <div *ngSwitchCase="'Checkbox'">
-                                <div class="form-check form-check-inline">
-                                    <input class="form-check-input" type="checkbox" [formControlName]="partition" sqxIndeterminateValue />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div *ngSwitchCase="'DateTime'">
-                        <sqx-date-time-editor enforceTime="true" [mode]="field.properties.editor" [formControlName]="partition"></sqx-date-time-editor>
-                    </div>
-                    <div *ngSwitchCase="'Geolocation'">
-                        <sqx-geolocation-editor [formControlName]="partition"></sqx-geolocation-editor>
-                    </div>
-                    <div *ngSwitchCase="'Json'">
-                        <sqx-json-editor [formControlName]="partition"></sqx-json-editor>
-                    </div>
-                    <div *ngSwitchCase="'Assets'">
-                        <sqx-assets-editor [formControlName]="partition"></sqx-assets-editor>
+    <sqx-control-errors [for]="selectedFormControl" [fieldName]="field.displayName" [submitted]="contentFormSubmitted"></sqx-control-errors>
+
+    <div [ngSwitch]="field.properties.fieldType">
+        <div *ngSwitchCase="'Number'">
+            <div [ngSwitch]="field.properties.editor">
+                <div *ngSwitchCase="'Input'">
+                    <input class="form-control" type="number" [formControl]="selectedFormControl" [placeholder]="field.displayPlaceholder" />
+                </div>
+                <div *ngSwitchCase="'Stars'">
+                    <sqx-stars [formControl]="selectedFormControl" [maximumStars]="field.properties.maxValue"></sqx-stars>
+                </div>
+                <div *ngSwitchCase="'Dropdown'">
+                    <select class="form-control" [formControl]="selectedFormControl">
+                        <option [ngValue]="null"></option>
+                        <option *ngFor="let value of field.properties.allowedValues" [ngValue]="value">{{value}}</option>
+                    </select>
+                </div>
+                <div *ngSwitchCase="'Radio'">
+                    <div class="form-check form-check-inline" *ngFor="let value of field.properties.allowedValues">
+                        <input class="form-check-input" type="radio" [value]="value" [formControl]="selectedFormControl" />
+                        <label class="form-check-label">
+                            {{value}}
+                        </label>
                     </div>
-                    <div *ngSwitchCase="'Tags'">
-                        <sqx-tag-editor [formControlName]="partition"></sqx-tag-editor>
+                </div>
+            </div>
+        </div>
+        <div *ngSwitchCase="'String'">
+            <div [ngSwitch]="field.properties.editor">
+                <div *ngSwitchCase="'Input'">
+                    <input class="form-control" type="text" [formControl]="selectedFormControl" [placeholder]="field.displayPlaceholder" />
+                </div>
+                <div *ngSwitchCase="'Slug'">
+                    <input class="form-control" type="text" [formControl]="selectedFormControl" [placeholder]="field.displayPlaceholder" sqxSlugifyInput />
+                </div>
+                <div *ngSwitchCase="'TextArea'">
+                    <textarea class="form-control"  [id]="selectedFormName"[formControl]="selectedFormControl" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
+                </div>
+                <div *ngSwitchCase="'RichText'">
+                    <sqx-rich-editor [formControl]="selectedFormControl" (assetPluginClicked)="assetPluginClicked()"></sqx-rich-editor>
+                </div>
+                <div *ngSwitchCase="'Markdown'">
+                    <sqx-markdown-editor [formControl]="selectedFormControl" (assetPluginClicked)="assetPluginClicked()"></sqx-markdown-editor>
+                </div>
+                <div *ngSwitchCase="'Dropdown'">
+                    <select class="form-control" [formControl]="selectedFormControl">
+                        <option [ngValue]="null"></option>
+                        <option *ngFor="let value of field.properties.allowedValues" [ngValue]="value">{{value}}</option>
+                    </select>
+                </div>
+                <div *ngSwitchCase="'Radio'">
+                    <div class="form-check form-check-inline" *ngFor="let value of field.properties.allowedValues">
+                        <input class="form-check-input" type="radio" value="{{value}}" [formControl]="selectedFormControl" />
+                        <label class="form-check-label">
+                                {{value}}
+                        </label>
                     </div>
-                    <div *ngSwitchCase="'References'">
-                        <sqx-references-editor [formControlName]="partition" [language]="selectedLanguage" [schemaId]="field.properties.schemaId"></sqx-references-editor>
+                </div>
+            </div>
+        </div>
+        <div *ngSwitchCase="'Boolean'">
+            <div [ngSwitch]="field.properties.editor">
+                <div *ngSwitchCase="'Toggle'">
+                    <sqx-toggle [formControl]="selectedFormControl"></sqx-toggle>
+                </div>
+                <div *ngSwitchCase="'Checkbox'">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" [formControl]="selectedFormControl" sqxIndeterminateValue />
                     </div>
                 </div>
             </div>
         </div>
+        <div *ngSwitchCase="'DateTime'">
+            <sqx-date-time-editor enforceTime="true" [mode]="field.properties.editor" [formControl]="selectedFormControl"></sqx-date-time-editor>
+        </div>
+        <div *ngSwitchCase="'Geolocation'">
+            <sqx-geolocation-editor [formControl]="selectedFormControl"></sqx-geolocation-editor>
+        </div>
+        <div *ngSwitchCase="'Json'">
+            <sqx-json-editor [formControl]="selectedFormControl"></sqx-json-editor>
+        </div>
+        <div *ngSwitchCase="'Assets'">
+            <sqx-assets-editor [formControl]="selectedFormControl"></sqx-assets-editor>
+        </div>
+        <div *ngSwitchCase="'Tags'">
+            <sqx-tag-editor [formControl]="selectedFormControl"></sqx-tag-editor>
+        </div>
+        <div *ngSwitchCase="'References'">
+            <sqx-references-editor [formControl]="selectedFormControl" [language]="selectedLanguage" [schemaId]="field.properties.schemaId"></sqx-references-editor>
+        </div>
     </div>
 
     <small class="form-text text-muted" *ngIf="field.properties.hints && field.properties.hints.length > 0">

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

@@ -6,10 +6,14 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { AbstractControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { AppLanguageDto, FieldDto } from 'shared';
+import {
+    AppLanguageDto,
+    FieldDto,
+    fieldInvariant
+} from 'shared';
 
 @Component({
     selector: 'sqx-content-field',
@@ -29,7 +33,7 @@ export class ContentFieldComponent implements OnInit {
     @Input()
     public contentFormSubmitted: boolean;
 
-    public selectedFormControl: string;
+    public selectedFormControl: AbstractControl;
     public selectedLanguage: AppLanguageDto;
 
     constructor(
@@ -39,23 +43,21 @@ export class ContentFieldComponent implements OnInit {
     }
 
     public ngOnInit() {
-        if (this.field.isDisabled) {
-            this.fieldForm.disable();
-        }
-
-        const masterLanguage = this.languages.find(l => l.isMaster)!;
+        const masterLanguage = this.languages[0];
 
         if (this.field.isLocalizable) {
-            this.selectedFormControl = masterLanguage.iso2Code;
+            this.selectedFormControl = this.fieldForm.controls[masterLanguage.iso2Code];
         } else {
-            this.selectedFormControl = 'iv';
+            this.selectedFormControl = this.fieldForm.controls[fieldInvariant];
         }
 
         this.selectedLanguage = masterLanguage;
     }
 
     public selectLanguage(language: AppLanguageDto) {
-        this.selectedFormControl = language.iso2Code;
+        this.selectedFormControl['_clearChangeFns']();
+
+        this.selectedFormControl = this.fieldForm.controls[language.iso2Code];
         this.selectedLanguage = language;
     }
 

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

@@ -28,7 +28,7 @@
     &-left {
         min-width: 2.8rem;
         max-width: 2.8rem;
-        margin-top: .3rem;
+        margin-top: .25rem;
     }
 
     &-created {

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

@@ -25,6 +25,7 @@ import {
     CanComponentDeactivate,
     ContentDto,
     ContentsService,
+    fieldInvariant,
     SchemaDetailsDto,
     Version
 } from 'shared';
@@ -106,8 +107,7 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
 
         const routeData = allData(this.ctx.route);
 
-        this.languages = routeData.appLanguages;
-
+        this.setupLanguages(routeData);
         this.setupContentForm(routeData.schema);
 
         this.ctx.route.data.map(d => d.content)
@@ -171,7 +171,7 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
 
                         this.ctx.notifyInfo('Content saved successfully.');
 
-                        this.emitContentUpdated(this.content);
+                        this.emitContentUpdated(content);
                         this.enableContentForm();
                         this.reloadContentForm(content);
                     }, error => {
@@ -226,32 +226,44 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
         if (this.schema.fields.length === 0) {
             this.contentForm.enable();
         } else {
-            for (const field of this.schema.fields.filter(f => !f.isDisabled)) {
-                this.contentForm.controls[field.name].enable();
+            for (const field of this.schema.fields) {
+                const fieldForm = <FormGroup>this.contentForm.controls[field.name];
+
+                if (field.isDisabled) {
+                    fieldForm.disable();
+                } else {
+                    fieldForm.enable();
+                }
             }
         }
     }
 
+    private setupLanguages(routeData: { [name: string]: any; }) {
+        this.languages = routeData.appLanguages;
+    }
+
     private setupContentForm(schema: SchemaDetailsDto) {
         this.schema = schema;
 
         const controls: { [key: string]: AbstractControl } = {};
 
         for (const field of schema.fields) {
-            const group = new FormGroup({});
+            const fieldForm = new FormGroup({});
 
             if (field.isLocalizable) {
                 for (let language of this.languages) {
-                    group.setControl(language.iso2Code, new FormControl(undefined, field.createValidators(language.isOptional)));
+                    fieldForm.setControl(language.iso2Code, new FormControl(undefined, field.createValidators(language.isOptional)));
                 }
             } else {
-                group.setControl('iv', new FormControl(undefined, field.createValidators(false)));
+                fieldForm.setControl(fieldInvariant, new FormControl(undefined, field.createValidators(false)));
             }
 
-            controls[field.name] = group;
+            controls[field.name] = fieldForm;
         }
 
         this.contentForm = new FormGroup(controls);
+
+        this.enableContentForm();
     }
 
     private reloadContentForm(content: ContentDto) {
@@ -263,14 +275,14 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
         if (!this.isNewMode) {
             for (const field of this.schema.fields) {
                 const fieldValue = this.content.data[field.name] || {};
-                const fieldForm = <FormGroup>this.contentForm.get(field.name);
+                const fieldForm = <FormGroup>this.contentForm.controls[field.name];
 
-                if (field.partitioning === 'language') {
+                if (field.isLocalizable) {
                     for (let language of this.languages) {
                         fieldForm.controls[language.iso2Code].setValue(fieldValue[language.iso2Code]);
                     }
                 } else {
-                    fieldForm.controls['iv'].setValue(fieldValue['iv'] === undefined ? null : fieldValue['iv']);
+                    fieldForm.controls[fieldInvariant].setValue(fieldValue[fieldInvariant] === undefined ? null : fieldValue[fieldInvariant]);
                 }
             }
             if (this.content.status === 'Archived') {
@@ -279,14 +291,16 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
         } else {
             for (const field of this.schema.fields) {
                 const defaultValue = field.defaultValue();
+
                 if (defaultValue) {
-                    const fieldForm = <FormGroup>this.contentForm.get(field.name);
-                    if (field.partitioning === 'language') {
+                    const fieldForm = <FormGroup>this.contentForm.controls[field.name];
+
+                    if (field.isLocalizable) {
                         for (let language of this.languages) {
                             fieldForm.controls[language.iso2Code].setValue(defaultValue);
                         }
                     } else {
-                        fieldForm.controls['iv'].setValue(defaultValue);
+                        fieldForm.controls[fieldInvariant].setValue(defaultValue);
                     }
                 }
             }

src/Squidex/app/features/content/shared/content-item.component.html

@@ -39,8 +39,8 @@
             </div>
             <div *ngSwitchCase="'Boolean'">
                 <div [ngSwitch]="field.properties.editor">
-                    <div *ngSwitchCase="'Toggle'" [formControlName]="field.name">
-                        <sqx-toggle></sqx-toggle>
+                    <div *ngSwitchCase="'Toggle'">
+                        <sqx-toggle [formControlName]="field.name"></sqx-toggle>
                     </div>
                     <div *ngSwitchCase="'Checkbox'">
                         <div class="form-check form-check-inline">

src/Squidex/app/features/content/shared/content-item.component.ts

@@ -15,6 +15,7 @@ import {
     ContentsService,
     fadeAnimation,
     FieldDto,
+    fieldInvariant,
     ModalView,
     SchemaDto,
     Types,
@@ -122,10 +123,10 @@ export class ContentItemComponent implements OnInit, OnChanges {
                 if (field.properties['inlineEditable']) {
                     const value = this.form.controls[field.name].value;
 
-                    if (field.partitioning === 'invariant') {
-                        request[field.name] = { iv: value };
-                    } else {
+                    if (field.isLocalizable) {
                         request[field.name] = { [this.language.iso2Code]: value };
+                    } else {
+                        request[field.name] = { iv: value };
                     }
                 }
             }
@@ -176,10 +177,10 @@ export class ContentItemComponent implements OnInit, OnChanges {
         const contentField = this.content.data[field.name];
 
         if (contentField) {
-            if (field.partitioning === 'language') {
+            if (field.isLocalizable) {
                 return contentField[this.language.iso2Code];
             } else {
-                return contentField['iv'];
+                return contentField[fieldInvariant];
             }
         }
 

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

@@ -53,7 +53,7 @@
 
 .table {
     & {
-        margin-bottom: -.3rem;
+        margin-bottom: -.25rem;
         margin-top: 1rem;
     }
 

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

@@ -136,7 +136,7 @@
     &-left {
         min-width: 2.8rem;
         max-width: 2.8rem;
-        margin-top: .3rem;
+        margin-top: .25rem;
     }
 
     &-created {

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

@@ -6,7 +6,7 @@
                     <i class="field-icon icon-type-{{field.properties.fieldType}}"></i> 
 
                     <span [class.field-hidden]="field.isHidden" [attr.title]="field.isHidden ? 'Hidden Field' : 'Visible Field'">{{displayName}}</span>
-                    <span class="field-partitioning" *ngIf="field.partitioning === 'language'">localizable</span>
+                    <span class="field-partitioning" *ngIf="field.isLocalizable">localizable</span>
                 </span>
             </div>
             <div class="col col-tags">

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

@@ -25,7 +25,7 @@
         color: $color-border-dark;
         font-size: .9rem;
         font-weight: normal;
-        padding: .6rem .3rem;
+        padding: .6rem .25rem;
         border: 0;
         background: transparent;
         vertical-align: baseline;

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

@@ -43,7 +43,7 @@ $button-size: calc(2.5rem - 2px);
         @include truncate;
         display: inline-block;
         background: $color-dark2-control;
-        padding: .1rem .3rem;
+        padding: .1rem .25rem;
         font-size: .8rem;
         font-weight: normal;
         margin-left: 10px;

src/Squidex/app/features/settings/pages/clients/client.component.scss

@@ -23,7 +23,7 @@ $color-editor: #eceeef;
         display: none;
         font-size: .9rem;
         font-weight: normal;
-        padding: .6rem .3rem;
+        padding: .6rem .25rem;
         border: 0;
         background: transparent;
         vertical-align: baseline;

src/Squidex/app/framework/angular/control-errors.component.ts

@@ -41,7 +41,7 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
     private originalMarkAsTouched: any;
 
     @Input()
-    public for: string;
+    public for: string | AbstractControl;
 
     @Input()
     public fieldName: string;
@@ -61,9 +61,6 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
         @Optional() @Host() private readonly formGroupDirective: FormGroupDirective,
         private readonly changeDetector: ChangeDetectorRef
     ) {
-        if (!this.formGroupDirective) {
-            throw new Error('control-errors must be used with a parent formGroup directive');
-        }
     }
 
     public ngOnDestroy() {
@@ -74,10 +71,20 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
         if (this.fieldName) {
             this.displayFieldName = this.fieldName;
         } else if (this.for) {
-            this.displayFieldName = this.for.substr(0, 1).toUpperCase() + this.for.substr(1);
+            if (this.for instanceof String) {
+                this.displayFieldName = this.for.substr(0, 1).toUpperCase() + this.for.substr(1);
+            } else {
+                this.displayFieldName = 'field';
+            }
         }
 
-        const control = this.formGroupDirective.form.controls[this.for];
+        let control: AbstractControl | null = null;
+
+        if (typeof this.for === 'string') {
+            control = this.formGroupDirective.form.controls[this.for];
+        } else {
+            control = this.for;
+        }
 
         if (this.control !== control) {
             this.unsubscribe();
@@ -85,8 +92,6 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
             this.control = control;
 
             if (control) {
-                const self = this;
-
                 this.controlSubscription =
                     Observable.merge(control.valueChanges, control.statusChanges)
                         .subscribe(() => {
@@ -95,6 +100,8 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
 
                 this.originalMarkAsTouched = this.control.markAsTouched;
 
+                const self = this;
+
                 this.control['markAsTouched'] = function () {
                     self.originalMarkAsTouched.apply(this, arguments);
 
@@ -119,7 +126,7 @@ export class ControlErrorsComponent implements OnChanges, OnDestroy {
     private createMessages() {
         const errors: string[] = [];
 
-        if (this.control.invalid && ((this.control.touched && !this.submitOnly) || this.submitted) && this.control.errors) {
+        if (this.control && this.control.invalid && ((this.control.touched && !this.submitOnly) || this.submitted) && this.control.errors) {
             for (let key in <any>this.control.errors) {
                 if (this.control.errors.hasOwnProperty(key)) {
                     let message = (this.errors ? this.errors[key] : null) || DEFAULT_ERRORS[key.toLowerCase()];

src/Squidex/app/framework/angular/stars.component.scss

@@ -13,6 +13,7 @@ $color-gold: #ffd700;
         border: 0;
         height: 2.4rem;
         line-height: 2.4rem;
+        vertical-align: middle;
     }
 
     &.disabled {

src/Squidex/app/framework/angular/tag-editor.component.scss

@@ -12,7 +12,7 @@
         display: inline-block;
         color: $color-dark-foreground;
         margin-right: .4rem;
-        margin-bottom: .3rem;
+        margin-bottom: .25rem;
         min-height: 1.6rem;
         padding: 0 .6rem;
         background: $color-theme-blue;

src/Squidex/app/framework/angular/toggle.component.scss

@@ -2,8 +2,8 @@
 @import '_vars';
 
 $toggle-width: 2.2rem;
-$toggle-height: 1.4rem;
-$toggle-button-size: $toggle-height - .3rem;
+$toggle-height: 1.25rem;
+$toggle-button-size: $toggle-height - .25rem;
 
 .toggle {
     &-button {

src/Squidex/app/shared/components/asset.component.scss

@@ -23,7 +23,7 @@
 }
 
 @mixin asset-type {
-    padding: .1rem .3rem;
+    padding: .1rem .25rem;
     text-transform: uppercase;
     font-size: .7rem;
     font-weight: normal;
@@ -62,7 +62,7 @@
     &-text {
         @include absolute(40%, 0, 0, 0);
         text-align: center;
-        font-size: 1.3rem;
+        font-size: 1.25rem;
         font-weight: lighter;
     }
 }

src/Squidex/app/shared/components/history.component.scss

@@ -14,7 +14,7 @@
     &-left {
         min-width: 2.8rem;
         max-width: 2.8rem;
-        margin-top: .3rem;
+        margin-top: .25rem;
     }
 
     &-created {

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

@@ -22,7 +22,6 @@ import {
     Version,
     Versioned
 } from 'framework';
-import { partition } from 'rxjs/operator/partition';
 
 export const fieldTypes: string[] = [
     'Assets',
@@ -36,6 +35,8 @@ export const fieldTypes: string[] = [
     'Tags'
 ];
 
+export const fieldInvariant = 'iv';
+
 export function createProperties(fieldType: string, values: Object | null = null): FieldPropertiesDto {
     let properties: FieldPropertiesDto;
 

src/Squidex/app/theme/_bootstrap.scss

@@ -10,7 +10,7 @@
     & {
         font-size: .9rem;
         font-weight: normal;
-        padding: .3rem .6rem;
+        padding: .25rem .6rem;
     }
 
     &-primary {
@@ -421,7 +421,7 @@ a {
     }
 
     &-header {
-        @include border-radius-top(.3rem);
+        @include border-radius-top(.25rem);
         background: $color-modal-header-background;
         font-size: 1rem;
         font-weight: normal;

src/Squidex/app/theme/_forms.scss

@@ -48,7 +48,7 @@
         font-size: .9rem;
         font-weight: normal;
         line-height: 1.1rem;
-        padding: .3rem .4rem;
+        padding: .25rem .4rem;
         padding-bottom: .5rem;
         background: $color-theme-error;
     }
@@ -100,7 +100,7 @@
         max-height: 15rem;
         border: 1px solid $color-input-border;
         background: $color-dark-foreground;
-        padding: .3rem 0;
+        padding: .25rem 0;
         overflow-y: auto;
     }
 

src/Squidex/app/theme/_lists.scss

@@ -177,7 +177,7 @@
     // Spacer item between two normal items, because table rows cannot have margins.
     .spacer {
         border: 0;
-        height: .3rem;
+        height: .25rem;
     }
 }
 

src/Squidex/app/theme/_static.scss

@@ -109,7 +109,7 @@ noscript {
 
         &-icon {
             display: inline-block;
-            font-size: 1.3rem;
+            font-size: 1.25rem;
             font-weight: normal;
             vertical-align: middle;
             width: 1.6rem;