From e04761bdaeb880a5295a65c082c7ec5e139466be Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sat, 10 Feb 2018 12:55:43 +0100
Subject: [PATCH] UI improved.

---
 .../contents/contents-page.component.html     |  8 +--
 .../shared/content-item.component.html        | 15 ++---
 .../shared/content-item.component.scss        |  1 -
 .../content/shared/content-item.component.ts  |  7 +-
 .../schemas/pages/schema/field.component.html |  2 +-
 .../pages/schema/schema-page.component.html   |  2 +-
 .../angular/control-errors.component.ts       |  5 +-
 .../angular/modal-target.directive.ts         |  4 ++
 .../angular/onboarding-tooltip.component.html |  2 +-
 .../framework/angular/tooltip.component.scss  | 12 ++++
 .../framework/angular/tooltip.component.ts    | 64 +++++++++++++++++++
 .../angular/user-report.component.ts          |  6 +-
 src/Squidex/app/framework/declarations.ts     |  1 +
 src/Squidex/app/framework/module.ts           |  3 +
 .../language-selector.component.html          |  2 +-
 .../pages/internal/apps-menu.component.html   |  2 +-
 .../internal/profile-menu.component.html      |  2 +-
 17 files changed, 109 insertions(+), 29 deletions(-)
 create mode 100644 src/Squidex/app/framework/angular/tooltip.component.scss
 create mode 100644 src/Squidex/app/framework/angular/tooltip.component.ts

diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
index 9b610a95d..f00ddc40a 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
@@ -28,7 +28,7 @@
                     Search for content using full text search over all fields and languages!
                 </sqx-onboarding-tooltip>
                 
-                <div class="dropdown-menu" *sqxModalView="searchModal" closeAlways="true" [sqxModalTarget]="inputFind">
+                <div class="dropdown-menu" *sqxModalView="searchModal" [sqxModalTarget]="inputFind">
                     <sqx-search-form
                         [canArchive]="!isReadOnly"
                         (queryChanged)="contentsFilter.setValue($event, { emitEvent: false })" 
@@ -175,21 +175,21 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title">{{dueTimeAction}} content items</h4>
+                <h4 class="modal-title">{{dueTimeAction}} content item(s)</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.
+                        {{dueTimeAction}} content item(s) 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.
+                        {{dueTimeAction}} content item(s) at a later point date and time.
                     </label>
                 </div>
 
diff --git a/src/Squidex/app/features/content/shared/content-item.component.html b/src/Squidex/app/features/content/shared/content-item.component.html
index bfff66cfc..051ed7162 100644
--- a/src/Squidex/app/features/content/shared/content-item.component.html
+++ b/src/Squidex/app/features/content/shared/content-item.component.html
@@ -11,26 +11,21 @@
 </td>
 <td class="cell-time">
     <span *ngIf="!content.scheduledTo">
-        <span class="content-status content-status-{{content.status | lowercase}}" (click)="scheduleTooltip.toggle(); $event.stopPropagation()" #statusIcon>
+        <span class="content-status content-status-{{content.status | lowercase}}" #statusIcon>
             <i class="icon-circle"></i>
         </span>
     
-        <div class="content-status-tooltip" *sqxModalView="scheduleTooltip" closeAlways="true" [sqxModalTarget]="statusIcon" position="topLeft" @fade>
-            {{content.status}}
-        </div>
+        <sqx-tooltip [target]="statusIcon">{{content.status}}</sqx-tooltip>
     </span>
 
     <span *ngIf="content.scheduledTo">
-        <span class="content-status content-status-{{content.scheduledTo | lowercase}}" (click)="scheduleTooltip.toggle(); $event.stopPropagation()" #statusIcon>
+        <span class="content-status content-status-{{content.scheduledTo | lowercase}}" #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>
+        <sqx-tooltip [target]="statusIcon">Will be set to '{{content.scheduledTo}}' at {{content.scheduledAt | sqxFullDateTime}}</sqx-tooltip>
     </span>
     
-    
     <small class="item-modified">{{content.lastModified | sqxFromNow}}</small>
 </td>
 <td class="cell-user">
