UI improvements.

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

@@ -7,7 +7,7 @@
 
 // tslint:disable:prefer-for-of
 
-import { Component, forwardRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -28,9 +28,8 @@ export const SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-assets-editor',
     styleUrls: ['./assets-editor.component.scss'],
     templateUrl: './assets-editor.component.html',
-    providers: [
-        SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR
-    ]
+    providers: [SQX_ASSETS_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AssetsEditorComponent implements ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };
@@ -47,6 +46,7 @@ export class AssetsEditorComponent implements ControlValueAccessor {
     constructor(
         private readonly appsState: AppsState,
         private readonly assetsService: AssetsService,
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly localStore: LocalStoreService
     ) {
         this.isListView = this.localStore.get('assetView') === 'List';
@@ -131,6 +131,8 @@ export class AssetsEditorComponent implements ControlValueAccessor {
 
         this.callTouched();
         this.callChange(ids);
+
+        this.changeDetector.markForCheck();
     }
 
     public sort(assets: AssetDto[]) {

src/Squidex/app/features/content/shared/contents-selector.component.html

@@ -16,10 +16,10 @@
                     (queryChanged)="search($event)"
                     expandable="true">
                 </sqx-search-form>
-    
-                <ng-container *ngIf="languages.length > 1">
-                    <sqx-language-selector class="languages-buttons" (selectedLanguageChange)="selectLanguage($event)" [languages]="languages.values"></sqx-language-selector>
-                </ng-container>
+            </div>
+                
+            <div class="col pl-1" *ngIf="languages.length > 1">
+                <sqx-language-selector class="languages-buttons" (selectedLanguageChange)="selectLanguage($event)" [languages]="languages.values"></sqx-language-selector>
             </div>
         </div>
     </ng-container>

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

@@ -7,7 +7,7 @@
 
 // tslint:disable:prefer-for-of
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -31,9 +31,8 @@ export const SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-references-editor',
     styleUrls: ['./references-editor.component.scss'],
     templateUrl: './references-editor.component.html',
-    providers: [
-        SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR
-    ]
+    providers: [SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
     private callChange = (v: any) => { /* NOOP */ };
@@ -59,6 +58,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
 
     constructor(
         private readonly appsState: AppsState,
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly contentsService: ContentsService,
         private readonly schemasService: SchemasService
     ) {
@@ -73,8 +73,12 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
         this.schemasService.getSchema(this.appsState.appName, this.schemaId)
             .subscribe(dto => {
                 this.schema = dto;
-            }, error => {
+
+                this.changeDetector.markForCheck();
+            }, () => {
                 this.isInvalidSchema = true;
+
+                this.changeDetector.markForCheck();
             });
     }
 
@@ -90,8 +94,12 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
                         if (this.contentItems.length !== contentIds.length) {
                             this.updateValue();
                         }
+
+                        this.changeDetector.markForCheck();
                     }, () => {
                         this.contentItems = ImmutableArray.empty();
+
+                        this.changeDetector.markForCheck();
                     });
             }
         } else {
@@ -148,5 +156,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
 
         this.callTouched();
         this.callChange(ids);
+
+        this.changeDetector.markForCheck();
     }
 }

src/Squidex/app/framework/angular/forms/autocomplete.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of, Subscription } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators';
@@ -27,7 +27,8 @@ export const SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-autocomplete',
     styleUrls: ['./autocomplete.component.scss'],
     templateUrl: './autocomplete.component.html',
