Create dedicated module for dialog service

safing · Mar 30, 2022 · e713d1b · e713d1b
1 parent cb100f2
commit e713d1b
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 13 deletions.
diff --git a/modules/portmaster/src/app/app.module.ts b/modules/portmaster/src/app/app.module.ts
@@ -41,7 +41,7 @@ import { CanShowConnection as CanShowConnectionPipe, CanUseRulesPipe, Connection
 import { CountIndicatorComponent } from './shared/count-indicator/count-indicator';
 import { PrettyCountPipe } from './shared/count.pipe';
 import { CountryFlagDirective } from './shared/country-flag/country-flag';
-import { ConfirmDailogComponent, DialogComponent } from './shared/dialog';
+import { DialogModule } from './shared/dialog';
 import { DropdownComponent } from './shared/dropdown/dropdown';
 import { DropDownItemComponent, DropDownValueDirective } from './shared/dropdown/item';
 import { ExitScreenComponent } from './shared/exit-screen/exit-screen';
@@ -140,8 +140,6 @@ import { WIDGET_DEFINTIONS } from './widgets/widget.types';
     CanShowConnectionPipe,
     IsBlockedConnectionPipe,
     ExitScreenComponent,
-    DialogComponent,
-    ConfirmDailogComponent,
     SupportPageComponent,
     SupportFormComponent,
     PaginationWrapperComponent,
@@ -166,7 +164,8 @@ import { WIDGET_DEFINTIONS } from './widgets/widget.types';
     TabModule,
     TipUpModule,
     SfngTooltipModule,
-    ActionIndicatorModule
+    ActionIndicatorModule,
+    DialogModule,
   ],
   providers: [
     {

diff --git a/modules/portmaster/src/app/shared/dialog/confirm.dialog.html b/modules/portmaster/src/app/shared/dialog/confirm.dialog.html
@@ -1,6 +1,12 @@
 <div class="content-wrapper">
   <caption *ngIf="config.caption">{{config.caption}}</caption>
-  <fa-icon *ngIf="config.canCancel" class="close-icon" icon="times" (click)="select()"></fa-icon>
+  <svg xmlns="http://www.w3.org/2000/svg" *ngIf="config.canCancel" class="close-icon h-5 w-5" viewBox="0 0 20 20"
+    fill="currentColor" (click)="select()">
+    <path fill-rule="evenodd"
+      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+      clip-rule="evenodd" />
+  </svg>
+
 
   <h1 *ngIf="config.header">{{config.header}}</h1>
 

diff --git a/modules/portmaster/src/app/shared/dialog/dialog.container.ts b/modules/portmaster/src/app/shared/dialog/dialog.container.ts
@@ -18,7 +18,7 @@ export type DialogState = 'opening' | 'open' | 'closing' | 'closed';
   styleUrls: ['./dialog.scss'],
   animations: [dialogAnimation]
 })
-export class DialogComponent {
+export class DialogContainer {
   onStateChange = new Subject<DialogState>();
 
   constructor(

diff --git a/modules/portmaster/src/app/shared/dialog/dialog.module.ts b/modules/portmaster/src/app/shared/dialog/dialog.module.ts
@@ -0,0 +1,23 @@
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { OverlayModule } from "@angular/cdk/overlay";
+import { PortalModule } from "@angular/cdk/portal";
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { ConfirmDailogComponent } from "./confirm.dialog";
+import { DialogContainer } from "./dialog.container";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OverlayModule,
+    PortalModule,
+    DragDropModule,
+    FormsModule,
+  ],
+  declarations: [
+    DialogContainer,
+    ConfirmDailogComponent,
+  ]
+})
+export class DialogModule {}
diff --git a/modules/portmaster/src/app/shared/dialog/dialog.ref.ts b/modules/portmaster/src/app/shared/dialog/dialog.ref.ts
@@ -2,14 +2,14 @@ import { OverlayRef } from "@angular/cdk/overlay";
 import { InjectionToken } from "@angular/core";
 import { Observable, PartialObserver, Subject } from "rxjs";
 import { filter, take } from "rxjs/operators";
-import { DialogComponent, DialogState } from "./dialog.container";
+import { DialogContainer, DialogState } from "./dialog.container";
 
 export const DIALOG_REF = new InjectionToken<DialogRef<any>>('DialogRef');
 
 export class DialogRef<T, R = any> {
   constructor(
     private _overlayRef: OverlayRef,
-    private container: DialogComponent,
+    private container: DialogContainer,
   ) {
     this.container.onStateChange
       .pipe(

diff --git a/modules/portmaster/src/app/shared/dialog/dialog.service.ts b/modules/portmaster/src/app/shared/dialog/dialog.service.ts
@@ -3,7 +3,8 @@ import { ComponentPortal, ComponentType, TemplatePortal } from '@angular/cdk/por
 import { ComponentRef, EmbeddedViewRef, Injectable, Injector } from '@angular/core';
 import { filter, take, takeUntil } from 'rxjs/operators';
 import { ConfirmDailogComponent, ConfirmDialogConfig, CONFIRM_DIALOG_CONFIG } from './confirm.dialog';
-import { DialogComponent } from './dialog.container';
+import { DialogContainer } from './dialog.container';
+import { DialogModule } from './dialog.module';
 import { DialogRef, DIALOG_REF } from './dialog.ref';
 
 export interface BaseDialogConfig {
@@ -27,7 +28,7 @@ export interface ComponentPortalConfig {
   injector?: Injector;
 }
 
-@Injectable({ providedIn: 'root' })
+@Injectable({ providedIn: DialogModule })
 export class DialogService {
 
   constructor(
@@ -69,7 +70,7 @@ export class DialogService {
     // create our dialog container and attach it to the
     // overlay.
     const containerPortal = new ComponentPortal(
-      DialogComponent,
+      DialogContainer,
       undefined,
       this.injector,
     )

diff --git a/modules/portmaster/src/app/shared/dialog/index.ts b/modules/portmaster/src/app/shared/dialog/index.ts
@@ -1,4 +1,4 @@
-export { DialogComponent } from './dialog.container';
 export * from './dialog.ref';
 export * from './dialog.service';
-export * from './confirm.dialog';
+export * from './dialog.module';
+export { ConfirmDialogConfig } from './confirm.dialog';