From 5c9de1a2e2efe06d8d6dec3cd102da7f97601655 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sat, 15 Jul 2017 18:37:07 +0200
Subject: [PATCH] UI improvements with modal dialoga.

---
 src/Squidex/app-config/webpack.config.js      |  8 ++++++-
 .../event-consumers-page.component.html       |  2 +-
 .../apps/pages/apps-page.component.html       |  2 +-
 .../pages/content/content-page.component.html |  2 +-
 .../pages/schema/schema-page.component.html   |  6 +++---
 .../pages/schemas/schema-form.component.html  |  2 +-
 .../pages/schemas/schemas-page.component.html |  2 +-
 .../pages/clients/client.component.html       |  2 +-
 .../framework/angular/modal-view.directive.ts | 21 ++++++++++++++++---
 .../framework/angular/root-view.directive.ts  | 19 +++++++++++++++++
 src/Squidex/app/framework/declarations.ts     |  2 ++
 src/Squidex/app/framework/module.ts           |  5 +++++
 .../framework/services/root-view.service.ts   | 13 ++++++++++++
 .../shared/components/asset.component.html    |  2 +-
 .../pages/internal/apps-menu.component.html   |  2 +-
 .../internal/internal-area.component.html     |  2 ++
 src/Squidex/package.json                      |  2 ++
 17 files changed, 79 insertions(+), 15 deletions(-)
 create mode 100644 src/Squidex/app/framework/angular/root-view.directive.ts
 create mode 100644 src/Squidex/app/framework/services/root-view.service.ts

diff --git a/src/Squidex/app-config/webpack.config.js b/src/Squidex/app-config/webpack.config.js
index 99c739607..41b87ba34 100644
--- a/src/Squidex/app-config/webpack.config.js
+++ b/src/Squidex/app-config/webpack.config.js
@@ -52,12 +52,18 @@ module.exports = {
                     loader: 'tslint-loader' 
                 }],
                 exclude: /node_modules/