-    providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, OnInit {
     private subscription: Subscription;

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as moment from 'moment';
 import { Subscription } from 'rxjs';
@@ -22,7 +22,8 @@ export const SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-date-time-editor',
     styleUrls: ['./date-time-editor.component.scss'],
     templateUrl: './date-time-editor.component.html',
-    providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy, OnInit, AfterViewInit {
     private timeSubscription: Subscription;
@@ -60,6 +61,11 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy,
 
     public isDisabled = false;
 
+    constructor(
+        private readonly changeDetector: ChangeDetectorRef
+    ) {
+    }
+
     public ngOnDestroy() {
         this.dateSubscription.unsubscribe();
         this.timeSubscription.unsubscribe();
@@ -136,6 +142,10 @@ export class DateTimeEditorComponent implements ControlValueAccessor, OnDestroy,
 
                 this.updateValue();
                 this.touched();
+
+                if (false) {
+                    this.changeDetector.markForCheck();
+                }
             }
         });
 

src/Squidex/app/framework/angular/forms/dropdown.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterContentInit, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const KEY_ENTER = 13;
@@ -23,7 +23,8 @@ export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-dropdown',
     styleUrls: ['./dropdown.component.scss'],
     templateUrl: './dropdown.component.html',
-    providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DropdownComponent implements AfterContentInit, ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };

src/Squidex/app/framework/angular/forms/iframe-editor.component.ts

@@ -19,8 +19,8 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-iframe-editor',
     styleUrls: ['./iframe-editor.component.scss'],
     templateUrl: './iframe-editor.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IFrameEditorComponent implements ControlValueAccessor, AfterViewInit,  OnInit, OnDestroy {
     private windowMessageListener: Function;

src/Squidex/app/framework/angular/forms/jscript-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor,  NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -22,7 +22,8 @@ export const SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-jscript-editor',
     styleUrls: ['./jscript-editor.component.scss'],
     templateUrl: './jscript-editor.component.html',
