[hotfix] Improve options layout in pipeline editor

HelenParr · Apr 11, 2022 · 85b1050 · 85b1050
1 parent 2070ad5
commit 85b1050
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 44 deletions.
diff --git a/...rc/app/editor/components/pipeline-element-options/pipeline-element-options.component.html b/...rc/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,46 +21,53 @@
 .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;
   background-color: var(--color-accent);
   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
@@ -19,7 +19,7 @@
 .pipeline-element-configuration-status {
   position: absolute;
   left: 20px;
-  top: -37px;
+  top: -27px;
   width: 100%;
   height: 100%;
 }