@@ -41,7 +36,7 @@
         <button type="button" class="btn btn-link btn-secondary" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async" #optionsButton>
             <i class="icon-dots"></i>
         </button>
-        <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [sqxModalTarget]="optionsButton" @fade>
+        <div class="dropdown-menu" *sqxModalView="dropdown" [sqxModalTarget]="optionsButton" @fade>
             <a class="dropdown-item" (click)="publishing.emit(); $event.stopPropagation()" *ngIf="content.status === 'Draft'">
                 Publish
             </a>
diff --git a/src/Squidex/app/features/content/shared/content-item.component.scss b/src/Squidex/app/features/content/shared/content-item.component.scss
index 8b360453e..d87c980ec 100644
--- a/src/Squidex/app/features/content/shared/content-item.component.scss
+++ b/src/Squidex/app/features/content/shared/content-item.component.scss
@@ -4,7 +4,6 @@
 .content-status {
     & {
         vertical-align: middle;
-        cursor: pointer;
     }
 
     &-published {
diff --git a/src/Squidex/app/features/content/shared/content-item.component.ts b/src/Squidex/app/features/content/shared/content-item.component.ts
index 715f445d9..d5f667beb 100644
--- a/src/Squidex/app/features/content/shared/content-item.component.ts
+++ b/src/Squidex/app/features/content/shared/content-item.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 
 import {
     AppContext,
@@ -27,7 +27,8 @@ import {
     ],
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContentItemComponent implements OnInit, OnChanges {
     @Output()
@@ -74,8 +75,6 @@ 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
diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.html b/src/Squidex/app/features/schemas/pages/schema/field.component.html
index e48fa79be..23145e1b2 100644
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html
@@ -26,7 +26,7 @@
                         <button type="button" class="btn btn-link btn-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
                             <i class="icon-dots"></i>
                         </button>
-                        <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [sqxModalTarget]="optionsButton" @fade>
+                        <div class="dropdown-menu" *sqxModalView="dropdown" [sqxModalTarget]="optionsButton" @fade>
                             <a class="dropdown-item" (click)="enabling.emit()" *ngIf="field.isDisabled" [class.disabled]="field.isLocked">
                                 Enable
                             </a>
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
index 3fc4d2c90..6cefc740c 100644
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@@ -21,7 +21,7 @@
                     <button type="button" class="btn btn-link btn-secondary" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async" #buttonOptions>
                         <i class="icon-dots"></i>
                     </button>
-                    <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" closeAlways="true" [sqxModalTarget]="buttonOptions" @fade>
+                    <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" [sqxModalTarget]="buttonOptions" @fade>
                         <a class="dropdown-item" (click)="configureScriptsDialog.show()">
                             Scripts
                         </a>
diff --git a/src/Squidex/app/framework/angular/control-errors.component.ts b/src/Squidex/app/framework/angular/control-errors.component.ts
index 4fd2b061f..9f1f9c972 100644
--- a/src/Squidex/app/framework/angular/control-errors.component.ts
+++ b/src/Squidex/app/framework/angular/control-errors.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights r vbeserved
  */
 
-import { Component, Host, Input, OnChanges, Optional } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Host, Input, OnChanges, Optional } from '@angular/core';
 import { AbstractControl, FormGroupDirective } from '@angular/forms';
 
 import { fadeAnimation } from './animations';
@@ -30,7 +30,8 @@ const DEFAULT_ERRORS: { [key: string]: string } = {
     templateUrl: './control-errors.component.html',
     animations: [
         fadeAnimation
-    ]
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ControlErrorsComponent implements OnChanges {
     private displayFieldName: string;
diff --git a/src/Squidex/app/framework/angular/modal-target.directive.ts b/src/Squidex/app/framework/angular/modal-target.directive.ts
index 854b407d2..cef07507f 100644
--- a/src/Squidex/app/framework/angular/modal-target.directive.ts
+++ b/src/Squidex/app/framework/angular/modal-target.directive.ts
@@ -87,6 +87,10 @@ export class ModalTargetDirective implements AfterViewInit, OnDestroy, OnInit {
     }
 
     private updatePosition() {
+        if (!this.targetElement) {
+            return;
+        }
+
         const viewportHeight = document.documentElement.clientHeight;
         const viewportWidth = document.documentElement.clientWidth;
 
diff --git a/src/Squidex/app/framework/angular/onboarding-tooltip.component.html b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html
index bd217d082..14ad85a31 100644
--- a/src/Squidex/app/framework/angular/onboarding-tooltip.component.html
+++ b/src/Squidex/app/framework/angular/onboarding-tooltip.component.html
@@ -1,4 +1,4 @@
-<div *sqxModalView="tooltipModal;onRoot:true" closeAlways="true" @fade>
+<div *sqxModalView="tooltipModal;onRoot: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">
diff --git a/src/Squidex/app/framework/angular/tooltip.component.scss b/src/Squidex/app/framework/angular/tooltip.component.scss
new file mode 100644
index 000000000..015124b29
--- /dev/null
+++ b/src/Squidex/app/framework/angular/tooltip.component.scss
@@ -0,0 +1,12 @@
+@import '_vars';
+@import '_mixins';
+
+.tooltip-container {
+    @include border-radius;
+    background: $color-tooltip;
+    border: 0;
+    font-size: .9rem;
+    font-weight: normal;
+    color: $color-dark-foreground;
+    padding: .5rem;
+}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/tooltip.component.ts b/src/Squidex/app/framework/angular/tooltip.component.ts
new file mode 100644
index 000000000..d1374b235
--- /dev/null
+++ b/src/Squidex/app/framework/angular/tooltip.component.ts
@@ -0,0 +1,64 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Renderer } from '@angular/core';
+
+import { ModalView } from './../utils/modal-view';
+
+import { fadeAnimation } from './animations';
+
+@Component({
+    selector: 'sqx-tooltip',
+    styleUrls: ['./tooltip.component.scss'],
+    template: `
+        <div class="tooltip-container" *sqxModalView="modal;onRoot:true;closeAuto:false" [sqxModalTarget]="target" position="topLeft">
+            <ng-content></ng-content>
+        </div>`,
+    animations: [
+        fadeAnimation
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TooltipComponent implements OnDestroy, OnInit {
+    private targetMouseEnterListener: any;
+    private targetMouseLeaveListener: any;
+
+    @Input()
+    public target: any;
+
+    public modal = new ModalView(false, false);
+
+    constructor(
+        private readonly renderer: Renderer
+    ) {
+    }
+
+    public ngOnDestroy() {
+        if (this.targetMouseEnterListener) {
+            this.targetMouseEnterListener();
+        }
+
+        if (this.targetMouseLeaveListener) {
+            this.targetMouseLeaveListener();
+        }
+    }
+
+    public ngOnInit() {
+        if (this.target) {
+            this.targetMouseEnterListener =
+                this.renderer.listen(this.target, 'mouseenter', () => {
+                    this.modal.show();
+                    // this.changeDetector.detectChanges();
+                });
+
+            this.targetMouseLeaveListener =
+                this.renderer.listen(this.target, 'mouseleave', () => {
+                    this.modal.hide();
+                });
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/user-report.component.ts b/src/Squidex/app/framework/angular/user-report.component.ts
index 0f93c2ef6..621ef46a5 100644
--- a/src/Squidex/app/framework/angular/user-report.component.ts
+++ b/src/Squidex/app/framework/angular/user-report.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 
 import { ResourceLoaderService } from './../services/resource-loader.service';
 import { UserReportConfig } from './../configurations';
@@ -17,9 +17,11 @@ import { UserReportConfig } from './../configurations';
 export class UserReportComponent implements OnDestroy, OnInit {
     private loadingTimer: any;
 
-    constructor(config: UserReportConfig,
+    constructor(config: UserReportConfig, changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {
+        changeDetector.detach();
+
         window['_urq'] = window['_urq'] || [];
         window['_urq'].push(['initSite', config.siteId]);
     }
diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts
index 586ffbc4b..e0b8c3aea 100644
--- a/src/Squidex/app/framework/declarations.ts
+++ b/src/Squidex/app/framework/declarations.ts
@@ -48,6 +48,7 @@ export * from './angular/tag-editor.component';
 export * from './angular/template-wrapper.directive';
 export * from './angular/title.component';
 export * from './angular/toggle.component';
+export * from './angular/tooltip.component';
 export * from './angular/user-report.component';
 export * from './angular/validators';
 export * from './configurations';
diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts
index 9a4f4b39f..985558ac7 100644
--- a/src/Squidex/app/framework/module.ts
+++ b/src/Squidex/app/framework/module.ts
@@ -71,6 +71,7 @@ import {
     TitleService,
     TitleComponent,
     ToggleComponent,
+    TooltipComponent,
     UserReportComponent
 } from './declarations';
 
@@ -131,6 +132,7 @@ import {
         TemplateWrapperDirective,
         TitleComponent,
         ToggleComponent,
+        TooltipComponent,
         UserReportComponent
     ],
     exports: [
@@ -182,6 +184,7 @@ import {
         TemplateWrapperDirective,
         TitleComponent,
         ToggleComponent,
+        TooltipComponent,
         UserReportComponent,
         HttpClientModule,
         FormsModule,
diff --git a/src/Squidex/app/shared/components/language-selector.component.html b/src/Squidex/app/shared/components/language-selector.component.html
index 2e3d06452..880e57172 100644
--- a/src/Squidex/app/shared/components/language-selector.component.html
+++ b/src/Squidex/app/shared/components/language-selector.component.html
@@ -8,7 +8,7 @@
     <button type="button" class="btn btn-secondary dropdown-toggle" [attr.title]="selectedLanguage.englishName" (click)="dropdown.toggle(); $event.stopPropagation()" #button>
         {{selectedLanguage.iso2Code}}
     </button>
-    <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [sqxModalTarget]="button" @fade>
+    <div class="dropdown-menu" *sqxModalView="dropdown" [sqxModalTarget]="button" @fade>
         <div class="dropdown-item" *ngFor="let language of languages" [class.active]="language == selectedLanguage" (click)="selectLanguage(language)">
             <strong class="iso-code">{{language.iso2Code}}</strong> &nbsp; &nbsp; ({{language.englishName}})
         </div>
diff --git a/src/Squidex/app/shell/pages/internal/apps-menu.component.html b/src/Squidex/app/shell/pages/internal/apps-menu.component.html
index f12ad5bd7..b85dd49a1 100644
--- a/src/Squidex/app/shell/pages/internal/apps-menu.component.html
+++ b/src/Squidex/app/shell/pages/internal/apps-menu.component.html
@@ -2,7 +2,7 @@
     <li class="nav-item dropdown">
         <span class="nav-link dropdown-toggle" id="app-name" (click)="appsMenu.toggle()">{{selectedApp ? selectedApp.name : 'Apps Overview'}}</span>
 
-        <div class="dropdown-menu" *sqxModalView="appsMenu" closeAlways="true" @fade>
+        <div class="dropdown-menu" *sqxModalView="appsMenu" @fade>
             <a class="dropdown-item all-apps" routerLink="/app">
                 <span class="all-apps-text">All Apps</span> 
                 <span class="all-apps-pill badge badge-pill badge-primary">{{apps.length}}</span>
diff --git a/src/Squidex/app/shell/pages/internal/profile-menu.component.html b/src/Squidex/app/shell/pages/internal/profile-menu.component.html
index 346576300..8b0bd2b44 100644
--- a/src/Squidex/app/shell/pages/internal/profile-menu.component.html
+++ b/src/Squidex/app/shell/pages/internal/profile-menu.component.html
@@ -8,7 +8,7 @@
             </span>
         </span>
 
-        <div class="dropdown-menu" *sqxModalView="modalMenu" closeAlways="true" @fade>
+        <div class="dropdown-menu" *sqxModalView="modalMenu" @fade>
             <a class="dropdown-item" routerLink="/app/administration" *ngIf="isAdmin">
                 Administration
             </a>