Temp

src/Squidex/app-libs/icomoon/fonts/icomoon.svg

@@ -7,6 +7,7 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe5cd;" glyph-name="close" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
 <glyph unicode="&#xe900;" glyph-name="logo" d="M512.34 939.52c-0.174-0.065-226.41-96.5-283.902-294.74-5.545-19.035 40.453-10.673 38.399-31.6-2.517-25.409-55.264-35.821-48.385-108.78 7.001-74.289 74.617-149.342 84.791-194.72v-31.78c-0.615-9.802-5.639-36.405-22.285-49.4-9.13-7.105-21.442-9.661-37.671-7.78-22.528 2.612-31.493 16.604-35.078 27.9-5.881 18.616-0.409 40.331 12.793 50.52 13.271 10.243 15.084 28.513 4.029 40.82-11.055 12.296-30.785 13.965-44.056 3.7-32.168-24.839-45.65-70.615-32.785-111.34 12.146-38.328 44.789-64.147 87.363-69.080 6.067-0.699 11.848-1.040 17.335-1.040 32.945 0 55.27 11.669 68.785 22.32 40.671 32.105 43.867 85.623 44.099 91.62 0.011 0.355 0.022 0.705 0.022 1.060v24.36h0.129v1.64c0 14.177 12.394 25.66 27.707 25.66 14.869 0 26.889-10.843 27.578-24.46v-232.2c-0.255-3.343-3.155-34.297-22.157-49.28-9.118-7.201-21.512-9.802-37.799-7.9-22.54 2.612-31.526 16.605-35.099 27.88-5.893 18.627-0.387 40.341 12.814 50.52 13.271 10.254 15.062 28.523 4.007 40.84-11.044 12.274-30.764 13.945-44.035 3.68-32.191-24.828-45.65-70.615-32.785-111.34 12.122-38.328 44.789-64.136 87.363-69.080 6.067-0.699 11.848-1.040 17.335-1.040 32.945 0 55.262 11.669 68.742 22.32 40.683 32.105 43.879 85.623 44.099 91.62 0.024 0.376 0.042 0.696 0.042 1.040v259l0.129 0.060v1.14c0 14.456 12.65 26.18 28.264 26.18 15.288 0 27.657-11.292 28.135-25.36v-261.020c0-0.355-0.002-0.675 0.022-1.040 0.232-5.987 3.438-59.515 44.121-91.62 13.504-10.652 35.819-22.32 68.764-22.32 5.499 0 11.258 0.341 17.314 1.040 42.562 4.944 75.24 30.763 87.363 69.080 12.876 40.725-0.584 86.501-32.764 111.34-13.294 10.265-33.013 8.584-44.056-3.68-11.055-12.328-9.264-30.586 4.007-40.84 13.201-10.179 18.697-31.893 12.793-50.52-3.561-11.275-12.55-25.268-35.078-27.88-16.217-1.892-28.531 0.675-37.649 7.78-16.716 13.038-21.715 39.783-22.307 49.36v231.8c0.445 13.816 12.612 24.9 27.642 24.9 15.313 0 27.707-11.472 27.707-25.66v-1.64h0.085v-24.36c0-0.365-0.002-0.716 0.022-1.060 0.22-5.987 3.438-59.515 44.121-91.62 13.503-10.651 35.818-22.32 68.763-22.32 5.487 0 11.259 0.332 17.314 1.020 42.562 4.933 75.24 30.783 87.363 69.1 12.876 40.725-0.606 86.49-32.785 111.34-13.294 10.254-33.003 8.576-44.035-3.72-11.067-12.307-9.285-30.557 3.986-40.8 13.201-10.189 18.719-31.904 12.814-50.52-3.561-11.296-12.571-25.299-35.099-27.9-16.194-1.892-28.51 0.686-37.628 7.78-16.716 13.048-21.727 39.785-22.307 49.34v24.24c6.634 62.066 78.084 123.637 85.499 202.32 6.844 72.959-45.943 83.371-48.449 108.78-2.065 20.927 43.943 12.565 38.421 31.6-57.503 198.24-283.718 294.675-283.88 294.74z" />
 <glyph unicode="&#xe901;" glyph-name="plus" d="M810 384.667h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
 <glyph unicode="&#xe905;" glyph-name="pencil" d="M864 960c88.364 0 160-71.634 160-160 0-36.020-11.91-69.258-32-96l-64-64-224 224 64 64c26.742 20.090 59.978 32 96 32zM64 224l-64-288 288 64 592 592-224 224-592-592zM715.578 596.422l-448-448-55.156 55.156 448 448 55.156-55.156z" />

src/Squidex/app-libs/icomoon/selection.json

