Layout improvements.

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

@@ -71,6 +71,8 @@ export const SQX_TAG_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagEditorComponent), multi: true
 };
 
+const SIZE_CACHE: { [key: string]: number } = {};
+
 @Component({
     selector: 'sqx-tag-editor',
     styleUrls: ['./tag-editor.component.scss'],
@@ -205,7 +207,6 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
     }
 
     public resetSize() {
-        const style = window.getComputedStyle(this.inputElement.nativeElement);
 
         if (!canvas) {
             canvas = document.createElement('canvas');
@@ -215,20 +216,32 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
             const ctx = canvas.getContext('2d');
 
             if (ctx) {
-                ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`;
+                const text = this.inputElement.nativeElement.value;
+
+                let width = SIZE_CACHE[text];
+
+                if (!width) {
+                    const style = window.getComputedStyle(this.inputElement.nativeElement);
+
+                    ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`;
 
-                const widthText = ctx.measureText(this.inputElement.nativeElement.value).width;
-                const widthPlaceholder = ctx.measureText(this.placeholder).width;
+                    const widthText = ctx.measureText(text).width;
+                    const widthPlaceholder = ctx.measureText(this.placeholder).width;
 
-                const width = Math.max(widthText, widthPlaceholder);
+                    width = Math.max(widthText, widthPlaceholder);
+
+                    SIZE_CACHE[text] = width;
+                }
 
                 this.inputElement.nativeElement.style.width = <any>((width + 5) + 'px');
             }
         }
 
-        setTimeout(() => {
-            this.formElement.nativeElement.scrollLeft = this.formElement.nativeElement.scrollWidth;
-        }, 0);
+        if (this.singleLine) {
+            setTimeout(() => {
+                this.formElement.nativeElement.scrollLeft = this.formElement.nativeElement.scrollWidth;
+            }, 0);
+        }
     }
 
     public onKeyDown(event: KeyboardEvent) {

src/Squidex/app/framework/angular/image-source.directive.ts

@@ -9,6 +9,8 @@ import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnChanges, O
 
 import { MathHelper } from './../utils/math-helper';
 
+const LAYOUT_CACHE: { [key: string]: { width: number, height: number } } = {};
+
 @Directive({
     selector: '[sqxImageSource]'
 })
@@ -26,6 +28,9 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After
     @Input()
     public retryCount = 10;
 
+    @Input()
+    public layoutKey: string;
+
     @Input()
     public parent: any = null;
 
@@ -76,7 +81,21 @@ export class ImageSourceDirective implements OnChanges, OnDestroy, OnInit, After
     }
 
     private resize() {
-        this.size = this.parent.getBoundingClientRect();
+        let size: { width: number, height: number } = null!;
+
+        if (this.layoutKey) {
+            size = LAYOUT_CACHE[this.layoutKey];
+        }
+
+        if (!size) {
+            size = { width: this.parent.offsetWidth, height: this.parent.offsetHeight };
+        }
+
+        this.size = size;
+
+        if (this.layoutKey) {
+            LAYOUT_CACHE[this.layoutKey] = size;
+        }
 
         this.renderer.setStyle(this.element.nativeElement, 'display', 'inline-block');
         this.renderer.setStyle(this.element.nativeElement, 'width', this.size.width + 'px');

src/Squidex/app/framework/angular/modals/modal-target.directive.ts

@@ -91,8 +91,8 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit {
             return;
         }
 
-        const viewportHeight = document.documentElement.clientHeight;
-        const viewportWidth = document.documentElement.clientWidth;
+        const viewportHeight = document.documentElement!.clientHeight;
+        const viewportWidth = document.documentElement!.clientWidth;
 
         const modalRef = this.element.nativeElement;
         const modalRect = this.element.nativeElement.getBoundingClientRect();

src/Squidex/app/framework/angular/panel-container.directive.ts

@@ -45,7 +45,7 @@ export class PanelContainerDirective implements AfterViewInit {
 
     public invalidate(resize = false) {
         if (resize) {
-            this.containerWidth = this.element.nativeElement.getBoundingClientRect().width;
+            this.containerWidth = this.element.nativeElement.offsetWidth;
         }
 
         const panels = this.panels;

src/Squidex/app/framework/angular/panel.component.ts

@@ -85,7 +85,7 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
             this.styleWidth = size;
 
             this.renderer.setStyle(this.panel.nativeElement, 'width', size);
-            this.renderWidth = this.panel.nativeElement.getBoundingClientRect().width;
+            this.renderWidth = this.panel.nativeElement.offsetWidth;
 
             this.changeDetector.detectChanges();
         }

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

@@ -7,7 +7,7 @@
                 </span>
                 
                 <div *ngIf="asset.isImage" class="file-image">
-                    <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg">
+                    <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg" layoutKey="asset-large">
                 </div>
                 <div *ngIf="!asset.isImage" class="file-icon">
                     <img [attr.src]="asset | sqxFileIcon">
@@ -89,7 +89,7 @@
         <div class="left-border" [class.selected]="isSelected" ></div>
 
         <div *ngIf="asset && asset.isImage && progress === 0" class="image" @fade>
-            <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg2">
+            <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg2" layoutKey="asset-small">
         </div>
         <div *ngIf="asset && !asset.isImage && progress === 0" class="image image-padded" @fade>
             <img class="icon" [attr.src]="asset | sqxFileIcon">

src/Squidex/app/shell/pages/app/left-menu.component.ts

@@ -5,14 +5,15 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { AppsState } from '@app/shared';
 
 @Component({
     selector: 'sqx-left-menu',
     styleUrls: ['./left-menu.component.scss'],
-    templateUrl: './left-menu.component.html'
+    templateUrl: './left-menu.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LeftMenuComponent {
     constructor(public readonly appsState: AppsState

src/Squidex/app/shell/pages/internal/apps-menu.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 {
     AppsState,
@@ -20,7 +20,8 @@ import {
     templateUrl: './apps-menu.component.html',
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppsMenuComponent {
     public addAppDialog = new DialogModel();

src/Squidex/app/shell/pages/internal/internal-area.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 
@@ -22,7 +22,8 @@ import {
     templateUrl: './internal-area.component.html',
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InternalAreaComponent implements OnDestroy, OnInit {
     private queryParamsSubscription: Subscription;

src/Squidex/app/shell/pages/internal/profile-menu.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
@@ -22,7 +22,8 @@ import {
     templateUrl: './profile-menu.component.html',
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfileMenuComponent implements OnDestroy, OnInit {
     private authenticationSubscription: Subscription;
@@ -38,7 +39,8 @@ export class ProfileMenuComponent implements OnDestroy, OnInit {
 
     constructor(
         private readonly authService: AuthService,
-        private readonly apiUrl: ApiUrlConfig
+        private readonly apiUrl: ApiUrlConfig,
+        private readonly changeDetector: ChangeDetectorRef
     ) {
     }
 
@@ -54,6 +56,8 @@ export class ProfileMenuComponent implements OnDestroy, OnInit {
                     this.profileDisplayName = user!.displayName;
 
                     this.isAdmin = user!.isAdmin;
+
+                    this.changeDetector.detectChanges();
                 });
     }