Disable click outside of angular material dialog area to close the dialog

2025-04-24 04:55:41 +00:00 · 2020-02-20 12:17:36 +01:00 · 2020-02-20 12:17:36 +01:00 · 2396bef0cc
commit 2396bef0cc
parent e11281ddf6
22 changed files with 56 additions and 28 deletions
--- a/src/app/common/progress-dialog/progress-dialog.service.ts
+++ b/src/app/common/progress-dialog/progress-dialog.service.ts
@ -9,7 +9,8 @@ export class ProgressDialogService {
  public open() {
    const ref = this.dialog.open(ProgressDialogComponent, {
      width: '250px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    return ref;
  }
--- a/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
+++ b/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
@ -27,7 +27,8 @@ export class DeleteTemplateComponent {
            data: {
                templateName: templateName
            },
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
        });
      
        dialogRef.afterClosed().subscribe((answer: boolean) => {
--- a/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
@ -20,7 +20,8 @@ export class ChangeSymbolActionComponent implements OnInit {
    const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
        width: '1000px',
        height: '500px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
      });
      let instance = dialogRef.componentInstance;
      instance.server = this.server;
--- a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
@ -27,7 +27,8 @@ export class ConfigActionComponent {
  @Input() node: Node;
  private conf = {
    autoFocus: false,
-    width: '800px'
+    width: '800px',
+    disableClose: true
  };
  dialogRef;

--- a/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
@ -20,7 +20,8 @@ export class EditConfigActionComponent {
        const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
            width: '600px',
            height: '500px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
        });
        let instance = dialogRef.componentInstance;
        instance.server = this.server;
--- a/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
@ -25,7 +25,8 @@ export class EditStyleActionComponent implements OnChanges {
  editStyle() {
    const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
      width: '800px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
--- a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
@ -29,7 +29,8 @@ export class EditTextActionComponent implements OnInit {
  editText() {
    const dialogRef = this.dialog.open(TextEditorDialogComponent, {
      width: '300px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
--- a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
@ -26,7 +26,8 @@ export class ExportConfigActionComponent {
        } else {
            const dialogRef = this.dialog.open(ConfigDialogComponent, {
                width: '500px',
-                autoFocus: false
+                autoFocus: false,
+                disableClose: true
            });
            let instance = dialogRef.componentInstance;
            dialogRef.afterClosed().subscribe((configType: string) => {
--- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
@ -27,7 +27,8 @@ export class ImportConfigActionComponent {
        if (this.node.node_type !== 'vpcs') {
            const dialogRef = this.dialog.open(ConfigDialogComponent, {
                width: '500px',
-                autoFocus: false
+                autoFocus: false,
+                disableClose: true
            });
            let instance = dialogRef.componentInstance;
            dialogRef.afterClosed().subscribe((configType: string) => {
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
@ -20,7 +20,8 @@ export class PacketFiltersActionComponent {
        const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
            width: '900px',
            height: '400px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
        });
        let instance = dialogRef.componentInstance;
        instance.server = this.server;
--- a/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
@ -17,7 +17,8 @@ export class ShowNodeActionComponent {
  showNode() {
    const dialogRef = this.dialog.open(InfoDialogComponent, {
        width: '600px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.node = this.node;
--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
@ -19,7 +19,8 @@ export class StartCaptureActionComponent {
  startCapture() {
    const dialogRef = this.dialog.open(StartCaptureDialogComponent, {
        width: '400px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
--- a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
@ -35,7 +35,8 @@ export class ConfiguratorDialogQemuComponent implements OnInit {

    private conf = {
        autoFocus: false,
-        width: '800px'
+        width: '800px',
+        disableClose: true
    };
    dialogRefQemuImageCreator;

--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
@ -80,7 +80,8 @@ export class PacketFiltersDialogComponent implements OnInit{
    onHelpClick() {
        const dialogRef = this.dialog.open(HelpDialogComponent, {
            width: '500px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
        });
        let instance = dialogRef.componentInstance;
        instance.title = 'Help for filters';
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
@ -50,7 +50,8 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
    public takeScreenshot() {
        const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
            width: '400px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
        });
        dialogRef.afterClosed().subscribe((result: Screenshot) => {
            if (result) this.saveImage(result);
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@ -702,7 +702,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
  addNewProject() {
    const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
      width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
@ -711,7 +712,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
  saveProject() {
    const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
      width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
@ -721,7 +723,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
  editProject() {
    const dialogRef = this.dialog.open(EditProjectDialogComponent, {
      width: '600px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
@ -732,7 +735,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
    let uuid: string = '';
    const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
      width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
@ -87,7 +87,8 @@ export class AddBlankProjectDialogComponent implements OnInit {
      data: {
        existingProject: existingProject
      },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });

    dialogRef.afterClosed().subscribe((answer: boolean) => {
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
@ -110,7 +110,8 @@ export class ImportProjectDialogComponent implements OnInit {
      data: {
        existingProject: existingProject
      },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });

    dialogRef.afterClosed().subscribe((answer: boolean) => {
--- a/src/app/components/projects/projects.component.ts
+++ b/src/app/components/projects/projects.component.ts
@ -78,7 +78,8 @@ export class ProjectsComponent implements OnInit {
      const dialogRef = this.dialog.open(ConfigureGns3VMDialogComponent, {
        width: '350px',
        height: '120px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
      });
  
      dialogRef.afterClosed().subscribe((answer: boolean) => {
@ -149,7 +150,8 @@ export class ProjectsComponent implements OnInit {
  duplicate(project: Project) {
    const dialogRef = this.dialog.open(ChooseNameDialogComponent, {
      width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
@ -162,7 +164,8 @@ export class ProjectsComponent implements OnInit {
  addBlankProject() {
    const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
      width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
@ -172,7 +175,8 @@ export class ProjectsComponent implements OnInit {
    let uuid: string = '';
    const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
      width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });
    let instance = dialogRef.componentInstance;
    instance.server = this.server;
--- a/src/app/components/servers/servers.component.ts
+++ b/src/app/components/servers/servers.component.ts
@ -94,7 +94,8 @@ export class ServersComponent implements OnInit, OnDestroy {
  createModal() {
    const dialogRef = this.dialog.open(AddServerDialogComponent, {
      width: '350px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });

    dialogRef.afterClosed().subscribe(server => {
--- a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
+++ b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
@ -35,7 +35,8 @@ export class SnapshotMenuItemComponent implements OnInit {
        server: this.server,
        project: this.project
      },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });

    dialogRef.afterClosed().subscribe(snapshot => {
--- a/src/app/components/template/template.component.ts
+++ b/src/app/components/template/template.component.ts
@ -27,7 +27,8 @@ export class TemplateComponent implements OnInit {
        server: this.server,
        project: this.project
      },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
    });

    dialogRef.afterClosed().subscribe((nodeAddedEvent: NodeAddedEvent) => {