Merge pull request #860 from Alfresco/dev-mromano-631

Fix dialogs for firefox and safari

demo-shell-ng2/app/app.component.css

@@ -9,4 +9,4 @@
 }
 .user-profile{
     margin-right: 3px;
-}
+}

demo-shell-ng2/app/css/app.css

@@ -35,3 +35,7 @@ body, html {
     text-align: center;
     position: relative;
 }
+
+._dialog_overlay {
+    position: static !important;
+}

demo-shell-ng2/index.html

@@ -35,6 +35,10 @@
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
     <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
 
+    <!-- Polyfill(s) for dialogs -->
+    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>

demo-shell-ng2/package.json

@@ -87,7 +87,8 @@
     "ng2-activiti-tasklist": "0.3.3",
     "ng2-activiti-processlist": "0.3.3",
     "ng2-alfresco-webscript": "0.3.2",
-    "ng2-alfresco-tag": "0.3.2"
+    "ng2-alfresco-tag": "0.3.2",
+    "dialog-polyfill": "^0.4.3"
   },
   "devDependencies": {
     "@types/core-js": "^0.9.32",

ng2-components/ng2-activiti-form/README.md

@@ -45,6 +45,26 @@ Also make sure you include these dependencies in your `index.html` file:
 <script src="node_modules/material-design-lite/material.min.js"></script>
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
+#### Dialogs Polyfill
+
+To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+
+```sh
+npm install --save dialog-polyfill
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+<!-- Polyfill(s) for dialogs -->
+<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+<style>
+._dialog_overlay {
+    position: static !important;
+}
+</style>
+```
 
 ## Basic usage examples
 

ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts

@@ -24,6 +24,7 @@ import { FormFieldModel } from '../core/form-field.model';
 
 declare let __moduleName: string;
 declare var componentHandler;
+declare let dialogPolyfill: any;
 
 @Component({
     moduleId: __moduleName,
@@ -122,6 +123,11 @@ export class AttachWidget extends WidgetComponent implements OnInit {
     public showDialog() {
         this.setupFileBrowser();
         this.getExternalContentNodes();
+
+        if (!this.dialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.dialog.nativeElement);
+        }
+
         if (this.dialog) {
             this.dialog.nativeElement.showModal();
         }

ng2-components/ng2-activiti-tasklist/README.md

@@ -47,6 +47,26 @@ Also make sure you include these dependencies in your `index.html` file:
 <script src="node_modules/material-design-lite/material.min.js"></script>
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
+#### Dialogs Polyfill
+
+To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+
+```sh
+npm install --save dialog-polyfill
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+<!-- Polyfill(s) for dialogs -->
+<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+<style>
+._dialog_overlay {
+    position: static !important;
+}
+</style>
+```
 
 ## Basic usage example Activiti Task List
 The component shows the list of all the tasks filter by the

ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts

@@ -21,6 +21,7 @@ import { TaskDetailsModel } from '../models/task-details.model';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 
 declare let componentHandler: any;
+declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-start-task',
@@ -85,6 +86,9 @@ export class ActivitiStartProcessButton implements OnInit {
     }
 
     public showDialog() {
+        if (!this.dialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.dialog.nativeElement);
+        }
         if (this.dialog) {
             this.dialog.nativeElement.showModal();
         }