You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/06/11 12:51:47 UTC
[incubator-streampipes] branch STREAMPIPES-145 updated:
[STREAMPIPES-145] Add reusable dialog components
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-145 by this push:
new 2b2cd3c [STREAMPIPES-145] Add reusable dialog components
2b2cd3c is described below
commit 2b2cd3c5a4c290248808815f2a68aee113bca999
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Jun 11 14:51:30 2020 +0200
[STREAMPIPES-145] Add reusable dialog components
---
.../components/pipeline/pipeline.component.ts | 9 +--
.../base-dialog.component.ts} | 56 +++----------------
.../base-dialog.config.ts} | 31 ++---------
.../dialog/base-dialog/base-dialog.model.ts | 22 ++++++++
.../base-dialog.service.ts} | 65 +++++++++++-----------
.../dialog/{panel => base-dialog}/dialog-ref.ts | 4 +-
.../dialog/customize/customize.component.ts | 8 +--
.../panel-dialog.component.html | 0
.../panel-dialog.component.scss | 2 +-
.../panel-dialog.component.ts | 38 ++-----------
.../panel-dialog.config.ts} | 45 +++++++--------
.../standard-dialog.component.html} | 0
.../standard-dialog.component.scss} | 5 +-
.../standard-dialog.component.ts} | 42 ++++++--------
.../standard-dialog.config.ts} | 52 ++++++++---------
ui/src/app/editor-v2/editor.module.ts | 10 ++--
ui/src/app/editor-v2/model/editor.model.ts | 7 ---
.../services/editor-dialog-manager.service.ts | 11 ----
18 files changed, 156 insertions(+), 251 deletions(-)
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
index 44698e5..15cd9bf 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
@@ -37,9 +37,9 @@ import {
SpDataStream
} from "../../../core-model/gen/streampipes-model";
import {ObjectProvider} from "../../services/object-provider.service";
-import {PanelDialogService} from "../../dialog/panel/panel-dialog.service";
import {CustomizeComponent} from "../../dialog/customize/customize.component";
-import {DialogRef} from "../../dialog/panel/dialog-ref";
+import {PanelType} from "../../dialog/base-dialog/base-dialog.model";
+import {DialogService} from "../../dialog/base-dialog/base-dialog.service";
@Component({
selector: 'pipeline',
@@ -92,7 +92,7 @@ export class PipelineComponent implements OnInit {
private ShepherdService: ShepherdService,
private PipelineValidationService: PipelineValidationService,
private RestApi: RestApi,
- private PanelDialogService: PanelDialogService) {
+ private dialogService: DialogService) {
this.plumbReady = false;
this.currentMouseOverElement = "";
this.currentPipelineModel = new Pipeline();
@@ -355,8 +355,9 @@ export class PipelineComponent implements OnInit {
const inputMap = {};
inputMap["pipelineElement"] = pipelineElement;
- const dialogRef = this.PanelDialogService.open(CustomizeComponent, {
+ const dialogRef = this.dialogService.open(CustomizeComponent,{
width: "60vw",
+ panelType: PanelType.SLIDE_IN_PANEL,
title: "Customize " + pipelineElement.payload.name
}, inputMap);
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.component.ts
similarity index 54%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
copy to ui/src/app/editor-v2/dialog/base-dialog/base-dialog.component.ts
index fa2fc6e..f1c7291 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
+++ b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.component.ts
@@ -16,49 +16,11 @@
*
*/
+import {EventEmitter, Input, Output, ViewChild} from "@angular/core";
import {CdkPortalOutlet, ComponentPortal, Portal} from "@angular/cdk/portal";
-import {
- Component,
- EventEmitter, HostBinding, HostListener,
- Input,
- OnInit,
- Output,
- ViewChild,
- ViewEncapsulation
-} from "@angular/core";
-import {animate, state, style, transition, trigger} from "@angular/animations";
import {DialogRef} from "./dialog-ref";
-@Component({
- selector: "app-dialog-container",
- templateUrl: './panel-dialog.component.html',
- encapsulation: ViewEncapsulation.None,
- styleUrls: ['./panel-dialog.component.scss'],
- animations: [trigger('flyInOut', [
- state('void', style({
- transform: 'translateX(80vw)',
- })),
- state('in', style({
- transform: 'translateX(0)',
- })),
- state('out', style({
- transform: 'translateX(80vw)'
- })),
- transition('* => *', animate(300))
- ])]
-})
-export class PanelDialogComponent<T> implements OnInit {
-
- @HostBinding('@flyInOut') slideDown = 'in';
-
- @HostListener('@flyInOut.done', ['$event']) startDrawerHandler(event: any): void {
- if (event.toState === "out") {
- this.containerEvent.emit({key: "CLOSE"});
- }
- }
-
- @Output()
- animationStateChanged = new EventEmitter<AnimationEvent>();
+export abstract class BaseDialogComponent<T> {
@Input()
dialogTitle = "";
@@ -78,10 +40,9 @@ export class PanelDialogComponent<T> implements OnInit {
@Input()
dialogRef: DialogRef<T>;
- constructor() {
- }
- ngOnInit() {
+ protected constructor() {
+
}
attach() {
@@ -89,11 +50,10 @@ export class PanelDialogComponent<T> implements OnInit {
return c.instance;
}
- closeDialog() {
- this.slideDown = "out";
- }
-
close() {
this.dialogRef.close();
}
-}
\ No newline at end of file
+
+ abstract closeDialog();
+}
+
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.config.ts
similarity index 62%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
copy to ui/src/app/editor-v2/dialog/base-dialog/base-dialog.config.ts
index c2016a1..a6b43cf 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.config.ts
@@ -16,34 +16,11 @@
*
*/
-@import '../../../../scss/sp/colors';
+import {Overlay} from "@angular/cdk/overlay";
-app-dialog-container {
- width: 100%;
- background-color: #fff;
- box-shadow: -7px 0px 5px -5px #5d5d5d;
-}
+export interface BaseDialogConfig {
-.dialog-panel-header {
- display: flex;
- justify-content: space-between;
- height: 50px;
- min-height: 50px;
- width: 100%;
- background: $sp-color-accent;
- align-items: center;
-}
+ getPosition(overlay: Overlay);
-.dialog-panel-content {
- flex: 1 1 100%;
-}
-
-.dialog-title {
- padding: 5px 5px 5px 15px;
- font-size:25px;
- color: white;
-}
-
-#portal {
- width:100%;
+ getOverlayConfig(config: any, positionStrategy: any)
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.model.ts b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.model.ts
new file mode 100644
index 0000000..826eb4b
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.model.ts
@@ -0,0 +1,22 @@
+import {PanelDialogComponent} from "../panel-dialog/panel-dialog.component";
+import {StandardDialogComponent} from "../standard-dialog/standard-dialog.component";
+
+export type BaseDialogComponentUnion = PanelDialogComponent<unknown> | StandardDialogComponent<unknown>;
+
+export enum PanelType {
+ STANDARD_PANEL,
+ SLIDE_IN_PANEL
+}
+
+export interface DialogConfig {
+ width?: string;
+ panelType: PanelType;
+ disableClose?: boolean;
+ autoFocus?: boolean;
+ title: string;
+}
+
+export interface DialogPanelConfig {
+ maxWidth: string,
+ height: string,
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.service.ts
similarity index 58%
rename from ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts
rename to ui/src/app/editor-v2/dialog/base-dialog/base-dialog.service.ts
index b024d4d..201b7fb 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.service.ts
+++ b/ui/src/app/editor-v2/dialog/base-dialog/base-dialog.service.ts
@@ -16,17 +16,22 @@
*
*/
-import {ComponentType, Overlay, OverlayRef,} from "@angular/cdk/overlay";
-import {ComponentPortal, PortalInjector,} from "@angular/cdk/portal";
-import {PanelDialogComponent} from "./panel-dialog.component";
-import {DialogConfig} from "../../model/editor.model";
+import {ComponentType, Overlay, OverlayRef} from "@angular/cdk/overlay";
import {ComponentRef, Injectable, Injector} from "@angular/core";
import {DialogRef} from "./dialog-ref";
+import {ComponentPortal, PortalInjector} from "@angular/cdk/portal";
+import {BaseDialogComponent} from "./base-dialog.component";
+import {BaseDialogComponentUnion, DialogConfig, PanelType} from "./base-dialog.model";
+import {PanelDialogComponent} from "../panel-dialog/panel-dialog.component";
+import {StandardDialogComponent} from "../standard-dialog/standard-dialog.component";
+import {BaseDialogConfig} from "./base-dialog.config";
+import {PanelDialogConfig} from "../panel-dialog/panel-dialog.config";
+import {StandardDialogConfig} from "../standard-dialog/standard-dialog.config";
@Injectable({
providedIn: "root"
})
-export class PanelDialogService {
+export class DialogService {
constructor(private overlay: Overlay, private injector: Injector) {
@@ -35,24 +40,13 @@ export class PanelDialogService {
public open<T>(component: ComponentType<T>,
config?: DialogConfig,
inputMap?: Object): DialogRef<T> {
- config = config || {width: "auto", title: ""};
-
- const positionStrategy = this.overlay
- .position()
- .global()
- .top("0")
- .right("0");
-
- const overlay = this.overlay.create({
- hasBackdrop: true,
- positionStrategy,
- panelClass: "dialog-container",
- width: config.width,
- maxWidth: "90vw",
- height: "100vh",
- });
+ config = config || {width: "auto", title: "", panelType: PanelType.SLIDE_IN_PANEL};
+
+ const positionStrategy = this.getPositionStrategy(config.panelType);
+ const panelConfig: BaseDialogConfig = this.getConfig(config.panelType);
+ const overlay = this.overlay.create(panelConfig.getOverlayConfig(config, positionStrategy));
- const panelDialogContainer = new ComponentPortal(PanelDialogComponent);
+ const panelDialogContainer = new ComponentPortal(this.getPanel(config.panelType));
const panelDialogContainerRef = overlay.attach(panelDialogContainer);
panelDialogContainerRef.instance.dialogTitle = config.title;
const dialogRef = new DialogRef<T>(overlay, panelDialogContainerRef);
@@ -72,10 +66,15 @@ export class PanelDialogService {
return dialogRef;
}
+ private createInjector<T, OUTER extends BaseDialogComponent<T>>(dialogRef: DialogRef<T>) {
+ const injectorMap = new WeakMap();
+ injectorMap.set(DialogRef, dialogRef);
+ return new PortalInjector(this.injector, injectorMap);
+ }
+
private applyDialogProperties(panelDialogComponentRef: ComponentRef<any>,
overlayRef: OverlayRef,
- config: DialogConfig
- ) {
+ config: DialogConfig) {
panelDialogComponentRef.instance.containerEvent.subscribe(e => {
if (e.key === "CLOSE") {
overlayRef.dispose();
@@ -86,13 +85,17 @@ export class PanelDialogService {
}
}
- private createInjector<T>(dialogRef: DialogRef<T>) {
- const injectorMap = new WeakMap();
- injectorMap.set(DialogRef, dialogRef);
- return new PortalInjector(this.injector, injectorMap);
- }
-}
-
+ getPositionStrategy(panelType: PanelType) {
+ return this.getConfig(panelType).getPosition(this.overlay);
+ };
+ getPanel(panelType: PanelType): ComponentType<BaseDialogComponentUnion> {
+ return panelType == PanelType.SLIDE_IN_PANEL ? PanelDialogComponent : StandardDialogComponent;
+ }
+ getConfig(panelType: PanelType): BaseDialogConfig {
+ return panelType == PanelType.SLIDE_IN_PANEL ? new PanelDialogConfig() :
+ new StandardDialogConfig();
+ }
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/dialog-ref.ts b/ui/src/app/editor-v2/dialog/base-dialog/dialog-ref.ts
similarity index 90%
rename from ui/src/app/editor-v2/dialog/panel/dialog-ref.ts
rename to ui/src/app/editor-v2/dialog/base-dialog/dialog-ref.ts
index fd560bd..e58762e 100644
--- a/ui/src/app/editor-v2/dialog/panel/dialog-ref.ts
+++ b/ui/src/app/editor-v2/dialog/base-dialog/dialog-ref.ts
@@ -19,14 +19,14 @@
import {ComponentRef} from "@angular/core";
import {OverlayRef} from "@angular/cdk/overlay";
import {Observable, Subject} from "rxjs";
-import {PanelDialogComponent} from "./panel-dialog.component";
+import {BaseDialogComponentUnion} from "./base-dialog.model";
export class DialogRef<T> {
private _componentInstance: ComponentRef<T>;
private _afterClosed: Subject<any> = new Subject<any>();
constructor(private overlayRef: OverlayRef,
- private dialogContainerRef: ComponentRef<PanelDialogComponent<unknown>>) {
+ private dialogContainerRef: ComponentRef<BaseDialogComponentUnion>) {
}
get componentInstance() {
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.ts b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
index 42d2909..70377aa 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
@@ -17,12 +17,8 @@
*/
import {Component, Input, OnInit} from "@angular/core";
-import {
- InvocablePipelineElementUnion,
- PipelineElementConfig,
- PipelineElementUnion
-} from "../../model/editor.model";
-import {DialogRef} from "../panel/dialog-ref";
+import {InvocablePipelineElementUnion, PipelineElementConfig} from "../../model/editor.model";
+import {DialogRef} from "../base-dialog/dialog-ref";
import {JsplumbService} from "../../services/jsplumb.service";
import {EventSchema} from "../../../core-model/gen/streampipes-model";
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.html
similarity index 100%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
copy to ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.html
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.scss
similarity index 96%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
copy to ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.scss
index c2016a1..b19537d 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.scss
@@ -16,7 +16,7 @@
*
*/
-@import '../../../../scss/sp/colors';
+@import 'src/scss/sp/colors';
app-dialog-container {
width: 100%;
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.ts
similarity index 72%
rename from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
rename to ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.ts
index fa2fc6e..470add9 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.ts
+++ b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.component.ts
@@ -16,18 +16,17 @@
*
*/
-import {CdkPortalOutlet, ComponentPortal, Portal} from "@angular/cdk/portal";
import {
Component,
- EventEmitter, HostBinding, HostListener,
- Input,
+ EventEmitter,
+ HostBinding,
+ HostListener,
OnInit,
Output,
- ViewChild,
ViewEncapsulation
} from "@angular/core";
import {animate, state, style, transition, trigger} from "@angular/animations";
-import {DialogRef} from "./dialog-ref";
+import {BaseDialogComponent} from "../base-dialog/base-dialog.component";
@Component({
selector: "app-dialog-container",
@@ -47,7 +46,7 @@ import {DialogRef} from "./dialog-ref";
transition('* => *', animate(300))
])]
})
-export class PanelDialogComponent<T> implements OnInit {
+export class PanelDialogComponent<T> extends BaseDialogComponent<T> implements OnInit {
@HostBinding('@flyInOut') slideDown = 'in';
@@ -60,40 +59,15 @@ export class PanelDialogComponent<T> implements OnInit {
@Output()
animationStateChanged = new EventEmitter<AnimationEvent>();
- @Input()
- dialogTitle = "";
-
- @Input()
- comp: ComponentPortal<T>;
-
- @Output()
- containerEvent = new EventEmitter<{ key: "CLOSE" }>();
-
- @ViewChild("portal", {read: CdkPortalOutlet, static: true})
- portal: CdkPortalOutlet;
-
- @Input()
- selectedPortal: Portal<T>;
-
- @Input()
- dialogRef: DialogRef<T>;
-
constructor() {
+ super();
}
ngOnInit() {
}
- attach() {
- const c = this.portal.attach(this.selectedPortal);
- return c.instance;
- }
-
closeDialog() {
this.slideDown = "out";
}
- close() {
- this.dialogRef.close();
- }
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.config.ts
similarity index 59%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
copy to ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.config.ts
index c2016a1..3a0d479 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/panel-dialog/panel-dialog.config.ts
@@ -16,34 +16,29 @@
*
*/
-@import '../../../../scss/sp/colors';
+import {BaseDialogConfig} from "../base-dialog/base-dialog.config";
+import {Overlay} from "@angular/cdk/overlay";
-app-dialog-container {
- width: 100%;
- background-color: #fff;
- box-shadow: -7px 0px 5px -5px #5d5d5d;
-}
+export class PanelDialogConfig implements BaseDialogConfig {
-.dialog-panel-header {
- display: flex;
- justify-content: space-between;
- height: 50px;
- min-height: 50px;
- width: 100%;
- background: $sp-color-accent;
- align-items: center;
-}
+ getPosition(overlay: Overlay) {
+ return overlay
+ .position()
+ .global()
+ .top("0")
+ .right("0");
+ }
-.dialog-panel-content {
- flex: 1 1 100%;
-}
+ getOverlayConfig(config: any, positionStrategy: any) {
+ return {
+ hasBackdrop: true,
+ positionStrategy,
+ panelClass: "dialog-container",
+ width: config.width,
+ maxWidth: "90vw",
+ height: "100vh",
+ };
+ }
-.dialog-title {
- padding: 5px 5px 5px 15px;
- font-size:25px;
- color: white;
-}
-#portal {
- width:100%;
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.html
similarity index 100%
rename from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
rename to ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.html
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.scss
similarity index 93%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
copy to ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.scss
index c2016a1..1f5afb9 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.scss
@@ -16,9 +16,9 @@
*
*/
-@import '../../../../scss/sp/colors';
+@import 'src/scss/sp/colors';
-app-dialog-container {
+standard-dialog-container {
width: 100%;
background-color: #fff;
box-shadow: -7px 0px 5px -5px #5d5d5d;
@@ -36,6 +36,7 @@ app-dialog-container {
.dialog-panel-content {
flex: 1 1 100%;
+ background: white;
}
.dialog-title {
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.ts
similarity index 59%
copy from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
copy to ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.ts
index c2016a1..2f54cd2 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.component.ts
@@ -16,34 +16,26 @@
*
*/
-@import '../../../../scss/sp/colors';
+import {Component, OnInit, ViewEncapsulation} from "@angular/core";
+import {BaseDialogComponent} from "../base-dialog/base-dialog.component";
-app-dialog-container {
- width: 100%;
- background-color: #fff;
- box-shadow: -7px 0px 5px -5px #5d5d5d;
-}
+@Component({
+ selector: "standard-dialog-container",
+ templateUrl: './standard-dialog.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./standard-dialog.component.scss']
+})
+export class StandardDialogComponent<T> extends BaseDialogComponent<T> implements OnInit {
-.dialog-panel-header {
- display: flex;
- justify-content: space-between;
- height: 50px;
- min-height: 50px;
- width: 100%;
- background: $sp-color-accent;
- align-items: center;
-}
+ constructor() {
+ super();
+ }
-.dialog-panel-content {
- flex: 1 1 100%;
-}
+ ngOnInit() {
+ }
-.dialog-title {
- padding: 5px 5px 5px 15px;
- font-size:25px;
- color: white;
-}
+ closeDialog() {
+ this.containerEvent.emit({key: "CLOSE"});
+ }
-#portal {
- width:100%;
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.config.ts
similarity index 50%
rename from ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
rename to ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.config.ts
index c2016a1..35ffccc 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/standard-dialog/standard-dialog.config.ts
@@ -16,34 +16,34 @@
*
*/
-@import '../../../../scss/sp/colors';
+import {BaseDialogConfig} from "../base-dialog/base-dialog.config";
+import {DialogPanelConfig} from "../base-dialog/base-dialog.model";
+import {Overlay} from "@angular/cdk/overlay";
-app-dialog-container {
- width: 100%;
- background-color: #fff;
- box-shadow: -7px 0px 5px -5px #5d5d5d;
-}
+export class StandardDialogConfig implements BaseDialogConfig {
-.dialog-panel-header {
- display: flex;
- justify-content: space-between;
- height: 50px;
- min-height: 50px;
- width: 100%;
- background: $sp-color-accent;
- align-items: center;
-}
+ getConfig(): DialogPanelConfig {
+ let config: DialogPanelConfig = {} as DialogPanelConfig;
+ config.maxWidth = "90vw";
+ config.height = "50vh";
+ return config;
+ }
-.dialog-panel-content {
- flex: 1 1 100%;
-}
+ getPosition(overlay: Overlay) {
+ return overlay
+ .position()
+ .global()
+ .centerHorizontally()
+ .centerVertically();
+ }
-.dialog-title {
- padding: 5px 5px 5px 15px;
- font-size:25px;
- color: white;
-}
-
-#portal {
- width:100%;
+ getOverlayConfig(config: any, positionStrategy: any) {
+ return {
+ hasBackdrop: true,
+ positionStrategy,
+ panelClass: "dialog-container",
+ width: config.width,
+ maxWidth: "90vw",
+ }
+ }
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/editor.module.ts b/ui/src/app/editor-v2/editor.module.ts
index b5e0b00..14b3cd0 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -45,10 +45,11 @@ import {PipelineElementOptionsComponent} from "./components/pipeline-element-opt
import {PipelineElementRecommendationService} from "./services/pipeline-element-recommendation.service";
import {PortalModule} from "@angular/cdk/portal";
import {OverlayModule} from "@angular/cdk/overlay";
-import {PanelDialogComponent} from "./dialog/panel/panel-dialog.component";
-import {PanelDialogService} from "./dialog/panel/panel-dialog.service";
+import {PanelDialogComponent} from "./dialog/panel-dialog/panel-dialog.component";
import {CustomizeComponent} from "./dialog/customize/customize.component";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {StandardDialogComponent} from "./dialog/standard-dialog/standard-dialog.component";
+import {DialogService} from "./dialog/base-dialog/base-dialog.service";
@NgModule({
imports: [
@@ -73,7 +74,8 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
PipelineElementComponent,
PipelineElementOptionsComponent,
PipelineComponent,
- PanelDialogComponent
+ PanelDialogComponent,
+ StandardDialogComponent
],
providers: [
EditorService,
@@ -87,7 +89,7 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
JsplumbService,
JsplumbConfigService,
ObjectProvider,
- PanelDialogService,
+ DialogService,
PipelineEditorService,
PipelinePositioningService,
PipelineValidationService,
diff --git a/ui/src/app/editor-v2/model/editor.model.ts b/ui/src/app/editor-v2/model/editor.model.ts
index 9a98ce9..d09d2d6 100644
--- a/ui/src/app/editor-v2/model/editor.model.ts
+++ b/ui/src/app/editor-v2/model/editor.model.ts
@@ -52,13 +52,6 @@ export enum PipelineElementType {
DataSink
}
-export interface DialogConfig {
- width?: string;
- disableClose?: boolean;
- autoFocus?: boolean;
- title: string;
-}
-
export type PipelineElementUnion = SpDataSet | SpDataStream | DataProcessorInvocation | DataSinkInvocation;
export type InvocablePipelineElementUnion = DataProcessorInvocation | DataSinkInvocation;
diff --git a/ui/src/app/editor-v2/services/editor-dialog-manager.service.ts b/ui/src/app/editor-v2/services/editor-dialog-manager.service.ts
index 0da1af1..a8785a9 100644
--- a/ui/src/app/editor-v2/services/editor-dialog-manager.service.ts
+++ b/ui/src/app/editor-v2/services/editor-dialog-manager.service.ts
@@ -47,17 +47,6 @@ export class EditorDialogManager {
this.$mdDialog.show(dialogContent);
}
- showCustomizeDialog(elementData, sourceEndpoint, sepa, restrictedEditMode) {
- var dialogContent = this.DialogBuilder.getDialogTemplate(CustomizeController, require('../../editor/dialog/customize-pipeline-element/customizeElementDialog.tmpl.html'));
- dialogContent.locals = {
- elementData: elementData,
- sourceEndpoint: sourceEndpoint,
- sepa: sepa,
- restrictedEditMode: restrictedEditMode
- }
- return this.$mdDialog.show(dialogContent);
- };
-
showCustomizeStreamDialog(streamDescription) {
var dialogContent = this.DialogBuilder.getDialogTemplate(TopicSelectionDialog, require('../../editor/dialog/topic/topic-selection-modal.tmpl.html'));
dialogContent.locals = {