-    providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JscriptEditorComponent implements ControlValueAccessor, AfterViewInit {
     private callChange = (v: any) => { /* NOOP */ };

src/Squidex/app/framework/angular/forms/json-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor,  NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -22,7 +22,8 @@ export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-json-editor',
     styleUrls: ['./json-editor.component.scss'],
     templateUrl: './json-editor.component.html',
-    providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class JsonEditorComponent implements ControlValueAccessor, AfterViewInit {
     private callChange = (v: any) => { /* NOOP */ };

src/Squidex/app/framework/angular/forms/progress-bar.component.ts

@@ -32,6 +32,9 @@ export class ProgressBarComponent implements OnChanges, OnInit {
     @Input()
     public strokeWidth = 4;
 
+    @Input()
+    public showText = true;
+
     @Input()
     public value = 0;
 
@@ -46,7 +49,8 @@ export class ProgressBarComponent implements OnChanges, OnInit {
             color: this.color,
             trailColor: this.trailColor,
             trailWidth: this.trailWidth,
-            strokeWidth: this.strokeWidth
+            strokeWidth: this.strokeWidth,
+            svgStyle: { width: '100%', height: '100%' }
         };
 
         this.renderer.setStyle(this.element.nativeElement, 'display', 'block');
@@ -71,7 +75,7 @@ export class ProgressBarComponent implements OnChanges, OnInit {
 
         this.progressBar.animate(value / 100);
 
-        if (value > 0) {
+        if (value > 0 && this.showText) {
             this.progressBar.setText(Math.round(value) + '%');
         }
     }

src/Squidex/app/framework/angular/forms/slider.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Types } from '@app/framework/internal';
@@ -18,7 +18,8 @@ export const SQX_SLIDER_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-slider',
     styleUrls: ['./slider.component.scss'],
     templateUrl: './slider.component.html',
-    providers: [SQX_SLIDER_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_SLIDER_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SliderComponent implements ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };

src/Squidex/app/framework/angular/forms/stars.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, forwardRef, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Types } from '@app/framework/internal';
@@ -18,7 +18,8 @@ export const SQX_STARS_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-stars',
     styleUrls: ['./stars.component.scss'],
     templateUrl: './stars.component.html',
-    providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_STARS_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StarsComponent implements ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };

src/Squidex/app/framework/angular/forms/tag-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
@@ -75,7 +75,8 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-tag-editor',
     styleUrls: ['./tag-editor.component.scss'],
     templateUrl: './tag-editor.component.html',
-    providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TagEditorComponent implements AfterViewInit, ControlValueAccessor, OnDestroy, OnInit {
     private subscription: Subscription;

src/Squidex/app/framework/angular/forms/toggle.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, forwardRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Types } from '@app/framework/internal';
@@ -18,7 +18,8 @@ export const SQX_TOGGLE_CONTROL_VALUE_ACCESSOR: any = {
     selector: 'sqx-toggle',
     styleUrls: ['./toggle.component.scss'],
     templateUrl: './toggle.component.html',
-    providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToggleComponent implements ControlValueAccessor {
     private callChange = (v: any) => { /* NOOP */ };

src/Squidex/app/shared/components/app-form.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 
 import {
@@ -18,7 +18,8 @@ import {
 @Component({
     selector: 'sqx-app-form',
     styleUrls: ['./app-form.component.scss'],
-    templateUrl: './app-form.component.html'
+    templateUrl: './app-form.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppFormComponent {
     @Output()
@@ -46,7 +47,7 @@ export class AppFormComponent {
             const request = new CreateAppDto(value.name, this.template);
 
             this.appsStore.create(request)
-                .subscribe(dto => {
+                .subscribe(() => {
                     this.complete();
                 }, error => {
                     this.createForm.submitFailed(error);

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

@@ -130,9 +130,7 @@
         </div>
 
         <div class="upload-progress" *ngIf="progress > 0">
-            <div class="progress-background">
-                <div class="progress-bar" [style.width]="(progress + 40) + '%'"></div>
-            </div>
+            <sqx-progress-bar [value]="50" [trailWidth]="0.8" [strokeWidth]="0.8" [showText]="false"></sqx-progress-bar>
         </div>
 
         <div class="drop-overlay align-items-center justify-content-center" *ngIf="asset && progress === 0">

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

@@ -254,6 +254,10 @@ $list-height: 2.375rem;
             min-width: 12rem;
         }
     }
+
+    .upload-progress {
+        padding: .25rem 0;
+    }
 }
 
 .drop-overlay {
@@ -279,22 +283,6 @@ $list-height: 2.375rem;
     }
 }
 
-.progress {
-    &-background {
-        background: $color-border;
-        margin: (($list-height - .25rem) / 2) 0;
-    }
-
-    &-bar {
-        background: $color-theme-blue;
-    }
-
-    &-background,
-    &-bar {
-        height: .25rem;
-    }
-}
-
 .selectable {
     cursor: pointer;
 }

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -31,7 +31,8 @@ import {
     templateUrl: './asset.component.html',
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AssetComponent implements OnDestroy, OnInit {
     private tagSubscription: Subscription;
@@ -91,6 +92,7 @@ export class AssetComponent implements OnDestroy, OnInit {
         private readonly appsState: AppsState,
         private readonly assetsService: AssetsService,
         private readonly authState: AuthService,
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly dialogs: DialogService,
         private readonly formBuilder: FormBuilder
     ) {
@@ -105,7 +107,7 @@ export class AssetComponent implements OnDestroy, OnInit {
                     if (Types.is(dto, AssetDto)) {
                         this.emitLoaded(dto);
                     } else {
-                        this.progress = dto;
+                        this.setProgress(dto);
                     }
                 }, error => {
                     this.dialogs.notifyError(error);
@@ -145,7 +147,7 @@ export class AssetComponent implements OnDestroy, OnInit {
                 }, error => {
                     this.dialogs.notifyError(error);
 
-                    this.setProgress();
+                    this.setProgress(0);
                 });
         }
     }
@@ -159,8 +161,6 @@ export class AssetComponent implements OnDestroy, OnInit {
             this.assetsService.putAsset(this.appsState.appName, this.asset.id, requestDto, this.asset.version)
                 .subscribe(dto => {
                     this.updateAsset(this.asset.rename(requestDto.fileName, this.authState.user!.token, dto.version), true);
-
-                    this.renameCancel();
                 }, error => {
                     this.dialogs.notifyError(error);
 
@@ -194,10 +194,6 @@ export class AssetComponent implements OnDestroy, OnInit {
         this.renaming = false;
     }
 
-    private setProgress(progress = 0) {
-        this.progress = progress;
-    }
-
     private emitFailed(error: any) {
         this.failed.emit(error);
     }
@@ -210,6 +206,12 @@ export class AssetComponent implements OnDestroy, OnInit {
         this.updated.emit(asset);
     }
 
+    private setProgress(progress: number) {
+        this.progress = progress;
+
+        this.changeDetector.markForCheck();
+    }
+
     private updateAsset(asset: AssetDto, emitEvent: boolean) {
         this.asset = asset;
         this.progress = 0;
@@ -221,5 +223,7 @@ export class AssetComponent implements OnDestroy, OnInit {
         }
 
         this.renameCancel();
+
+        this.changeDetector.markForCheck();
     }
 }

src/Squidex/app/shared/components/assets-list.component.ts

@@ -7,7 +7,7 @@
 
 // tslint:disable:prefer-for-of
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { onErrorResumeNext } from 'rxjs/operators';
 
 import {
@@ -19,7 +19,8 @@ import {
 @Component({
     selector: 'sqx-assets-list',
     styleUrls: ['./assets-list.component.scss'],
-    templateUrl: './assets-list.component.html'
+    templateUrl: './assets-list.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AssetsListComponent {
     public newFiles = ImmutableArray.empty<File>();

src/Squidex/app/shared/components/assets-selector.component.ts

@@ -7,7 +7,7 @@
 
 // tslint:disable:prefer-for-of
 
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { onErrorResumeNext } from 'rxjs/operators';
 
 import {
@@ -23,7 +23,8 @@ import {
     templateUrl: './assets-selector.component.html',
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AssetsSelectorComponent implements OnInit {
     public selectedAssets: { [id: string]: AssetDto } = {};

src/Squidex/app/shared/components/geolocation-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -31,7 +31,8 @@ interface Geolocation {
     selector: 'sqx-geolocation-editor',
     styleUrls: ['./geolocation-editor.component.scss'],
     templateUrl: './geolocation-editor.component.html',
-    providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR]
+    providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GeolocationEditorComponent implements ControlValueAccessor, AfterViewInit {
     private callChange = (v: any) => { /* NOOP */ };

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { HelpService } from '@app/shared/internal';
@@ -13,7 +13,8 @@ import { HelpService } from '@app/shared/internal';
 @Component({
     selector: 'sqx-help',
     styleUrls: ['./help.component.scss'],
-    templateUrl: './help.component.html'
+    templateUrl: './help.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HelpComponent {
     public helpSections =

src/Squidex/app/shared/components/history-list.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import {
@@ -17,7 +17,8 @@ import {
 @Component({
     selector: 'sqx-history-list',
     styleUrls: ['./history-list.component.scss'],
-    templateUrl: './history-list.component.html'
+    templateUrl: './history-list.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HistoryListComponent {
     @Input()

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { merge, Observable, timer } from 'rxjs';
 import { delay, switchMap } from 'rxjs/operators';
@@ -22,7 +22,8 @@ import {
 @Component({
     selector: 'sqx-history',
     styleUrls: ['./history.component.scss'],
-    templateUrl: './history.component.html'
+    templateUrl: './history.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HistoryComponent {
     private readonly channel = this.calculateChannel();
@@ -32,7 +33,7 @@ export class HistoryComponent {
             timer(0, 10000),
             this.messageBus.of(HistoryChannelUpdated).pipe(delay(1000))
         ).pipe(
-            switchMap(app => this.historyService.getHistory(this.appsState.appName, this.channel)));
+            switchMap(() => this.historyService.getHistory(this.appsState.appName, this.channel)));
 
     constructor(
         private readonly appsState: AppsState,