UI updated.

src/Squidex/Areas/Api/Controllers/Content/ContentsController.cs

@@ -290,11 +290,11 @@ namespace Squidex.Areas.Api.Controllers.Contents
         {
             Instant? dt = null;
 
-            if (string.IsNullOrWhiteSpace(dueTime))
+            if (!string.IsNullOrWhiteSpace(dueTime))
             {
                 var parseResult = InstantPattern.General.Parse(dueTime);
 
-                if (!parseResult.Success)
+                if (parseResult.Success)
                 {
                     dt = parseResult.Value;
                 }

src/Squidex/Areas/Api/Controllers/Content/Models/ContentDto.cs

@@ -43,17 +43,17 @@ namespace Squidex.Areas.Api.Controllers.Contents.Models
         /// <summary>
         /// The scheduled status.
         /// </summary>
-        public Status? ScheduledTo { get; }
+        public Status? ScheduledTo { get; set; }
 
         /// <summary>
         /// The scheduled date.
         /// </summary>
-        public Instant? ScheduledAt { get; }
+        public Instant? ScheduledAt { get; set; }
 
         /// <summary>
         /// The user that has scheduled the content.
         /// </summary>
-        public RefToken ScheduledBy { get; }
+        public RefToken ScheduledBy { get; set; }
 
         /// <summary>
         /// The date and time when the content item has been created.

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

@@ -87,10 +87,10 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
                         this.content =
                             this.content.changeStatus(
                                 message.content.scheduledTo || message.content.status,
+                                message.content.scheduledAt,
                                 message.content.lastModifiedBy,
                                 message.content.version,
-                                message.content.lastModified,
-                                message.content.scheduledAt);
+                                message.content.lastModified);
                     }
                 });
 

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

@@ -92,25 +92,25 @@
             </div>
 
             <div class="selection" *ngIf="selectionCount > 0">
-                {{selectionCount}} items selected:
+                {{selectionCount}} items selected:&nbsp;&nbsp;
 
-                <button class="btn btn-link btn-secondary" (click)="publishSelected()" *ngIf="canPublish">
+                <button class="btn btn-secondary" (click)="publishSelected()" *ngIf="canPublish">
                     Publish
                 </button>
                 
-                <button class="btn btn-link btn-secondary" (click)="unpublishSelected()" *ngIf="canUnpublish">
-                    Unublish
+                <button class="btn btn-secondary" (click)="unpublishSelected()" *ngIf="canUnpublish">
+                    Unpublish
                 </button>
                 
-                <button class="btn btn-link btn-secondary" (click)="archiveSelected()" *ngIf="!isArchive">
+                <button class="btn btn-secondary" (click)="archiveSelected()" *ngIf="!isArchive">
                     Archive
                 </button>
                 
-                <button class="btn btn-link btn-secondary" (click)="restoreSelected()" *ngIf="isArchive">
+                <button class="btn btn-secondary" (click)="restoreSelected()" *ngIf="isArchive">
                     Restore
                 </button>
                 
-                <button class="btn btn-link btn-danger"
+                <button class="btn btn-danger"
                     (sqxConfirmClick)="deleteSelected()"
                     confirmTitle="Delete content" 
                     confirmText="Do you really want to delete the selected content items?">
