Small UI fixes.

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -2,7 +2,7 @@
     <div [class.col-12]="!fieldFormCompare" [class.col-6]="fieldFormCompare">
         <div class="table-items-row" [class.field-invalid]="isInvalid | async">
             <div class="languages-buttons">
-                <button *ngIf="isTranslateable" type="button" class="btn btn-text-secondary btn-sm mr-1" (click)="translate()" title="Autotranslate from master language">
+                <button *ngIf="isTranslatable" type="button" class="btn btn-text-secondary btn-sm mr-1" (click)="translate()" title="Autotranslate from master language">
                     <i class="icon-translate"></i>
                 </button>
 

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

@@ -62,7 +62,7 @@ export class ContentFieldComponent implements OnChanges {
 
     public isInvalid: Observable<boolean>;
     public isDifferent: Observable<boolean>;
-    public isTranslateable: boolean;
+    public isTranslatable: boolean;
 
     constructor(
         private readonly appsState: AppsState,
@@ -81,7 +81,7 @@ export class ContentFieldComponent implements OnChanges {
         }
 
         if (changes['fieldForm'] || changes['field'] || changes['languages']) {
-            this.isTranslateable = this.field.isTranslateable;
+            this.isTranslatable = this.field.isTranslatable;
         }
 
         if ((changes['fieldForm'] || changes['fieldFormCompare']) && this.fieldFormCompare) {

src/Squidex/app/framework/angular/ignore-scrollbar.directive.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';
 import { timer } from 'rxjs';
 
 import { ResourceOwner } from '@app/framework/internal';
@@ -24,15 +24,13 @@ export class IgnoreScrollbarDirective extends ResourceOwner implements OnInit, A
         super();
     }
 
-    public ngOnInit() {
-        if (!this.parent) {
-            this.parent = this.renderer.parentNode(this.element.nativeElement);
-        }
+    @HostListener('resize)')
+    public onResize() {
+        this.reposition();
+    }
 
-        this.own(
-            this.renderer.listen(this.element.nativeElement, 'resize', () => {
-                this.reposition();
-            }));
+    public ngOnInit() {
+        this.parent = this.renderer.parentNode(this.element.nativeElement);
 
         this.own(timer(100, 100).subscribe(() => this.reposition));
     }

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import {
@@ -37,10 +37,11 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
     public closeAlways = false;
 
     constructor(
-        private readonly templateRef: TemplateRef<any>,
+        private readonly changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2,
-        private readonly viewContainer: ViewContainerRef,
-        private readonly rootView: RootViewComponent
+        private readonly rootView: RootViewComponent,
+        private readonly templateRef: TemplateRef<any>,
+        private readonly viewContainer: ViewContainerRef
     ) {
     }
 
@@ -87,6 +88,8 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
             setTimeout(() => {
                 this.startListening();
             });
+
+            this.changeDetector.detectChanges();
         } else if (!isOpen && this.renderedView) {
             const container = this.getContainer();
             const containerIndex = container.indexOf(this.renderedView);
@@ -96,6 +99,8 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
             this.renderedView = null;
 
             this.unsubscribeToClick();
+
+            this.changeDetector.detectChanges();
         }
     }
 

src/Squidex/app/framework/angular/modals/tooltip.directive.ts

@@ -7,15 +7,15 @@
 
 // tslint:disable:directive-selector
 
-import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
 
-import { DialogService, ResourceOwner } from '@app/framework/internal';
+import { DialogService } from '@app/framework/internal';
 import { Tooltip } from '@app/shared';
 
 @Directive({
     selector: '[title]'
 })
-export class TooltipDirective extends ResourceOwner implements OnInit {
+export class TooltipDirective {
     private titleText: string;
 
     @Input()
@@ -33,23 +33,20 @@ export class TooltipDirective extends ResourceOwner implements OnInit {
         private readonly element: ElementRef,
         private readonly renderer: Renderer2
     ) {
-        super();
     }
 
-    public ngOnInit() {
-        const target = this.element.nativeElement;
-
-        this.own(
-            this.renderer.listen(target, 'mouseenter', () => {
-                if (this.titleText) {
-                    this.dialogs.tooltip(new Tooltip(target, this.titleText, this.titlePosition));
-                }
-            }));
+    @HostListener('mouseenter')
+    public onMouseEnter() {
+        if (this.titleText) {
+            this.dialogs.tooltip(new Tooltip(this.element.nativeElement, this.titleText, this.titlePosition));
+        }
+    }
 
-        this.own(
-            this.renderer.listen(this.element.nativeElement, 'mouseleave', () => {
-                this.dialogs.tooltip(new Tooltip(target, null, this.titlePosition));
-            }));
+    @HostListener('mouseleave')
+    public onMouseLeave() {
+        if (this.titleText) {
+            this.dialogs.tooltip(new Tooltip(this.element.nativeElement, null, this.titlePosition));
+        }
     }
 
     private unsetAttribute() {

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

@@ -83,8 +83,6 @@ export class MarkdownEditorComponent extends StatefulControlComponent<State, str
 
     private showSelector = () => {
         this.assetsDialog.show();
-
-        this.detectChanges();
     }
 
     public ngAfterViewInit() {

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

@@ -83,8 +83,6 @@ export class RichEditorComponent extends StatefulControlComponent<any, string> i
 
     private showSelector = () => {
         this.assetsDialog.show();
-
-        this.detectChanges();
     }
 
     private getEditorOptions() {

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

@@ -136,7 +136,7 @@ export class RootFieldDto extends FieldDto {
         return this.properties.fieldType === 'String';
     }
 
-    public get isTranslateable() {
+    public get isTranslatable() {
         return this.isLocalizable && this.isString && (this.properties.editor === 'Input' || this.properties.editor === 'Textarea');
     }