@@ -1,6 +1,62 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "close"
+        ],
+        "defaultCode": 58829,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "order": 16,
+        "ligatures": "clear, close",
+        "id": 157,
+        "prevSize": 24,
+        "code": 58829,
+        "name": "close"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 157
+    },
+    {
+      "icon": {
+        "paths": [
+          "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "add"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1,
+        "id": 0,
+        "prevSize": 24,
+        "code": 59649,
+        "name": "plus"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 11
+    },
     {
       "icon": {
         "paths": [
@@ -26,9 +82,9 @@
         "prevSize": 32,
         "code": 59653
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 0
     },
     {
       "icon": {
@@ -59,9 +115,9 @@
         "prevSize": 32,
         "code": 59662
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 1
     },
     {
       "icon": {
@@ -91,9 +147,9 @@
         "prevSize": 32,
         "code": 59685
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 2
     },
     {
       "icon": {
@@ -123,9 +179,9 @@
         "prevSize": 32,
         "code": 59692
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 3
     },
     {
       "icon": {
@@ -151,9 +207,9 @@
         "prevSize": 32,
         "code": 59694
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -180,9 +236,9 @@
         "prevSize": 32,
         "code": 59713
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 65
+      "iconIdx": 5
     },
     {
       "icon": {
@@ -211,9 +267,9 @@
         "prevSize": 32,
         "code": 59725
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 77
+      "iconIdx": 6
     },
     {
       "icon": {
@@ -244,9 +300,9 @@
         "prevSize": 32,
         "code": 59796
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 148
+      "iconIdx": 7
     },
     {
       "icon": {
@@ -275,9 +331,9 @@
         "prevSize": 32,
         "code": 59814
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 166
+      "iconIdx": 8
     },
     {
       "icon": {
@@ -308,9 +364,9 @@
         "prevSize": 32,
         "code": 59820
       },
-      "setIdx": 0,
+      "setIdx": 1,
-      "setId": 2,
+      "setId": 1,
-      "iconIdx": 172
+      "iconIdx": 9
     },
     {
       "icon": {
@@ -336,38 +392,9 @@
         "prevSize": 32,
         "code": 59995
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 347
-    },
-    {
-      "icon": {
-        "paths": [
-          "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
-        ],
-        "attrs": [
-          {}
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "add"
-        ],
-        "grid": 24
-      },
-      "attrs": [
-        {}
-      ],
-      "properties": {
-        "order": 1,
-        "id": 0,
-        "prevSize": 24,
-        "code": 59649,
-        "name": "plus"
-      },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 10
     },
     {
       "icon": {
@@ -398,9 +425,9 @@
         "prevSize": 32,
         "code": 59648
       },
-      "setIdx": 2,
+      "setIdx": 1,
-      "setId": 0,
+      "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 12
     }
   ],
   "height": 1024,

src/Squidex/app-libs/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?qb9mo3');
+  src:  url('fonts/icomoon.eot?sylov9');
-  src:  url('fonts/icomoon.eot?qb9mo3#iefix') format('embedded-opentype'),
+  src:  url('fonts/icomoon.eot?sylov9#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?qb9mo3') format('truetype'),
+    url('fonts/icomoon.ttf?sylov9') format('truetype'),
-    url('fonts/icomoon.woff?qb9mo3') format('woff'),
+    url('fonts/icomoon.woff?sylov9') format('woff'),
-    url('fonts/icomoon.svg?qb9mo3#icomoon') format('svg');
+    url('fonts/icomoon.svg?sylov9#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-close:before {
+  content: "\e5cd";
+}
+.icon-plus:before {
+  content: "\e901";
+}
 .icon-pencil:before {
   content: "\e905";
 }
@@ -57,9 +63,6 @@
 .icon-filter:before {
   content: "\ea5b";
 }
-.icon-plus:before {
-  content: "\e901";
-}
 .icon-logo:before {
   content: "\e900";
 }

src/Squidex/app/components/internal/app/settings/client.component.html

@@ -15,12 +15,14 @@
                 <div class="client-name">
                     <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm"  (submit)="rename()">
                         <div class="form-group">
-                            <input type="text" class="form-control" formControlName="name" sqxFocusOnInit />
+                            <input type="text" class="form-control" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" />
                         </div>
 
                         <button type="submit" class="btn btn-primary">Save</button>
 
-                        <a class="btn btn-default" (click)="cancelRename()">Cancel</a>
+                        <a class="btn btn-default btn-cancel" (click)="cancelRename()">
+                            <i class="icon-close"></i>
+                        </a>
                     </form>
 
                     <h3 *ngIf="!isRenaming">

src/Squidex/app/components/internal/app/settings/client.component.scss

@@ -34,6 +34,14 @@
                 display: inline-block;
             }
         }
+
+        h3 {
+            font-size: 1.6rem;
+        }
+
+        .form-control {
+            width: 250px;
+        }
     }
 }
 

src/Squidex/app/components/internal/app/settings/client.component.ts

@@ -15,6 +15,8 @@ import {
     ModalView
 } from 'shared';
 
+const ESCAPE_KEY = 27;
+
 @Ng2.Component({
     selector: 'sqx-client',
     styles,
@@ -23,7 +25,7 @@ import {
         fadeAnimation
     ]
 })
-export class ClientComponent implements Ng2.OnChanges {
+export class ClientComponent {
     public isRenaming = false;
 
     public appClientToken: AccessTokenDto;
@@ -61,7 +63,7 @@ export class ClientComponent implements Ng2.OnChanges {
     ) {
     }
 
-    public ngOnChanges() {
+    public resetForm() {
         this.renameForm.controls['name'].setValue(this.clientName);
     }
 
@@ -70,12 +72,24 @@ export class ClientComponent implements Ng2.OnChanges {
     }
 
     public startRename() {
+        this.resetForm();
+
         this.isRenaming = true;
     }
 
+    public onKeyDown(keyCode: number) {
+        if (keyCode === ESCAPE_KEY) {
+            this.cancelRename();
+        }
+    }
+
     public rename() {
         try {
-            this.renamed.emit(this.renameForm.controls['name'].value);
+            const newName = this.renameForm.controls['name'].value;
+
+            if (newName !== this.clientName) {
+                this.renamed.emit();
+            }
         } finally {
             this.isRenaming = false;
         }

src/Squidex/app/components/internal/app/settings/clients-page.component.html

@@ -36,7 +36,7 @@
                     </div>
 
                     <div class="form-group">
-                        <input type="text" class="form-control" id="app-name" formControlName="name" placeholder="Enter client name" />
+                        <input type="text" class="form-control" id="app-name" formControlName="name" maxlength="40" placeholder="Enter client name" />
                     </div>
 
                     <button type="submit" class="btn btn-success" [disabled]="createForm.invalid">Add Client</button>

src/Squidex/app/framework/angular/drag-model.directive.ts

@@ -20,7 +20,7 @@ export class DragModelDirective {
     private mouseUpSubscription: Function | null;
     private clonedElement: HTMLElement | null;
 
-    @Ng2.Input('gpDragMsqxDragModelodel')
+    @Ng2.Input('sqxDragModel')
     public model: any;
 
     constructor(

src/Squidex/app/framework/angular/focus-on-change.directive.ts

@@ -12,7 +12,10 @@ import * as Ng2 from '@angular/core';
 })
 export class FocusOnChangeDirective implements Ng2.OnChanges {
     @Ng2.Input()
-    public gpFocusOnChange: any;
+    public sqxFocusOnChange: any;
+
+    @Ng2.Input()
+    public select: boolean;
 
     constructor(
         private readonly elementRef: Ng2.ElementRef,
@@ -23,7 +26,10 @@ export class FocusOnChangeDirective implements Ng2.OnChanges {
     public ngOnChanges(changes: { [key: string]: Ng2.SimpleChange }) {
         setTimeout(() => {
             this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
+
+            if (this.select) {
                 this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'select', []);
+            }
         }, 100);
     }
 }

src/Squidex/app/framework/angular/focus-on-init.directive.ts

@@ -12,7 +12,7 @@ import * as Ng2 from '@angular/core';
 })
 export class FocusOnInitDirective implements Ng2.OnInit {
     @Ng2.Input()
-    public gpFocusOnChange: any;
+    public select: boolean;
 
     constructor(
         private readonly elementRef: Ng2.ElementRef,
@@ -23,7 +23,10 @@ export class FocusOnInitDirective implements Ng2.OnInit {
     public ngOnInit() {
         setTimeout(() => {
             this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
+
+            if (this.select) {
                 this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'select', []);
+            }
         });
     }
 }

src/Squidex/app/theme/_bootstrap.scss

@@ -211,6 +211,12 @@
     }
 }
 
+.btn-cancel {
+    padding: .2rem;
+    font-size: 1.5rem;
+    font-weight: normal;
+}
+
 .btn-link {
     &.btn-danger {
         @include link-button($color-theme-error);

src/Squidex/app/theme/_layout.scss

@@ -43,7 +43,8 @@ h1 {
     &-right {
         background: $sidebar-color;
         position: relative;
-        width: 220px;
+        min-width: 220px;
+        max-width: 220px;
     }
 
     &-right {