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 2022/04/11 21:49:28 UTC
[incubator-streampipes] branch dev updated: [hotfix] Improve options layout in pipeline editor
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 85b105007 [hotfix] Improve options layout in pipeline editor
85b105007 is described below
commit 85b1050077eb82ca0bdd9285d75cbf36ae4e31ba
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Apr 11 23:49:19 2022 +0200
[hotfix] Improve options layout in pipeline editor
---
.../pipeline-element-options.component.html | 26 ++++++-------
.../pipeline-element/pipeline-element.component.ts | 2 +-
.../components/pipeline/pipeline.component.ts | 4 +-
ui/src/app/editor/services/jsplumb.service.ts | 4 +-
ui/src/scss/sp/main.scss | 12 +++---
ui/src/scss/sp/pipeline-element-options.scss | 45 +++++++++++++---------
ui/src/scss/sp/pipeline-element.scss | 2 +-
7 files changed, 51 insertions(+), 44 deletions(-)
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
index adb8d5ff2..b2597f3a3 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
@@ -15,50 +15,50 @@
~ limitations under the License.
~
-->
-<div >
+<div>
<div [ngStyle]="currentMouseOverElement==pipelineElement.payload.dom ? {opacity: 1} : {opacity: 1}" class="sp-fade-options">
<span class="options-button customize-button" *ngIf="pipelineElement.type!='stream'" style="z-index:10">
- <button mat-button mat-icon-button matTooltip="Configure Element"
+ <button class="options-icon-button" mat-button mat-icon-button matTooltip="Configure Element"
[matTooltipPosition]="'above'"
(click)="customizeElement(pipelineElement)">
- <i class="material-icons">settings</i>
+ <i class="material-icons options-icon-size">settings</i>
</button>
</span>
<span class="options-button customize-button"
*ngIf="pipelineElement.type=='stream' && isWildcardTopic()"
style="z-index:10">
- <button mat-button mat-icon-button matTooltip="Configure Element" [matTooltipPosition]="'above'"
+ <button class="options-icon-button" mat-button mat-icon-button matTooltip="Configure Element" [matTooltipPosition]="'above'"
(click)="openCustomizeStreamDialog()">
- <i class="material-icons">settings</i>
+ <i class="material-icons options-icon-size">settings</i>
</button>
</span>
<span class="options-button delete-button" style="z-index:10">
- <button mat-button mat-icon-button matTooltip="Delete Element" [matTooltipPosition]="'above'"
+ <button class="options-icon-button" mat-button mat-icon-button matTooltip="Delete Element" [matTooltipPosition]="'above'"
(click)="removeElement(pipelineElement)">
- <i class="material-icons">clear</i>
+ <i class="material-icons options-icon-size">clear</i>
</button>
</span>
<span class="options-button possible-button" *ngIf="pipelineElement.type!='action'" style="z-index:10">
- <button mat-button mat-icon-button matTooltip="Compatible Elements" [matTooltipPosition]="'below'"
+ <button class="options-icon-button" mat-button mat-icon-button matTooltip="Compatible Elements" [matTooltipPosition]="'below'"
[disabled]="!possibleElements || possibleElements.length == 0"
(click)="openPossibleElementsDialog()"
[attr.data-cy]="'sp-possible-elements-' + pipelineElement.payload.name.toLowerCase().replaceAll(' ', '_')"_>
- <i class="material-icons">account_tree</i>
+ <i class="material-icons options-icon-size">account_tree</i>
</button>
</span>
<span class="options-button recommended-button"
*ngIf="pipelineElement.type!='action' && (recommendationsAvailable) && recommendedElements.length > 0"
style="z-index:10">
- <button mat-button mat-icon-button matTooltip="Recommended Elements" [matTooltipPosition]="'below'"
+ <button class="options-icon-button" mat-button mat-icon-button matTooltip="Recommended Elements" [matTooltipPosition]="'below'"
(click)="showRecommendations($event)"
[disabled]="!recommendationsAvailable">
- <i class="material-icons">add</i>
+ <i class="material-icons options-icon-size">add</i>
</button>
</span>
<span class="options-button help-button" style="z-index:10">
- <button matTooltip="Help" [matTooltipPosition]="'below'"
+ <button class="options-icon-button" matTooltip="Help" [matTooltipPosition]="'below'"
mat-button mat-icon-button (click)="openHelpDialog()">
- <i class="material-icons">help</i>
+ <i class="material-icons options-icon-size">help</i>
</button>
</span>
<div class="editor-pe-info" [ngClass]="'pe-info-' + pipelineElementCssType">
diff --git a/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts b/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts
index 3dddcb389..f6ac75cb0 100644
--- a/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts
+++ b/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts
@@ -78,7 +78,7 @@ export class PipelineElementComponent implements OnInit {
} else if (this.iconStandSize) {
return 'width:30px;height:30px;';
} else {
- return 'width:70px;height:70px;';
+ return 'width:50px;height:50px;';
}
}
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index e7c9b0b0a..79fe561aa 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -155,8 +155,8 @@ export class PipelineComponent implements OnInit, OnDestroy {
getElementCss(currentPipelineElementSettings) {
return 'position:absolute;'
- + (this.preview ? 'width:75px;' : 'width:110px;')
- + (this.preview ? 'height:75px;' : 'height:110px;')
+ + (this.preview ? 'width:75px;' : 'width:90px;')
+ + (this.preview ? 'height:75px;' : 'height:90px;')
+ 'left: ' + currentPipelineElementSettings.position.x + 'px; '
+ 'top: ' + currentPipelineElementSettings.position.y + 'px; ';
}
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index fb1712ca1..efb4390ce 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -304,9 +304,9 @@ export class JsplumbService {
this.jsplumbEndpointService.getInputEndpoint(preview, pipelineElementDomId, 0));
} else {
jsplumbBridge.addEndpoint(pipelineElementDomId,
- this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.25, pipelineElementDomId, 0));
+ this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.3, pipelineElementDomId, 0));
jsplumbBridge.addEndpoint(pipelineElementDomId,
- this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.75, pipelineElementDomId, 1));
+ this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.7, pipelineElementDomId, 1));
}
}
return pipelineElementDomId;
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index bdf1edf35..69dfbbb36 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -788,9 +788,9 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
vertical-align: top;
background-color: var(--color-pe);
display: inline-block;
- height: 80px;
- width: 80px;
- line-height: 80px;
+ height: 70px;
+ width: 70px;
+ line-height: 70px;
margin-left: 3%;
margin-top: 5px;
box-shadow: 1px 1px 2px var(--color-shadow);
@@ -988,9 +988,9 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
}
.connectable-editor {
- height: 110px !important;
- width: 110px !important;
- line-height: 110px;
+ height: 90px !important;
+ width: 90px !important;
+ line-height: 90px;
}
.connectable-element {
diff --git a/ui/src/scss/sp/pipeline-element-options.scss b/ui/src/scss/sp/pipeline-element-options.scss
index 014ca9838..084bdc55a 100644
--- a/ui/src/scss/sp/pipeline-element-options.scss
+++ b/ui/src/scss/sp/pipeline-element-options.scss
@@ -21,9 +21,9 @@
.options-button {
cursor: pointer;
position: absolute;
- height: 40%;
- width: 40%;
- border-radius: 50%;
+ height: 30%;
+ width: 30%;
+ border-radius: 20%;
box-shadow: 0 0 3px var(--color-accent);
text-align: center;
padding: 1px 1px;
@@ -31,36 +31,43 @@
color: rgba(255, 255, 255, 0.75);
}
-.customize-button {
- left: -20%;
- top: -10%;
+.mat-icon-button.options-icon-button {
+ width: 25px;
+ height: 25px;
+ line-height: 25px;
+ border-radius: 0;
}
-.preview-button {
- left: 25%;
- top: -10%;
+.options-icon-size {
+ font-size: 20px;
+ line-height: 20px;
+}
+
+.customize-button {
+ left: 2%;
+ top: -35%;
}
.delete-button {
- left: 70%;
- top: -10%;
+ left: 73%;
+ top: -35%;
background-color: darkred;
box-shadow: 0 0 3px darkred;
}
.help-button {
- left: 70%;
- top: 70%;
+ left: 37.5%;
+ top: -35%;
}
.recommended-button {
- left: 25%;
- top: 70%;
+ left: 53%;
+ top: 85%;
}
.possible-button {
- left: -20%;
- top: 70%;
+ left: 18%;
+ top: 85%;
}
.help-button-icon-stand {
@@ -81,8 +88,8 @@
position: absolute;
left: 0%;
top: 50%;
- width: 100%;
- padding: 70px 0px 10px;
+ width: 104%;
+ padding: 65px 0px 10px;
font-size: smaller;
text-align: center;
box-shadow: 0 0 2px #555;
diff --git a/ui/src/scss/sp/pipeline-element.scss b/ui/src/scss/sp/pipeline-element.scss
index f817c5665..ee0c51e4b 100644
--- a/ui/src/scss/sp/pipeline-element.scss
+++ b/ui/src/scss/sp/pipeline-element.scss
@@ -19,7 +19,7 @@
.pipeline-element-configuration-status {
position: absolute;
left: 20px;
- top: -37px;
+ top: -27px;
width: 100%;
height: 100%;
}