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/08 08:59:11 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-145] Improve layout of
customize dialog
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
commit d13546e591a48a0ffaf7f9244fc450839d5ab930
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 8 10:21:15 2020 +0200
[STREAMPIPES-145] Improve layout of customize dialog
---
.../components/pipeline/pipeline.component.html | 2 +-
.../components/pipeline/pipeline.component.ts | 2 +-
.../dialog/customize/customize.component.css | 39 +++++++++++++++++++
.../dialog/customize/customize.component.html | 44 ++++++++++++++++++++++
.../dialog/customize/customize.component.ts | 30 +++++++++++++++
.../dialog/panel/panel-dialog.component.html | 16 +++++---
.../dialog/panel/panel-dialog.component.scss | 32 +++++++++++-----
ui/src/app/editor-v2/editor.module.ts | 4 +-
8 files changed, 152 insertions(+), 17 deletions(-)
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.html b/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
index 5a7cdbc..ccf4572 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
@@ -23,7 +23,7 @@
<span style="z-index:5;"
[ngClass]="getElementCssClasses(pipelineElement)">
<div class="pipeline-element-progress-container sp-fade" *ngIf="pipelineElement.settings.loadingStatus">
-<!-- <md-progress-circular md-mode="indeterminate" class="pipeline-element-progress" md-diameter="40px"></md-progress-circular>-->
+ <mat-spinner [mode]="'indeterminate'" class="pipeline-element-progress" [diameter]="40"></mat-spinner>
</div>
<div class="pipeline-element-loading-container sp-fade-opacity" *ngIf="pipelineElement.settings.loadingStatus"></div>
<div class="pipeline-element-configuration-invalid {{pipelineElement.type === 'stream' ? 'pi-stream' : 'pi-processor'}}" *ngIf="pipelineElement.payload.uncompleted">
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 be53fe5..a795921 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
@@ -356,7 +356,7 @@ export class PipelineComponent implements OnInit {
inputMap["pipelineElement"] = pipelineElement;
const dialogRef = this.PanelDialogService.open(CustomizeComponent, {
- width: "400px",
+ width: "60vw",
title: "Customize " + pipelineElement.payload.name
}, inputMap);
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.css b/ui/src/app/editor-v2/dialog/customize/customize.component.css
index e69de29..916c3d1 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.css
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.css
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+.dialog-container {
+ display: flex;
+ flex-flow: column;
+ align-items: stretch;
+ flex: 1 1 100%;
+ height:100%;
+}
+
+.mat-dialog-content {
+ margin: 0px;
+ flex: 1 1 auto;
+}
+
+.mat-dialog-actions {
+ padding: 10px;
+}
+
+.customize-section {
+ display:flex;
+ flex: 1 1 auto;
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.html b/ui/src/app/editor-v2/dialog/customize/customize.component.html
index e40d375..0fa3757 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.html
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.html
@@ -16,3 +16,47 @@
~
-->
+<div class="dialog-container">
+ <div class="mat-dialog-content">
+ <div fxFlex="100" fxLayout="column">
+ <div style="height:100px;border-bottom:1px solid #ccc;padding-left:10px;padding-right:10px;background-color:#f6f6f6">
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="end end">
+ <mat-slide-toggle [(ngModel)]="showDocumentation" aria-label="Switch 1"
+ [disabled]="!pipelineElement.payload.includesAssets">
+ Show documentation
+ </mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="displayRecommended" aria-label="Switch 1">
+ Show only recommended settings
+ </mat-slide-toggle>
+ </div>
+ </div>
+ <div fxFlex="100" fxLayout="row">
+ <form name="customizeForm" flex="100">
+ <div fxFlex="100" fxLayout="column" *ngIf="restrictedEditMode">
+ <div fxLayout="column" class="customize-item-main-help" style="border: 2px solid #ffc400">
+ <div class="customize-item-title-help" style="background: #ffc400;" fxFlex="100"
+ fxLayout="row">
+ You can only modify things that don't affect your pipeline structure. To fully
+ modify this element, make sure that it doesn't connect to any successors (remove
+ outgoing connectors).
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div fxFlex="100" fxLayout="column" class="customize-section">
+
+ </div>
+ </div>
+ </div>
+
+ <div class="mat-dialog-actions">
+ <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <button mat-button mat-raised-button color="primary" (click)="save()" style="margin-right:10px;">
+ Save
+ </button>
+ <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ Cancel
+ </button>
+ </div>
+</div>
\ No newline at end of file
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 9e9811b..1254a53 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
@@ -30,6 +30,28 @@ export class CustomizeComponent implements OnInit {
@Input()
pipelineElement: PipelineElementConfig;
+ displayRecommended: boolean;
+ showDocumentation: boolean = false;
+ customizeForm: any;
+ restrictedEditMode: boolean;
+
+ selectedElement: any;
+ selection: any;
+ matchingSelectionLeft: any;
+ matchingSelectionRight: any;
+ invalid: any;
+ helpDialogVisible: any;
+ currentStaticProperty: any;
+ validationErrors: any;
+ configVisible: any;
+
+ sourceEndpoint: any;
+ sepa: any;
+
+ //ShepherdService: ShepherdService;
+
+
+
constructor(private dialogRef: DialogRef<CustomizeComponent>) {
}
@@ -38,4 +60,12 @@ export class CustomizeComponent implements OnInit {
}
+ close() {
+
+ }
+
+ save() {
+
+ }
+
}
\ 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/panel/panel-dialog.component.html
index 23c2f5f..90f2613 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
@@ -16,8 +16,14 @@
~
-->
-<div style="display:flex;justify-content:space-between;padding:0.5rem;width:100%">
- <span class="dialog-title">{{ dialogTitle }}</span>
- <button mat-button mat-icon-button (click)="closeDialog()"><i class="material-icons">clear</i></button>
-</div>
-<ng-template cdkPortalOutlet #portal></ng-template>
\ No newline at end of file
+<div fxFlex="100" fxLayout="column">
+ <div class="dialog-panel-header">
+ <span class="dialog-title">{{ dialogTitle }}</span>
+ <button mat-button mat-icon-button (click)="closeDialog()">
+ <i class="material-icons" style="font-size:30px;">clear</i>
+ </button>
+ </div>
+ <div class="dialog-panel-content">
+ <ng-template cdkPortalOutlet #portal></ng-template>
+ </div>
+</div>
\ 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/panel-dialog.component.scss
index cdeec74..c7bfe60 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
@@ -19,16 +19,30 @@
@import '../../../../scss/sp/colors';
app-dialog-container {
- width: 100%;
- display: grid;
- grid-template-rows: 40px 1fr;
- padding: 0 10px;
- background-color: #fff
+ width: 100%;
+ background-color: #fff
+}
+
+.dialog-panel-header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ background: #f6f6f6;
+ padding: 10px 0.5rem 0.5rem;
+}
+
+.dialog-panel-content {
+ flex: 1 1 100%;
}
.dialog-title {
- font-weight: bold;
- background: $sp-color-primary;
- padding:20px;
- color:white;
+ font-weight: bold;
+ border-left: 10px solid $sp-color-primary;
+ padding: 5px;
+ font-size:30px;
+ color: $sp-color-accent;
+}
+
+#portal {
+ width:100%;
}
\ 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 936e1f2..b5e0b00 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -48,6 +48,7 @@ import {OverlayModule} from "@angular/cdk/overlay";
import {PanelDialogComponent} from "./dialog/panel/panel-dialog.component";
import {PanelDialogService} from "./dialog/panel/panel-dialog.service";
import {CustomizeComponent} from "./dialog/customize/customize.component";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
@NgModule({
imports: [
@@ -61,7 +62,8 @@ import {CustomizeComponent} from "./dialog/customize/customize.component";
FormsModule,
ConnectModule,
PortalModule,
- OverlayModule
+ OverlayModule,
+ MatProgressSpinnerModule
],
declarations: [
CustomizeComponent,