Small improvements

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

@@ -72,6 +72,8 @@ $field-header: #e7ebef;
             cursor: pointer;
             padding: 18px 10px;
             border-bottom: 4px solid transparent;
+            width: 100px;
+            text-align: center;
         }
 
         &.active {

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

@@ -31,8 +31,8 @@ export class FieldComponent implements OnInit {
     @Output()
     public saved = new EventEmitter<FieldDto>();
 
-    public isEditing: boolean = true;
-    public selectedTab = 2;
+    public isEditing: boolean = false;
+    public selectedTab = 0;
 
     public editForm: FormGroup =
         this.formBuilder.group({
@@ -78,7 +78,7 @@ export class FieldComponent implements OnInit {
     }
 
     public toggleEditing() {
-        this.isEditing = true;
+        this.isEditing = !this.isEditing;
     }
 
     public selectTab(tab: number) {
@@ -99,6 +99,8 @@ export class FieldComponent implements OnInit {
         }
 
         this.oldValue = Object.assign({}, this.editForm.value);
+
+        this.isEditing = false;
     }
 }
 

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

@@ -5,9 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 import { fadeAnimation, FloatConverter } from 'shared';
 
@@ -19,7 +19,9 @@ import { fadeAnimation, FloatConverter } from 'shared';
         fadeAnimation
     ]
 })
-export class NumberUIComponent implements OnInit {
+export class NumberUIComponent implements OnDestroy, OnInit {
+    private editorSubscription: Subscription;
+
     @Input()
     public editForm: FormGroup;
 
@@ -43,5 +45,16 @@ export class NumberUIComponent implements OnInit {
             Observable.of(false)
                 .merge(this.editForm.get('editor').valueChanges)
                 .map(x => !x || x === 'Input' || x === 'Textarea');
+
+        this.editorSubscription =
+            this.hideAllowedValues.subscribe(isSelection => {
+                if (isSelection) {
+                    this.editForm.get('allowedValues').setValue(undefined);
+                }
+            });
+    }
+
+    public ngOnDestroy() {
+        this.editorSubscription.unsubscribe();
     }
 }

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

@@ -5,9 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 import { fadeAnimation } from 'shared';
 
@@ -19,7 +19,9 @@ import { fadeAnimation } from 'shared';
         fadeAnimation
     ]
 })
-export class StringUIComponent implements OnInit {
+export class StringUIComponent implements OnDestroy, OnInit {
+    private editorSubscription: Subscription;
+
     @Input()
     public editForm: FormGroup;
 
@@ -41,5 +43,16 @@ export class StringUIComponent implements OnInit {
             Observable.of(false)
                 .merge(this.editForm.get('editor').valueChanges)
                 .map(x => !x || x === 'Input' || x === 'Textarea');
+
+        this.editorSubscription =
+            this.hideAllowedValues.subscribe(isSelection => {
+                if (isSelection) {
+                    this.editForm.get('allowedValues').setValue(undefined);
+                }
+            });
+    }
+
+    public ngOnDestroy() {
+        this.editorSubscription.unsubscribe();
     }
 }

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

@@ -5,16 +5,18 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 @Component({
     selector: 'sqx-string-validation',
     styleUrls: ['string-validation.component.scss'],
     templateUrl: 'string-validation.component.html'
 })
-export class StringValidationComponent implements OnInit {
+export class StringValidationComponent implements OnDestroy, OnInit {
+    private patternSubscription: Subscription;
+
     @Input()
     public editForm: FormGroup;
 
@@ -42,5 +44,16 @@ export class StringValidationComponent implements OnInit {
             Observable.of(false)
                 .merge(this.editForm.get('pattern').valueChanges)
                 .map(x => !x || x.trim().length === 0);
+
+        this.patternSubscription =
+            this.editForm.get('pattern').valueChanges.subscribe((value: string) => {
+                if (!value || value.length === 0) {
+                    this.editForm.get('patternMessage').setValue(undefined);
+                }
+            });
+    }
+
+    public ngOnDestroy() {
+        this.patternSubscription.unsubscribe();
     }
 }

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

@@ -12,7 +12,7 @@
                     <button class="btn btn-default" (click)="createToken(client)">Create Token</button>
                 </div>
 
-                <div class="client-name">
+                <div class="client-header">
                     <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm"  (ngSubmit)="rename()">
                         <div class="form-group">
                             <div class="errors-box" *ngIf="renameForm.controls.name.invalid" [@fade]>
@@ -23,7 +23,7 @@
                                 </div>
                             </div>
                             
-                            <input type="text" class="form-control" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" />
+                            <input type="text" class="form-control client-name enabled" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" />
                         </div>
 
                         <button type="submit" class="btn btn-primary" [disabled]="!renameForm.valid">Save</button>
@@ -33,9 +33,13 @@
                         </a>
                     </form>
 
-                    <h3 *ngIf="!isRenaming">
-                        <span (dblclick)="startRename()">{{client.name}}</span> <i class="client-edit icon-pencil" (click)="startRename()"></i>
-                    </h3>
+                    <span *ngIf="!isRenaming">
+                        <h3 class="client-name">
+                            <span (dblclick)="startRename()">{{client.name}}</span> 
+                        </h3>
+
+                        <i class="client-edit icon-pencil" (click)="startRename()"></i>
+                    </span>
                 </div>
                     
                 <div class="client-expires">Expires: {{client.expiresUtc}}</div>

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

@@ -1,6 +1,8 @@
 @import '_vars';
 @import '_mixins';
 
+$color-editor: #eceeef;
+
 .client {
     &-info {
         margin: 0;
@@ -21,17 +23,28 @@
         font-weight: normal;
         padding: .6rem .3rem;
         background: transparent;
-        vertical-align: top;
+        vertical-align: baseline;
     }
 
     &-name {
         & {
-            height: 40px;
+            @include border-radius(.25rem);
+            margin: 0;
+            margin-left: -.6rem;
+            height: 38px;
+            padding: 0 .6rem;
+            border: 0;
+            background: transparent;
+            font-size: 1.2rem;
+            font-weight: normal;
+            display: inline-block;
+            line-height: 38px;
         }
 
+        &.enabled,
         &:hover {
-            .client-edit {
-                display: inline-block;
+            & {
+                background: $color-editor;
             }
         }
 
@@ -39,6 +52,14 @@
             font-size: 1.6rem;
         }
     }
+
+    &-header {
+        &:hover {
+            .client-edit {
+                display: inline-block;
+            }
+        }
+    }
 }
 
 .access-token {