@@ -168,4 +168,40 @@
     </div>
 </sqx-panel>
 
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
+
+<div class="modal" *sqxModalView="dueTimeDialog;onRoot:true">
+    <div class="modal-backdrop"></div>
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{dueTimeAction}} content items</h4>
+            </div>
+
+            <div class="modal-body">
+                <div class="form-check">
+                    <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately">
+                    <label class="form-check-label" for="immediately">
+                        {{dueTimeAction}} content items immediately.
+                    </label>
+                </div>
+
+                <div class="form-check">
+                    <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled">
+                    <label class="form-check-label" for="scheduled">
+                        {{dueTimeAction}} content items at a later point date and time.
+                    </label>
+                </div>
+
+                <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" mode="DateTime" hideClear="true" [(ngModel)]="dueTime"></sqx-date-time-editor>
+            </div>
+
+            <div class="modal-footer">
+                <div class="clearfix">
+                    <button type="button" class="float-left btn btn-secondary" (click)="cancelStatusChange()">Cancel</button>
+                    <button type="button" class="float-right btn btn-primary" [disabled]="dueTimeMode === 'Scheduled' && !dueTime" (click)="confirmStatusChange()">Confirm</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -52,6 +52,12 @@ export class ContentsPageComponent implements OnDestroy, OnInit {
     public contentsQuery = '';
     public contentsPager = new Pager(0);
 
+    public dueTimeDialog = new ModalView();
+    public dueTime: string | null = '';
+    public dueTimeFunction: Function | null;
+    public dueTimeAction: string | null = '';
+    public dueTimeMode = 'Immediately';
+
     public selectedItems:  { [id: string]: boolean; } = {};
     public selectionCount = 0;
 
@@ -118,85 +124,90 @@ export class ContentsPageComponent implements OnDestroy, OnInit {
     }
 
     public publishContent(content: ContentDto) {
-        this.changeContentItem(content, 'publish', 'Published').subscribe();
+        this.changeContentItems([content], 'Publish', 'Published', false);
     }
 
-    public publishSelected() {
-        Observable.forkJoin(
-            this.contentItems.values
-                .filter(c => this.selectedItems[c.id])
-                .filter(c => c.status !== 'Published')
-                .map(c => this.changeContentItem(c, 'publish', 'Published')))
-            .finally(() => {
-                this.updateSelectionSummary();
-            })
-            .subscribe();
+    public publishSelected(scheduled: boolean) {
+        const contents = this.contentItems.filter(c => c.status !== 'Published' && this.selectedItems[c.id]).values;
+
+        this.changeContentItems(contents, 'Publish', 'Published', false);
     }
 
     public unpublishContent(content: ContentDto) {
-        this.changeContentItem(content, 'unpublish', 'Draft').subscribe();
+        this.changeContentItems([content], 'Unpublish', 'Draft', false);
     }
 
-    public unpublishSelected() {
-        Observable.forkJoin(
-            this.contentItems.values
-                .filter(c => this.selectedItems[c.id])
-                .filter(c => c.status !== 'Unpublished')
-                .map(c => this.changeContentItem(c, 'unpublish', 'Draft')))
-            .finally(() => {
-                this.updateSelectionSummary();
-            })
-            .subscribe();
+    public unpublishSelected(scheduled: boolean) {
+        const contents = this.contentItems.filter(c => c.status === 'Published' && this.selectedItems[c.id]).values;
+
+        this.changeContentItems(contents, 'Unpublish', 'Draft', false);
     }
 
-    private changeContentItem(content: ContentDto, action: string, status: string): Observable<any> {
-        return this.contentsService.changeContentStatus(this.ctx.appName, this.schema.name, content.id, action, content.version)
-            .catch(error => {
-                this.ctx.notifyError(error);
+    public archiveContent(content: ContentDto) {
+        this.changeContentItems([content], 'Archive', 'Archived', true);
+    }
 
-                return Observable.throw(error);
-            })
-            .do(dto => {
-                this.contentItems = this.contentItems.replaceBy('id', content.changeStatus(status, this.ctx.userToken, dto.version));
+    public archiveSelected(scheduled: boolean) {
+        const contents = this.contentItems.filter(c => this.selectedItems[c.id]).values;
 
-                this.emitContentStatusChanged(content);
-            });
+        this.changeContentItems(contents, 'Archive', 'Archived', true);
     }
 
-    public archiveSelected() {
-        Observable.forkJoin(
-            this.contentItems.values.filter(c => this.selectedItems[c.id])
-                .map(c => this.changeContentItem(c, 'archive', 'Archived')))
-            .finally(() => {
-                this.load();
-            })
-            .subscribe();
+    public restoreContent(content: ContentDto) {
+        this.changeContentItems([content], 'Restore', 'Draft', true);
     }
 
-    public archiveContent(content: ContentDto) {
-        this.changeContentItem(content, 'archive', 'Archived')
-            .finally(() => {
-                this.load();
-            })
-            .subscribe();
+    public restoreSelected(scheduled: boolean) {
+        const contents = this.contentItems.filter(c => this.selectedItems[c.id]).values;
+
+        this.changeContentItems(contents, 'Restore', 'Draft', true);
     }
 
-    public restoreSelected() {
-        Observable.forkJoin(
-            this.contentItems.values.filter(c => this.selectedItems[c.id])
-                .map(c => this.changeContentItem(c, 'restore', 'Draft')))
-            .finally(() => {
-                this.load();
-            })
-            .subscribe();
+    private changeContentItems(contents: ContentDto[], action: string, status: string, reload: boolean) {
+        if (contents.length === 0) {
+            return;
+        }
+
+        this.dueTimeFunction = () => {
+            if (this.dueTime) {
+                reload = false;
+            }
+            Observable.forkJoin(
+                contents
+                    .map(c => this.changeContentItem(c, action, status, this.dueTime, reload)))
+                .finally(() => {
+                    if (reload) {
+                        this.load();
+                    } else {
+                        this.updateSelectionSummary();
+                    }
+                })
+                .subscribe();
+        };
+
+        this.dueTimeAction = action;
+        this.dueTimeDialog.show();
     }
 
-    public restoreContent(content: ContentDto) {
-        this.changeContentItem(content, 'restore', 'Draft')
-            .finally(() => {
-                this.load();
+    private changeContentItem(content: ContentDto, action: string, status: string, dueTime: string | null, reload: boolean): Observable<any> {
+        return this.contentsService.changeContentStatus(this.ctx.appName, this.schema.name, content.id, action, dueTime, content.version)
+            .catch(error => {
+                this.ctx.notifyError(error);
+
+                return Observable.throw(error);
             })
-            .subscribe();
+            .do(dto => {
+                if (!reload) {
+                    const dt =
+                        dueTime ?
+                            DateTime.parseISO_UTC(dueTime) :
+                            null;
+
+                    this.contentItems = this.contentItems.replaceBy('id', content.changeStatus(status, dt, this.ctx.userToken, dto.version));
+
+                    this.emitContentStatusChanged(content);
+                }
+            });
     }
 
     public deleteSelected(content: ContentDto) {
@@ -357,5 +368,18 @@ export class ContentsPageComponent implements OnDestroy, OnInit {
             this.contentFields = [<any>{}];
         }
     }
+
+    public confirmStatusChange() {
+        this.dueTimeFunction!();
+
+        this.cancelStatusChange();
+    }
+
+    public cancelStatusChange() {
+        this.dueTimeMode = 'Immediately';
+        this.dueTimeDialog.hide();
+        this.dueTimeFunction = null;
+        this.dueTime = null;
+    }
 }
 

src/Squidex/app/features/content/pages/messages.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ContentDto, DateTime } from 'shared';
+import { ContentDto } from 'shared';
 
 export class ContentCreated {
     constructor(

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

@@ -10,7 +10,26 @@
     </span>
 </td>
 <td class="cell-time">
-    <span class="item-published" [class.unpublished]="content.status !== 'Published'"></span>
+    <span *ngIf="!content.scheduledTo">
+        <span class="content-status content-status-{{content.status | lowercase}}" (click)="scheduleTooltip.toggle(); $event.stopPropagation()" #statusIcon>
+            <i class="icon-circle"></i>
+        </span>
+    
+        <div class="content-status-tooltip" *sqxModalView="scheduleTooltip" closeAlways="true" [sqxModalTarget]="statusIcon" position="topLeft" @fade>
+            {{content.status}}
+        </div>
+    </span>
+
+    <span *ngIf="content.scheduledTo">
+        <span class="content-status content-status-{{content.scheduledTo | lowercase}}" (click)="scheduleTooltip.toggle(); $event.stopPropagation()" #statusIcon>
+            <i class="icon-clock"></i>
+        </span>
+    
+        <div class="content-status-tooltip" *sqxModalView="scheduleTooltip" closeAlways="true" [sqxModalTarget]="statusIcon" position="topLeft" @fade>
+            Will be set {{content.scheduledTo}} at {{content.scheduledAt | sqxFullDateTime}}
+        </div>
+    </span>
+    
     
     <small class="item-modified">{{content.lastModified | sqxFromNow}}</small>
 </td>

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

@@ -1,22 +1,31 @@
 @import '_vars';
 @import '_mixins';
 
-.content {
+.content-status {
     & {
+        vertical-align: middle;
         cursor: pointer;
     }
 
     &-published {
-        & {
-            @include circle(.5rem);
-            display: inline-block;
-            border: 0;
-            background: $color-theme-green;
-            margin-left: .4rem;
-        }
+        color: $color-theme-green;
+    }
+
+    &-draft {
+        color: $color-text-decent;
+    }
+
+    &-archived {
+        color: $color-theme-error;
+    }
 
-        &.unpublished {
-            background: $color-theme-error;
-        }
+    &-tooltip {
+        @include border-radius;
+        background: $color-tooltip;
+        border: 0;
+        font-size: .9rem;
+        font-weight: normal;
+        color: $color-dark-foreground;
+        padding: .75rem;
     }
 }

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

@@ -46,7 +46,7 @@ export class ContentItemComponent implements OnInit, OnChanges {
     public deleting = new EventEmitter();
 
     @Output()
-    public selectedChange = new EventEmitter<boolean>();
+    public selectedChange = new EventEmitter();
 
     @Input()
     public selected = false;
@@ -74,6 +74,8 @@ export class ContentItemComponent implements OnInit, OnChanges {
 
     public dropdown = new ModalView(false, true);
 
+    public scheduleTooltip = new ModalView(false, true);
+
     public values: any[] = [];
 
     constructor(public readonly ctx: AppContext

src/Squidex/app/features/rules/pages/events/rule-events-page.component.html

@@ -77,7 +77,7 @@
                                         Attempts: {{event.numCalls}}
                                     </div>
                                     <div class="col-3">
-                                        Next: <span *ngIf="event.nextAttempt">{{event.nextAttempt.toStringFormat('MMM DD h:mm:ss a')}}</span>
+                                        Next: <span *ngIf="event.nextAttempt">{{event.nextAttempt | sqxFromNow}}</span>
                                     </div>
                                     <div class="col-3 text-right">
                                         <button class="btn btn-success btn-sm" (click)="enqueueEvent(event)">

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss

@@ -29,10 +29,6 @@
     }
 }
 
-.clearfix {
-    width: 100%;
-}
-
 .rule-element {
     margin-right: .5rem;
 }

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

@@ -7,8 +7,4 @@
 
 .nav-tabs {
     border: 0;
-}
-
-.clearfix {
-    width: 100%;
 }

src/Squidex/app/framework/angular/date-time-editor.component.html

@@ -12,7 +12,7 @@
         <div class="form-group" *ngIf="!showTime">
             <button class="btn btn-secondary" (click)="writeNow()">Today</button>
         </div>
-        <div class="form-group" [class.hidden]="!hasValue">
+        <div class="form-group" [class.hidden]="!hasValue" *ngIf="!hideClear">
             <button class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
         </div>
     </div>

src/Squidex/app/framework/angular/date-time-editor.component.ts

@@ -40,6 +40,9 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy,
     @Input()
     public enforceTime: boolean;
 
+    @Input()
+    public hideClear: boolean;
+
     public timeControl = new FormControl();
 
     public dateControl = new FormControl();
@@ -169,7 +172,7 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy,
         let result: string | null = null;
 
         if ((this.dateValue && !this.dateValue.isValid()) || (this.timeValue && !this.timeValue.isValid())) {
-            result = 'Invalid DateTime';
+            result = null;
         } else if (!this.dateValue && !this.timeValue) {
             result = null;
         } else {

src/Squidex/app/framework/angular/date-time.pipes.spec.ts

@@ -13,6 +13,7 @@ import {
     DayPipe,
     DurationPipe,
     FromNowPipe,
+    FullDateTimePipe,
     MonthPipe,
     ShortDatePipe,
     ShortTimePipe
@@ -33,6 +34,17 @@ describe('DurationPipe', () => {
     });
 });
 
+describe('FullDateTimePipe', () => {
+    it('should format to nice string', () => {
+        const pipe = new FullDateTimePipe();
+
+        const actual = pipe.transform(dateTime);
+        const expected = 'Thursday, October 3, 2013 12:13 PM';
+
+        expect(actual).toBe(expected);
+    });
+});
+
 describe('DayPipe', () => {
     it('should format to day numbers', () => {
         const pipe = new DayPipe();

src/Squidex/app/framework/angular/date-time.pipes.ts

@@ -80,6 +80,16 @@ export class ShortTimePipe implements PipeTransform {
     }
 }
 
+@Pipe({
+    name: 'sqxFullDateTime',
+    pure: true
+})
+export class FullDateTimePipe implements PipeTransform {
+    public transform(value: DateTime): any {
+        return value.toStringFormat('LLLL');
+    }
+}
+
 @Pipe({
     name: 'sqxDuration',
     pure: true

src/Squidex/app/framework/angular/dialog-renderer.component.scss

@@ -29,8 +29,4 @@
     &-bottomleft {
         @include fixed(auto, auto, 0, 0);
     }
-}
-
-.clearfix {
-    width: 100%;
 }

src/Squidex/app/framework/angular/onboarding-tooltip.component.html

@@ -1,5 +1,4 @@
 <div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" @fade>
-
     <div class="onboarding-rect" [sqxModalTarget]="for" [offset]="4" [autoPosition]="false" position="full"></div>
     <div class="onboarding-help" [sqxModalTarget]="for" [offset]="4" [autoPosition]="false" [position]="position">
         <div class="onboarding-text">

src/Squidex/app/framework/angular/onboarding-tooltip.component.scss

@@ -1,12 +1,10 @@
 @import '_mixins';
 @import '_vars';
 
-$color: #1a2129;
-
 .onboarding {
     &-help {
         @include border-radius;
-        background: $color;
+        background: $color-tooltip;
         border: 0;
         max-width: 20rem;
         padding: .75rem;

src/Squidex/app/framework/module.ts

@@ -32,6 +32,7 @@ import {
     FileSizePipe,
     FocusOnInitDirective,
     FromNowPipe,
+    FullDateTimePipe,
     IgnoreScrollbarDirective,
     ImageSourceDirective,
     IndeterminateValueDirective,
@@ -98,6 +99,7 @@ import {
         FileSizePipe,
         FocusOnInitDirective,
         FromNowPipe,
+        FullDateTimePipe,
         IgnoreScrollbarDirective,
         ImageSourceDirective,
         IndeterminateValueDirective,
@@ -148,6 +150,7 @@ import {
         FileSizePipe,
         FocusOnInitDirective,
         FromNowPipe,
+        FullDateTimePipe,
         IgnoreScrollbarDirective,
         ImageSourceDirective,
         IndeterminateValueDirective,

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

@@ -39,7 +39,7 @@ describe('ContentDto', () => {
 
     it('should update status property and user info when changing status', () => {
         const content_1 = new ContentDto('1', 'Draft', creator, creator, creation, creation, null, null, null, { data: 1 }, version);
-        const content_2 = content_1.changeStatus('Published', modifier, newVersion, modified);
+        const content_2 = content_1.changeStatus('Published', null, modifier, newVersion, modified);
 
         expect(content_2.status).toEqual('Published');
         expect(content_2.lastModified).toEqual(modified);
@@ -49,7 +49,7 @@ describe('ContentDto', () => {
 
     it('should update schedules property and user info when changing status with due time', () => {
         const content_1 = new ContentDto('1', 'Draft', creator, creator, creation, creation, null, null, null, { data: 1 }, version);
-        const content_2 = content_1.changeStatus('Published', modifier, newVersion, modified, dueTime);
+        const content_2 = content_1.changeStatus('Published', dueTime, modifier, newVersion, modified);
 
         expect(content_2.status).toEqual('Draft');
         expect(content_2.lastModified).toEqual(modified);
@@ -315,7 +315,7 @@ describe('ContentsService', () => {
     it('should make put request to change content status',
         inject([ContentsService, HttpTestingController], (contentsService: ContentsService, httpMock: HttpTestingController) => {
 
-        contentsService.changeContentStatus('my-app', 'my-schema', 'content1', 'publish', version).subscribe();
+        contentsService.changeContentStatus('my-app', 'my-schema', 'content1', 'publish', null, version).subscribe();
 
         const req = httpMock.expectOne('http://service/p/api/content/my-app/my-schema/content1/publish');
 
@@ -328,11 +328,11 @@ describe('ContentsService', () => {
     it('should make put request with due time when status change is scheduled',
         inject([ContentsService, HttpTestingController], (contentsService: ContentsService, httpMock: HttpTestingController) => {
 
-        const dueTime = DateTime.parseISO_UTC('2016-12-12T10:10');
+        const dueTime = '2016-12-12T10:10:00';
 
-        contentsService.changeContentStatus('my-app', 'my-schema', 'content1', 'publish', version, dueTime).subscribe();
+        contentsService.changeContentStatus('my-app', 'my-schema', 'content1', 'publish', dueTime, version).subscribe();
 
-        const req = httpMock.expectOne('http://service/p/api/content/my-app/my-schema/content1/publish?dueTime=2016-12-12T10:10:00.000Z');
+        const req = httpMock.expectOne('http://service/p/api/content/my-app/my-schema/content1/publish?dueTime=2016-12-12T10:10:00');
 
         expect(req.request.method).toEqual('PUT');
         expect(req.request.headers.get('If-Match')).toEqual(version.value);

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

@@ -59,7 +59,7 @@ export class ContentDto {
             this.version);
     }
 
-    public changeStatus(status: string, user: string, version: Version, now?: DateTime, dueTime: DateTime | null = null): ContentDto {
+    public changeStatus(status: string, dueTime: DateTime | null, user: string, version: Version, now?: DateTime): ContentDto {
         if (dueTime) {
             return new ContentDto(
                 this.id,
@@ -249,11 +249,11 @@ export class ContentsService {
                 .pretifyError('Failed to delete content. Please reload.');
     }
 
-    public changeContentStatus(appName: string, schemaName: string, id: string, action: string, version: Version, dueTime?: DateTime): Observable<Versioned<any>> {
+    public changeContentStatus(appName: string, schemaName: string, id: string, action: string, dueTime: string | null, version: Version): Observable<Versioned<any>> {
         let url = this.apiUrl.buildUrl(`/api/content/${appName}/${schemaName}/${id}/${action}`);
 
         if (dueTime) {
-            url += `?dueTime=${dueTime.toISOString()}`;
+            url += `?dueTime=${dueTime}`;
         }
 
         return HTTP.putVersioned(this.http, url, {}, version)

src/Squidex/app/theme/_bootstrap.scss

@@ -458,6 +458,12 @@ a {
             margin-top: 4.5rem;
         }
     }
+
+    &-footer {
+        .clearfix {
+            width: 100%;
+        }
+    }
 }
 
 // 

src/Squidex/app/theme/_lists.scss

@@ -27,6 +27,10 @@
         }
     }
 
+    td {
+        border-top: 0;
+    }
+
     thead {
         // Small font size for the table header, content is more important!
         th {

src/Squidex/app/theme/_panels.scss

@@ -289,15 +289,24 @@
 
     .grid-content {
         @include flex-grow(1);
-        margin: 0;
-        margin-top: .25rem;
+        padding-top: .5rem;
+        padding-bottom: .5rem;
         overflow-y: scroll;
     }
 
     .grid-header {
-        padding-top: .75 * $panel-padding;
-        border: 0;
-        border-bottom: 2px solid $color-border;
+        & {
+            border: 0;
+            border-bottom: 2px solid $color-border;
+        }
+
+        th {
+            padding: .7rem;
+        }
+
+        .table-items {
+            margin: 0;
+        }
     }
 
     .grid-footer {
@@ -305,6 +314,6 @@
     }
 
     .pagination {
-        margin-top: .25rem;
+        margin: .25rem 0;
     }
 }

src/Squidex/app/theme/_vars.scss

@@ -6,6 +6,7 @@ $color-border-dark:         #b3bbbf;
 $color-title:               #000;
 $color-text:                #373a3c;
 $color-text-decent:         #a9b2bb;
+$color-tooltip:             #1a2129;
 
 $color-input:               #dbe4eb;
 $color-input-background:    #fff;

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

@@ -150,10 +150,10 @@ p {
   font-size: 32px;
 }
 .fs2 {
-  font-size: 28px;
+  font-size: 32px;
 }
 .fs3 {
-  font-size: 32px;
+  font-size: 28px;
 }
 .fs4 {
   font-size: 32px;

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

@@ -9,10 +9,26 @@
     <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;83)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;85)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-circle">
+                
+                </span>
+                <span class="mls"> icon-circle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e951" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe951;" 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-action-Fastly">
@@ -847,17 +863,17 @@
         </div>
     </div>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-action-Slack">
+                <span class="icon-clock">
                 
                 </span>
-                <span class="mls"> icon-action-Slack</span>
+                <span class="mls"> icon-clock</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e94d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe94d;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e950" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe950;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -866,14 +882,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-orleans">
+                <span class="icon-bin2">
                 
                 </span>
-                <span class="mls"> icon-orleans</span>
+                <span class="mls"> icon-bin2</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e94b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe94b;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e902" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe902;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -882,30 +898,30 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-document-lock">
+                <span class="icon-earth">
                 
                 </span>
-                <span class="mls"> icon-document-lock</span>
+                <span class="mls"> icon-earth</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e949" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe949;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e9ca" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe9ca;" 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" />
+                <input type="text" readonly value="earth, globe2" class="liga unitRight" />
             </div>
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-document-unpublish">
+                <span class="icon-elapsed">
                 
                 </span>
-                <span class="mls"> icon-document-unpublish</span>
+                <span class="mls"> icon-elapsed</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e93f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe93f;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e943" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe943;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -914,14 +930,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-angle-down">
+                <span class="icon-google">
                 
                 </span>
-                <span class="mls"> icon-angle-down</span>
+                <span class="mls"> icon-google</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e900" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e93b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93b;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -930,14 +946,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-angle-left">
+                <span class="icon-lock">
                 
                 </span>
-                <span class="mls"> icon-angle-left</span>
+                <span class="mls"> icon-lock</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e901" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -946,14 +962,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-angle-right">
+                <span class="icon-microsoft">
                 
                 </span>
-                <span class="mls"> icon-angle-right</span>
+                <span class="mls"> icon-microsoft</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e931" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe931;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e940" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe940;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -962,14 +978,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-angle-up">
+                <span class="icon-action-AzureQueue">
                 
                 </span>
-                <span class="mls"> icon-angle-up</span>
+                <span class="mls"> icon-action-AzureQueue</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e903" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe903;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e940" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe940;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -978,14 +994,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-api">
+                <span class="icon-pause">
                 
                 </span>
-                <span class="mls"> icon-api</span>
+                <span class="mls"> icon-pause</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e945" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe945;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e92f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92f;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -994,14 +1010,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-assets">
+                <span class="icon-play">
                 
                 </span>
-                <span class="mls"> icon-assets</span>
+                <span class="mls"> icon-play</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e948" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe948;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e930" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe930;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1010,14 +1026,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-bug">
+                <span class="icon-reset">
                 
                 </span>
-                <span class="mls"> icon-bug</span>
+                <span class="mls"> icon-reset</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e93d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe93d;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e92e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92e;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1026,14 +1042,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-caret-down">
+                <span class="icon-settings2">
                 
                 </span>
-                <span class="mls"> icon-caret-down</span>
+                <span class="mls"> icon-settings2</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92c" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92c;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e92d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92d;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1042,14 +1058,14 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-caret-left">
+                <span class="icon-timeout">
                 
                 </span>
-                <span class="mls"> icon-caret-left</span>
+                <span class="mls"> icon-timeout</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92a;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e944" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe944;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1058,209 +1074,209 @@
         </div>
         <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-caret-right">
+                <span class="icon-unlocked">
                 
                 </span>
-                <span class="mls"> icon-caret-right</span>
+                <span class="mls"> icon-unlocked</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e929" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe929;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e933" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe933;" 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>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-caret-up">
+                <span class="icon-action-Slack">
                 
                 </span>
-                <span class="mls"> icon-caret-up</span>
+                <span class="mls"> icon-action-Slack</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92b;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e94d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe94d;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-contents">
+                <span class="icon-orleans">
                 
                 </span>
-                <span class="mls"> icon-contents</span>
+                <span class="mls"> icon-orleans</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e946" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe946;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e94b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe94b;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-trigger-ContentChanged">
+                <span class="icon-document-lock">
                 
                 </span>
-                <span class="mls"> icon-trigger-ContentChanged</span>
+                <span class="mls"> icon-document-lock</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e946" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe946;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e949" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe949;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-Date">
+                <span class="icon-document-unpublish">
                 
                 </span>
-                <span class="mls"> icon-control-Date</span>
+                <span class="mls"> icon-document-unpublish</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e936" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e93f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93f;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-DateTime">
+                <span class="icon-angle-down">
                 
                 </span>
-                <span class="mls"> icon-control-DateTime</span>
+                <span class="mls"> icon-angle-down</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e937" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe937;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e900" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe900;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-control-Markdown">
+                <span class="icon-angle-left">
                 
                 </span>
-                <span class="mls"> icon-control-Markdown</span>
+                <span class="mls"> icon-angle-left</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e938" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe938;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e901" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe901;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-grid">
+                <span class="icon-angle-right">
                 
                 </span>
-                <span class="mls"> icon-grid</span>
+                <span class="mls"> icon-angle-right</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f00a" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf00a;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e931" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe931;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-list">
+                <span class="icon-angle-up">
                 
                 </span>
-                <span class="mls"> icon-list</span>
+                <span class="mls"> icon-angle-up</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="f0c9" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xf0c9;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e903" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe903;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-user-o">
+                <span class="icon-api">
                 
                 </span>
-                <span class="mls"> icon-user-o</span>
+                <span class="mls"> icon-api</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e932" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe932;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e945" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe945;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-rules">
+                <span class="icon-assets">
                 
                 </span>
-                <span class="mls"> icon-rules</span>
+                <span class="mls"> icon-assets</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e947" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e948" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe948;" 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="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-action-Webhook">
+                <span class="icon-bug">
                 
                 </span>
-                <span class="mls"> icon-action-Webhook</span>
+                <span class="mls"> icon-bug</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e947" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e93d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93d;" 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">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-bin2">
+                <span class="icon-caret-down">
                 
                 </span>
-                <span class="mls"> icon-bin2</span>
+                <span class="mls"> icon-caret-down</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e902" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe902;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e92c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92c;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1269,30 +1285,30 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-earth">
+                <span class="icon-caret-left">
                 
                 </span>
-                <span class="mls"> icon-earth</span>
+                <span class="mls"> icon-caret-left</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e9ca" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe9ca;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e92a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92a;" 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="earth, globe2" class="liga unitRight" />
+                <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-elapsed">
+                <span class="icon-caret-right">
                 
                 </span>
-                <span class="mls"> icon-elapsed</span>
+                <span class="mls"> icon-caret-right</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e943" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe943;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e929" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe929;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1301,14 +1317,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-google">
+                <span class="icon-caret-up">
                 
                 </span>
-                <span class="mls"> icon-google</span>
+                <span class="mls"> icon-caret-up</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e93b" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe93b;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e92b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92b;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1317,14 +1333,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-lock">
+                <span class="icon-contents">
                 
                 </span>
-                <span class="mls"> icon-lock</span>
+                <span class="mls"> icon-contents</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e934" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e946" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe946;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1333,14 +1349,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-microsoft">
+                <span class="icon-trigger-ContentChanged">
                 
                 </span>
-                <span class="mls"> icon-microsoft</span>
+                <span class="mls"> icon-trigger-ContentChanged</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e940" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe940;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e946" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe946;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1349,14 +1365,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-action-AzureQueue">
+                <span class="icon-control-Date">
                 
                 </span>
-                <span class="mls"> icon-action-AzureQueue</span>
+                <span class="mls"> icon-control-Date</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e940" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe940;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e936" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1365,14 +1381,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-pause">
+                <span class="icon-control-DateTime">
                 
                 </span>
-                <span class="mls"> icon-pause</span>
+                <span class="mls"> icon-control-DateTime</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92f" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92f;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e937" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe937;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1381,14 +1397,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-play">
+                <span class="icon-control-Markdown">
                 
                 </span>
-                <span class="mls"> icon-play</span>
+                <span class="mls"> icon-control-Markdown</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e930" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe930;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e938" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe938;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1397,14 +1413,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-reset">
+                <span class="icon-grid">
                 
                 </span>
-                <span class="mls"> icon-reset</span>
+                <span class="mls"> icon-grid</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92e" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92e;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="f00a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xf00a;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1413,14 +1429,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-settings2">
+                <span class="icon-list">
                 
                 </span>
-                <span class="mls"> icon-settings2</span>
+                <span class="mls"> icon-list</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e92d" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe92d;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="f0c9" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xf0c9;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1429,14 +1445,14 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-timeout">
+                <span class="icon-user-o">
                 
                 </span>
-                <span class="mls"> icon-timeout</span>
+                <span class="mls"> icon-user-o</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e944" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe944;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e932" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe932;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>
@@ -1445,14 +1461,30 @@
         </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-unlocked">
+                <span class="icon-rules">
                 
                 </span>
-                <span class="mls"> icon-unlocked</span>
+                <span class="mls"> icon-rules</span>
             </div>
             <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e933" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe933;" class="unitRight size1of2 talign-right" />
+                <input type="text" readonly value="e947" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-action-Webhook">
+                
+                </span>
+                <span class="mls"> icon-action-Webhook</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e947" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe947;" class="unitRight size1of2 talign-right" />
             </fieldset>
             <div class="fs0 bshadow0 clearfix hidden-true">
                 <span class="unit pvs fgc1">liga: </span>

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

@@ -87,6 +87,8 @@
 <glyph unicode="&#xe94d;" glyph-name="action-Slack" horiz-adv-x="951" d="M868 507.428c46.857 0 82.857-34.286 82.857-81.143 0-36.571-18.857-62.286-53.143-74.286l-98.286-33.714 32-95.429c2.857-8.571 4-17.714 4-26.857 0-45.143-36.571-82.857-81.714-82.857-36 0-68 22.286-79.429 56.571l-31.429 94.286-177.143-60.571 31.429-93.714c2.857-8.571 4.571-17.714 4.571-26.857 0-44.571-36.571-82.857-82.286-82.857-36 0-67.429 22.286-78.857 56.571l-31.429 93.143-87.429-30.286c-9.143-2.857-18.857-5.143-28.571-5.143-46.286 0-81.143 34.286-81.143 80.571 0 35.429 22.857 67.429 56.571 78.857l89.143 30.286-60 178.857-89.143-30.857c-9.143-2.857-18.286-4.571-27.429-4.571-45.714 0-81.143 34.857-81.143 80.571 0 35.429 22.857 67.429 56.571 78.857l89.714 30.286-30.286 90.857c-2.857 8.571-4.571 17.714-4.571 26.857 0 45.143 36.571 82.857 82.286 82.857 36 0 67.429-22.286 78.857-56.571l30.857-91.429 177.143 60-30.857 91.429c-2.857 8.571-4.571 17.714-4.571 26.857 0 45.143 37.143 82.857 82.286 82.857 36 0 68-22.857 79.429-56.571l30.286-92 92.571 31.429c8 2.286 16 3.429 24.571 3.429 44.571 0 82.857-33.143 82.857-78.857 0-35.429-27.429-65.143-59.429-76l-89.714-30.857 60-180.571 93.714 32c8.571 2.857 17.714 4.571 26.286 4.571zM414.286 357.714l177.143 60-60 180-177.143-61.143z" />
 <glyph unicode="&#xe94e;" glyph-name="action-Fastly" horiz-adv-x="886" d="M341.758 929.668v-55.545h25.806v-83.195c-193.056-37.236-336.992-205.942-337.132-408.544v-0.016c0-229.687 184.814-415.885 412.793-415.885v0c227.979 0 412.793 186.198 412.793 415.885v0c-0.125 202.629-144.065 371.351-334.545 408.173l-2.587 0.416v83.165h25.809v55.545h-202.936zM454.729 590.311c102.973-5.539 185.923-86.823 194.885-189.491v-6.763h-23.479v-23.589h23.485v-6.447c-8.918-102.72-91.882-184.055-194.891-189.594v23.144h-23.444v-23.078c-104.989 6.154-188.976 91.042-194.458 196.868h23.297v23.589h-23.172c6.225 105.086 89.86 189.163 194.333 195.295v-23.195h23.444v23.261zM535.132 492.688l-78.775-73.035c-3.893 1.564-8.405 2.478-13.126 2.494h-0.006c-20.265 0-36.693-16.551-36.693-36.967v0c0-20.417 16.428-36.967 36.693-36.967v0c20.265 0 36.693 16.551 36.693 36.967v0c-0.010 3.753-0.574 7.37-1.613 10.776l0.069-0.262 71.128 80.156-14.369 16.838z" />
 <glyph unicode="&#xe94f;" glyph-name="control-Slug" d="M512 960c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h128v-870.4h-128c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h307.2c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6h-128v870.4h128c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6h-307.2zM51.2 755.2c-28.16 0-51.2-23.040-51.2-51.2v-460.8c0-28.16 23.040-51.2 51.2-51.2h537.6v51.2h-512c-15.36 0-25.6 10.24-25.6 25.6v409.6c0 15.36 10.24 25.6 25.6 25.6h512v51.2h-537.6zM742.4 755.2v-51.2h204.8c15.36 0 25.6-10.24 25.6-25.6v-409.6c0-15.36-10.24-25.6-25.6-25.6h-204.8v-51.2h230.4c28.16 0 51.2 23.040 51.2 51.2v460.8c0 28.16-23.040 51.2-51.2 51.2h-230.4zM386.56 353.28c0-12.8-7.68-23.040-20.48-25.6-28.16-10.24-58.88-15.36-92.16-15.36-35.84 0-66.56 10.24-84.48 25.6s-25.6 38.4-25.6 66.56 10.24 51.2 25.6 66.56c17.92 17.92 46.080 23.040 84.48 23.040h69.12v38.4c0 35.84-25.6 53.76-64 53.76-23.040 0-46.080-7.68-69.12-20.48-2.56-2.56-5.12-2.56-10.24-2.56-10.24 0-20.48 7.68-20.48 20.48 0 7.68 2.56 12.8 10.24 17.92 30.72 20.48 61.44 25.6 92.16 25.6 56.32 0 104.96-30.72 104.96-92.16v-181.76zM345.6 458.24h-69.12c-61.44 0-69.12-28.16-69.12-53.76s7.68-56.32 69.12-56.32c23.040 0 46.080 2.56 69.12 10.24v99.84z" />
+<glyph unicode="&#xe950;" glyph-name="clock" d="M658.744 210.744l-210.744 210.746v282.51h128v-229.49l173.256-173.254zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384z" />
+<glyph unicode="&#xe951;" glyph-name="circle" d="M1024 448c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512s512-229.23 512-512z" />
 <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="list" 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?uoafl5');
-  src:  url('fonts/icomoon.eot?uoafl5#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?uoafl5') format('truetype'),
-    url('fonts/icomoon.woff?uoafl5') format('woff'),
-    url('fonts/icomoon.svg?uoafl5#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?vpgvr2');
+  src:  url('fonts/icomoon.eot?vpgvr2#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?vpgvr2') format('truetype'),
+    url('fonts/icomoon.woff?vpgvr2') format('woff'),
+    url('fonts/icomoon.svg?vpgvr2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-circle:before {
+  content: "\e951";
+}
 .icon-action-Fastly:before {
   content: "\e94e";
 }
@@ -181,6 +184,48 @@
 .icon-user:before {
   content: "\e928";
 }
+.icon-clock:before {
+  content: "\e950";
+}
+.icon-bin2:before {
+  content: "\e902";
+}
+.icon-earth:before {
+  content: "\e9ca";
+}
+.icon-elapsed:before {
+  content: "\e943";
+}
+.icon-google:before {
+  content: "\e93b";
+}
+.icon-lock:before {
+  content: "\e934";
+}
+.icon-microsoft:before {
+  content: "\e940";
+}
+.icon-action-AzureQueue:before {
+  content: "\e940";
+}
+.icon-pause:before {
+  content: "\e92f";
+}
+.icon-play:before {
+  content: "\e930";
+}
+.icon-reset:before {
+  content: "\e92e";
+}
+.icon-settings2:before {
+  content: "\e92d";
+}
+.icon-timeout:before {
+  content: "\e944";
+}
+.icon-unlocked:before {
+  content: "\e933";
+}
 .icon-action-Slack:before {
   content: "\e94d";
 }
@@ -256,45 +301,6 @@
 .icon-action-Webhook:before {
   content: "\e947";
 }
-.icon-bin2:before {
-  content: "\e902";
-}
-.icon-earth:before {
-  content: "\e9ca";
-}
-.icon-elapsed:before {
-  content: "\e943";
-}
-.icon-google:before {
-  content: "\e93b";
-}
-.icon-lock:before {
-  content: "\e934";
-}
-.icon-microsoft:before {
-  content: "\e940";
-}
-.icon-action-AzureQueue:before {
-  content: "\e940";
-}
-.icon-pause:before {
-  content: "\e92f";
-}
-.icon-play:before {
-  content: "\e930";
-}
-.icon-reset:before {
-  content: "\e92e";
-}
-.icon-settings2:before {
-  content: "\e92d";
-}
-.icon-timeout:before {
-  content: "\e944";
-}
-.icon-unlocked:before {
-  content: "\e933";
-}
 .icon-browser:before {
   content: "\e935";
 }