-            },{
+            }, {
                 test: /\.ts$/,
                 use: [{
                     loader: 'awesome-typescript-loader' 
                 }],
                 include: /node_modules/
+            }, {
+                test: /\.js\.flow$/,
+                use: [{
+                    loader: 'ignore-loader'
+                }],
+                include: /node_modules/
             }, {
                 test: /\.html$/,
                 use: [{
diff --git a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html
index ae2f7ea72..33cb7a345 100644
--- a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html
+++ b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html
@@ -67,7 +67,7 @@
     </div>
 </sqx-panel>
 
-<div class="modal" *sqxModalView="eventConsumerErrorDialog" [@fade]>
+<div class="modal" *sqxModalView="eventConsumerErrorDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/src/Squidex/app/features/apps/pages/apps-page.component.html b/src/Squidex/app/features/apps/pages/apps-page.component.html
index f753d6e6f..36cc64369 100644
--- a/src/Squidex/app/features/apps/pages/apps-page.component.html
+++ b/src/Squidex/app/features/apps/pages/apps-page.component.html
@@ -16,7 +16,7 @@
     </div>
 </div>
 
-<div class="modal" *sqxModalView="addAppDialog" [@fade]>
+<div class="modal" *sqxModalView="addAppDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html
index 62b728f31..dd13b10ac 100644
--- a/src/Squidex/app/features/content/pages/content/content-page.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.html
@@ -56,7 +56,7 @@
 
 <router-outlet></router-outlet>
 
-<div class="modal" *sqxModalView="cancelDialog" [@fade]>
+<div class="modal" *sqxModalView="cancelDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
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 a2826ab85..8fd647b5d 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
@@ -97,7 +97,7 @@
     </div>
 </sqx-panel>
 
-<div class="modal" *sqxModalView="confirmDeleteDialog" [@fade]>
+<div class="modal" *sqxModalView="confirmDeleteDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
@@ -121,7 +121,7 @@
     </div>
 </div>
 
-<div class="modal" *sqxModalView="editSchemaDialog" [@fade]>
+<div class="modal" *sqxModalView="editSchemaDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
@@ -140,7 +140,7 @@
     </div>
 </div>
 
-<div class="modal" *sqxModalView="exportSchemaDialog" [@fade]>
+<div class="modal" *sqxModalView="exportSchemaDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index ede5c18ed..ef9b2b3a0 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -10,7 +10,7 @@
         
         <sqx-control-errors for="name" [submitted]="createFormSubmitted"></sqx-control-errors>
 
-		<input type="text" class="form-control" id="schema-name" formControlName="name" autocomplete="off" sqxFocusOnInit sqxLowerCaseInput />
+		<input type="text" class="form-control" id="schema-name" formControlName="name" autocomplete="off" sqxLowerCaseInput />
         
         <small class="form-text text-muted">
             The schema name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}{{appName}}/<b>{{schemaName | async}}</b>/.
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
index 587cbd135..8f77752b3 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
@@ -53,7 +53,7 @@
     </div>
 </sqx-panel>
 
-<div class="modal" *sqxModalView="addSchemaDialog" [@fade]>
+<div class="modal" *sqxModalView="addSchemaDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.html b/src/Squidex/app/features/settings/pages/clients/client.component.html
index 4758055dd..24f00211b 100644
--- a/src/Squidex/app/features/settings/pages/clients/client.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/client.component.html
@@ -69,7 +69,7 @@
     </table>
 </div>
 
-<div class="modal" *sqxModalView="tokenDialog" [@fade]>
+<div class="modal" *sqxModalView="tokenDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/src/Squidex/app/framework/angular/modal-view.directive.ts b/src/Squidex/app/framework/angular/modal-view.directive.ts
index 8463f314d..f98143907 100644
--- a/src/Squidex/app/framework/angular/modal-view.directive.ts
+++ b/src/Squidex/app/framework/angular/modal-view.directive.ts
@@ -10,6 +10,8 @@ import { Subscription } from 'rxjs';
 
 import { ModalView } from './../utils/modal-view';
 
+import { RootViewService } from './../services/root-view.service';
+
 @Directive({
     selector: '[sqxModalView]'
 })
@@ -22,10 +24,14 @@ export class ModalViewDirective implements OnChanges, OnInit, OnDestroy {
     @Input('sqxModalView')
     public modalView: ModalView;
 
+    @Input('sqxModalViewOnRoot')
+    public placeOnRoot = false;
+
     constructor(
         private readonly templateRef: TemplateRef<any>,
         private readonly renderer: Renderer,
-        private readonly viewContainer: ViewContainerRef
+        private readonly viewContainer: ViewContainerRef,
+        private readonly rootViewService: RootViewService
     ) {
     }
 
@@ -75,11 +81,20 @@ export class ModalViewDirective implements OnChanges, OnInit, OnDestroy {
                     }
 
                     if (isOpen) {
-                        this.renderedView = this.viewContainer.createEmbeddedView(this.templateRef);
+                        if (this.placeOnRoot) {
+                            this.renderedView = this.rootViewService.rootView.createEmbeddedView(this.templateRef);
+                        } else {
+                            this.renderedView = this.viewContainer.createEmbeddedView(this.templateRef);
+                        }
                         this.renderer.setElementStyle(this.renderedView.rootNodes[0], 'display', 'block');
                     } else {
                         this.renderedView = null;
-                        this.viewContainer.clear();
+
+                        if (this.placeOnRoot) {
+                            this.rootViewService.rootView.clear();
+                        } else {
+                            this.viewContainer.clear();
+                        }
                     }
 
                     this.updateEnabled();
diff --git a/src/Squidex/app/framework/angular/root-view.directive.ts b/src/Squidex/app/framework/angular/root-view.directive.ts
new file mode 100644
index 000000000..3b591654b
--- /dev/null
+++ b/src/Squidex/app/framework/angular/root-view.directive.ts
@@ -0,0 +1,19 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Directive, ViewContainerRef } from '@angular/core';
+
+import { RootViewService } from './../services/root-view.service';
+
+@Directive({
+    selector: '[sqxRootView]'
+})
+export class RootViewDirective {
+    constructor(viewContainer: ViewContainerRef, rootViewService: RootViewService) {
+        rootViewService.rootView = viewContainer;
+    }
+}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts
index 07c55c91e..85711ecdf 100644
--- a/src/Squidex/app/framework/declarations.ts
+++ b/src/Squidex/app/framework/declarations.ts
@@ -34,6 +34,7 @@ export * from './angular/parent-link.directive';
 export * from './angular/popup-link.directive';
 export * from './angular/progress-bar.component';
 export * from './angular/rich-editor.component';
+export * from './angular/root-view.directive';
 export * from './angular/router-utils';
 export * from './angular/scroll-active.directive';
 export * from './angular/shortcut.component';
@@ -53,6 +54,7 @@ export * from './services/local-store.service';
 export * from './services/message-bus';
 export * from './services/notification.service';
 export * from './services/resource-loader.service';
+export * from './services/root-view.service';
 export * from './services/shortcut.service';
 export * from './services/title.service';
 
diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts
index 871b766c4..af2f67710 100644
--- a/src/Squidex/app/framework/module.ts
+++ b/src/Squidex/app/framework/module.ts
@@ -48,6 +48,8 @@ import {
     ProgressBarComponent,
     ResourceLoaderService,
     RichEditorComponent,
+    RootViewDirective,
+    RootViewService,
     ScrollActiveDirective,
     ShortcutComponent,
     ShortcutService,
@@ -103,6 +105,7 @@ import {
         PopupLinkDirective,
         ProgressBarComponent,
         RichEditorComponent,
+        RootViewDirective,
         ScrollActiveDirective,
         ShortcutComponent,
         ShortDatePipe,
@@ -147,6 +150,7 @@ import {
         PopupLinkDirective,
         ProgressBarComponent,
         RichEditorComponent,
+        RootViewDirective,
         ScrollActiveDirective,
         ShortcutComponent,
         ShortDatePipe,
@@ -177,6 +181,7 @@ export class SqxFrameworkModule {
                 MessageBus,
                 NotificationService,
                 ResourceLoaderService,
+                RootViewService,
                 ShortcutService,
                 TitleService
             ]
diff --git a/src/Squidex/app/framework/services/root-view.service.ts b/src/Squidex/app/framework/services/root-view.service.ts
new file mode 100644
index 000000000..dd292b0dc
--- /dev/null
+++ b/src/Squidex/app/framework/services/root-view.service.ts
@@ -0,0 +1,13 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Injectable, ViewContainerRef } from '@angular/core';
+
+@Injectable()
+export class RootViewService {
+    public rootView: ViewContainerRef;
+}
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html
index 651060ecd..92cd22ded 100644
--- a/src/Squidex/app/shared/components/asset.component.html
+++ b/src/Squidex/app/shared/components/asset.component.html
@@ -61,7 +61,7 @@
     </div>
 </div>
 
-<div class="modal" *sqxModalView="renameDialog" [@fade]>
+<div class="modal" *sqxModalView="renameDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
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 a9c0eab8e..557d87e12 100644
--- a/src/Squidex/app/shell/pages/internal/apps-menu.component.html
+++ b/src/Squidex/app/shell/pages/internal/apps-menu.component.html
@@ -23,7 +23,7 @@
     </li>
 </ul>
 
-<div class="modal" *sqxModalView="modalDialog" [@fade]>
+<div class="modal" *sqxModalView="modalDialog;onRoot:true" [@fade]>
     <div class="modal-backdrop"></div>
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/src/Squidex/app/shell/pages/internal/internal-area.component.html b/src/Squidex/app/shell/pages/internal/internal-area.component.html
index 3552af1ec..fae983207 100644
--- a/src/Squidex/app/shell/pages/internal/internal-area.component.html
+++ b/src/Squidex/app/shell/pages/internal/internal-area.component.html
@@ -29,3 +29,5 @@
 </a>
 
 <sqx-user-report></sqx-user-report>
+
+<div sqxRootView></div>
diff --git a/src/Squidex/package.json b/src/Squidex/package.json
index d8399bf1c..4f9823f5a 100644
--- a/src/Squidex/package.json
+++ b/src/Squidex/package.json
@@ -62,6 +62,7 @@
     "file-loader": "0.11.2",
     "html-loader": "0.4.5",
     "html-webpack-plugin": "2.29.0",
+    "ignore-loader": "^0.1.2",
     "istanbul-instrumenter-loader": "0.2.0",
     "jasmine-core": "2.6.4",
     "karma": "1.7.0",
@@ -75,6 +76,7 @@
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.3",
     "node-sass": "4.5.3",
+    "noop-loader": "^1.0.0",
     "null-loader": "0.1.1",
     "phantomjs-prebuilt": "2.1.14",
     "raw-loader": "0.5.1",