UI improvements with modal dialoga.

src/Squidex/app-config/webpack.config.js

@@ -58,6 +58,12 @@ module.exports = {
                     loader: 'awesome-typescript-loader' 
                 }],
                 include: /node_modules/
+            }, {
+                test: /\.js\.flow$/,
+                use: [{
+                    loader: 'ignore-loader'
+                }],
+                include: /node_modules/
             }, {
                 test: /\.html$/,
                 use: [{

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">

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">

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">

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">

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>/.

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">

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">

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,12 +81,21 @@ export class ModalViewDirective implements OnChanges, OnInit, OnDestroy {
                     }
 
                     if (isOpen) {
+                        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;
+
+                        if (this.placeOnRoot) {
+                            this.rootViewService.rootView.clear();
+                        } else {
                             this.viewContainer.clear();
                         }
+                    }
 
                     this.updateEnabled();
                 }

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;
+    }
+}

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';
 

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
             ]

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;
+}

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">

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">

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

@@ -29,3 +29,5 @@
 </a>
 
 <sqx-user-report></sqx-user-report>
+
+<div sqxRootView></div>

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",