This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch 4078-harmonize-pipeline-editor-look-and-feel
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/4078-harmonize-pipeline-editor-look-and-feel by this push:
new 81cbc7f155 style(#4078): Harmonize pipeline editor design
81cbc7f155 is described below
commit 81cbc7f1551e8f49ca2e8f55a25199e0f3d56d51
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Dec 30 11:04:37 2025 +0100
style(#4078): Harmonize pipeline editor design
---
.../manager/health/PipelineHealthCheck.java | 65 +++++++++++-----------
.../basic-view/basic-view.component.html | 2 +-
.../components/basic-view/basic-view.component.ts | 3 +
.../pipeline-element/pipeline-element.component.ts | 2 +-
.../pipeline-assembly-drawing-area.component.scss | 23 +++++++-
.../pipeline-assembly.component.html | 8 +--
.../pipeline-assembly.component.scss | 4 --
.../pipeline-element-icon-stand.component.html | 58 +++++++------------
.../pipeline-element-icon-stand.component.scss | 17 +++---
.../pipeline-element-icon-stand.component.ts | 7 +--
.../pipeline-element-options.component.scss | 15 ++---
.../pipeline-element-statistics.component.scss | 4 +-
.../components/pipeline/pipeline.component.scss | 18 +++---
.../components/pipeline/pipeline.component.ts | 4 +-
ui/src/app/editor/editor.component.html | 42 ++++++--------
ui/src/app/editor/editor.component.scss | 4 ++
.../app/editor/services/jsplumb-config.service.ts | 22 ++++----
.../pipeline-feature-card.component.ts | 4 +-
ui/src/scss/sp/feature-card.scss | 1 -
ui/src/scss/sp/main.scss | 21 ++-----
ui/src/scss/sp/pipeline-element-options.scss | 4 +-
ui/src/scss/sp/pipeline-element.scss | 14 ++---
22 files changed, 162 insertions(+), 180 deletions(-)
diff --git
a/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/health/PipelineHealthCheck.java
b/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/health/PipelineHealthCheck.java
index 06a6d3a8ec..707b6cce09 100644
---
a/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/health/PipelineHealthCheck.java
+++
b/streampipes-pipeline-management/src/main/java/org/apache/streampipes/manager/health/PipelineHealthCheck.java
@@ -39,6 +39,7 @@ import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
+import java.util.Objects;
import java.util.Set;
import java.util.concurrent.atomic.AtomicBoolean;
import java.util.stream.Collectors;
@@ -92,39 +93,41 @@ public class PipelineHealthCheck implements Runnable {
List<InvocableStreamPipesEntity> graphs =
RunningPipelineElementStorage.runningProcessorsAndSinks
.get(pipeline.getPipelineId());
- graphs.forEach(graph -> {
- String instanceId = extractInstanceId(graph);
- if (allRunningInstances.stream()
- .noneMatch(runningInstanceId ->
runningInstanceId.equals(instanceId))) {
- if (shouldRetry(instanceId)) {
- String endpointUrl = graph.getSelectedEndpointUrl();
- shouldUpdatePipeline.set(true);
- boolean success;
- try {
- endpointUrl = findEndpointUrl(graph);
- success = new InvokeHttpRequest()
- .execute(graph, endpointUrl,
pipeline.getPipelineId()).isSuccess();
- } catch (NoServiceEndpointsAvailableException e) {
- success = false;
- }
- if (!success) {
- failedInstances.add(instanceId);
- addFailedAttemptNotification(pipelineNotifications, graph);
- increaseFailedAttempt(instanceId);
- LOG.info("Could not restore pipeline element {} of pipeline {}
({}/{})",
- graph.getName(), pipeline.getName(),
failedRestartAttempts.get(instanceId),
- MAX_FAILED_ATTEMPTS);
- } else {
- recoveredInstances.add(instanceId);
- addSuccessfulRestoreNotification(pipelineNotifications, graph);
- resetFailedAttempts(instanceId);
- graph.setSelectedEndpointUrl(endpointUrl);
- LOG.info("Successfully restored pipeline element {} of
pipeline {}",
- graph.getName(), pipeline.getName());
+ if (Objects.nonNull(graphs)) {
+ graphs.forEach(graph -> {
+ String instanceId = extractInstanceId(graph);
+ if (allRunningInstances.stream()
+ .noneMatch(runningInstanceId ->
runningInstanceId.equals(instanceId))) {
+ if (shouldRetry(instanceId)) {
+ String endpointUrl = graph.getSelectedEndpointUrl();
+ shouldUpdatePipeline.set(true);
+ boolean success;
+ try {
+ endpointUrl = findEndpointUrl(graph);
+ success = new InvokeHttpRequest()
+ .execute(graph, endpointUrl,
pipeline.getPipelineId()).isSuccess();
+ } catch (NoServiceEndpointsAvailableException e) {
+ success = false;
+ }
+ if (!success) {
+ failedInstances.add(instanceId);
+ addFailedAttemptNotification(pipelineNotifications, graph);
+ increaseFailedAttempt(instanceId);
+ LOG.info("Could not restore pipeline element {} of pipeline
{} ({}/{})",
+ graph.getName(), pipeline.getName(),
failedRestartAttempts.get(instanceId),
+ MAX_FAILED_ATTEMPTS);
+ } else {
+ recoveredInstances.add(instanceId);
+ addSuccessfulRestoreNotification(pipelineNotifications,
graph);
+ resetFailedAttempts(instanceId);
+ graph.setSelectedEndpointUrl(endpointUrl);
+ LOG.info("Successfully restored pipeline element {} of
pipeline {}",
+ graph.getName(), pipeline.getName());
+ }
}
}
- }
- });
+ });
+ }
if (shouldUpdatePipeline.get()) {
var currentPipeline = getPipeline(pipeline.getPipelineId());
if (!failedInstances.isEmpty()) {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
index 9371fec2b9..003e31bffe 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
@@ -16,7 +16,7 @@
~
-->
-<div fxLayout="column" class="page-container">
+<div fxLayout="column" class="page-container" [style.margin]="margin">
@if (!hideNavbar) {
<div fxLayout="row" class="p-0 page-container-nav">
<div fxLayout="fill" fxFlex="100" class="pl-5 pr-5">
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
index fb5ffcf2b1..54915d78a9 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
@@ -38,6 +38,9 @@ export class SpBasicViewComponent {
@Input()
hideNavbar = false;
+ @Input()
+ margin = '10px';
+
constructor(private router: Router) {}
navigateBack() {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.ts
index 1952ef4fbd..9c145ab4a5 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.ts
@@ -84,7 +84,7 @@ export class PipelineElementComponent {
} else if (this.iconStandSize) {
return 'width:30px;height:30px;';
} else {
- return 'width:50px;height:50px;';
+ return 'width:40px;height:40px;';
}
}
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.scss
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.scss
index 41e539ef31..e100347f04 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.scss
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.scss
@@ -44,8 +44,25 @@
width: 4000px;
z-index: 0;
margin: -1px;
+ --dot-minor: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.18));
+ --dot-major: light-dark(rgba(0, 0, 0, 0.38), rgba(255, 255, 255, 0.34));
- background-color: var(--color-bg-1);
- background-image: var(--canvas-color);
- background-size: 15px 15px;
+ background-color: var(--color-bg-0, var(--bg));
+ background-image:
+ radial-gradient(
+ circle at 8px 8px,
+ var(--dot-minor) 1px,
+ transparent 1px
+ ),
+ radial-gradient(
+ circle at 40px 40px,
+ var(--dot-major) 1px,
+ transparent 1px
+ );
+ background-size:
+ 16px 16px,
+ 80px 80px;
+ background-position:
+ 0 0,
+ 0 0;
}
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
index 01125bc105..3914c4fc89 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
@@ -16,8 +16,8 @@
~
-->
-<div fxFlex="100" fxLayout="column">
- <div class="pipeline-assembly-options page-container-nav">
+<sp-basic-view>
+ <div nav fxFlex="100">
<sp-pipeline-assembly-options
fxFlex="100"
#assemblyOptionsComponent
@@ -33,7 +33,7 @@
>
</sp-pipeline-assembly-options>
</div>
- <div id="outerAssemblyArea" class="outerAssembly assembly-border">
+ <div id="outerAssemblyArea" class="outerAssembly">
@if (rawPipelineModel) {
<sp-pipeline-assembly-drawing-area
#drawingAreaComponent
@@ -52,4 +52,4 @@
</sp-pipeline-assembly-drawing-area>
}
</div>
-</div>
+</sp-basic-view>
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
index 28c2a3539a..c79fd09d4a 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
@@ -33,10 +33,6 @@
overflow: hidden;
}
-.assembly-border {
- border: 1px solid var(--color-bg-3);
-}
-
.color-warn {
color: var(--color-warn);
}
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
index 2f7f236f26..499550f40c 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -18,46 +18,30 @@
<div
fxFlex="100"
fxLayout="column"
- class="border"
- style="width: 250px"
[attr.data-cy]="'sp-pipeline-element-selection'"
>
- <div class="editorIconStandOptions page-container-nav" style="padding:
0px">
- <div
- fxFlex="100"
- fxLayout="row"
- fxLayoutAlign="start center"
- style="padding-left: 5px"
- >
- <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
- <div class="form-field-small">
- <mat-form-field
- color="accent"
- class="search-field"
- appearance="outline"
+ <div class="page-container-nav" style="padding: 0px">
+ <div class="form-field-small mw-100 p-sm">
+ <mat-form-field color="accent" class="w-100" appearance="outline">
+ <input
+ matInput
+ type="text"
+ (keyup)="makeDraggable()"
+ [placeholder]="'Find element' | translate"
+ [(ngModel)]="elementFilter"
+ />
+ <mat-icon matPrefix color="accent">search</mat-icon>
+ @if (elementFilter) {
+ <button
+ matSuffix
+ mat-icon-button
+ aria-label="Find element"
+ (click)="clearInput()"
>
- <input
- matInput
- type="text"
- (keyup)="makeDraggable()"
- [placeholder]="'Find element' | translate"
- [(ngModel)]="elementFilter"
- />
- <mat-icon matPrefix color="accent">search</mat-icon>
- @if (elementFilter) {
- <button
- matSuffix
- mat-icon-button
- aria-label="Find element"
- (click)="clearInput()"
- >
- <mat-icon>close</mat-icon>
- </button>
- }
- </mat-form-field>
- </div>
- <span fxFlex></span>
- </div>
+ <mat-icon>close</mat-icon>
+ </button>
+ }
+ </mat-form-field>
</div>
</div>
@if (allElements) {
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
index 797913ee47..6255f29a3e 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
@@ -23,15 +23,11 @@
}
.icon-stand {
- max-height: calc(100vh - 148px);
+ max-height: calc(100vh - 126px);
overflow-y: auto;
margin-top: 5px;
}
-.border {
- border: 1px solid var(--color-bg-3);
-}
-
.pe-row {
padding-top: 5px;
padding-bottom: 5px;
@@ -83,14 +79,11 @@
.panel-outer {
margin-bottom: 10px;
margin-left: 0;
- margin-right: 0px;
- border-right: 1px solid var(--color-bg-3);
- border-bottom: 1px solid var(--color-bg-3);
- border-top: 1px solid var(--color-bg-3);
+ margin-right: 0;
}
.search-field {
- width: 230px;
+ width: 100%;
}
.group-outer {
@@ -110,3 +103,7 @@
.sort-option {
cursor: pointer;
}
+
+.mw-100 {
+ max-width: 100%;
+}
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
index 3a55ee34ae..ff094b94ab 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
@@ -149,13 +149,10 @@ export class PipelineElementIconStandComponent
stack: '.draggable-pipeline-element',
start(el, ui) {
ui.helper.appendTo('#content');
- $('#outerAssemblyArea').css('border', '3px dashed
#39b54a');
+ $('#outerAssemblyArea').css('border', '2px dashed
#39b54a');
},
stop(el, ui) {
- $('#outerAssemblyArea').css(
- 'border',
- '1px solid var(--color-bg-3)',
- );
+ $('#outerAssemblyArea').css('border', '0');
},
});
});
diff --git
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.scss
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.scss
index 16465254de..f605ae8c56 100644
---
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.scss
@@ -19,8 +19,8 @@
.options-button {
cursor: pointer;
position: absolute;
- height: 30%;
- width: 30%;
+ height: 20px;
+ width: 20px;
border-radius: 20%;
box-shadow: 0 0 3px var(--color-primary);
text-align: center;
@@ -29,17 +29,18 @@
}
.mat-mdc-icon-button.options-icon-button {
- width: 25px;
- height: 25px;
- line-height: 25px;
+ width: 20px;
+ height: 20px;
+ line-height: 1.2;
border-radius: 0;
padding: 0;
color: var(--mat-sys-on-primary);
}
.options-icon-size {
- font-size: 20px;
- line-height: 25px;
+ font-size: 1.08rem;
+ width: inherit;
+ height: inherit;
}
.customize-button {
diff --git
a/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics.component.scss
b/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics.component.scss
index 581ac2cbd8..92ea685da0 100644
---
a/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-statistics/pipeline-element-statistics.component.scss
@@ -26,8 +26,8 @@
.statistics {
position: relative;
- left: -45px;
- top: -35px;
+ left: -54px;
+ top: -30px;
height: 30px;
width: 180px;
overflow: hidden;
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.scss
b/ui/src/app/editor/components/pipeline/pipeline.component.scss
index c6b2283c70..e47a6b33c9 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.scss
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.scss
@@ -18,28 +18,28 @@
.topics-button {
cursor: pointer;
- width: 30px;
- height: 30px;
+ width: 20px;
+ height: 20px;
border-radius: 20%;
box-shadow: 0 0 3px var(--color-primary);
background-color: var(--color-primary);
color: rgba(255, 255, 255, 0.75);
position: absolute;
- left: 35%;
- top: 75%;
+ left: 40%;
+ top: 82%;
z-index: 50;
margin-top: 5px;
}
.topics-icon-button {
- width: 100%;
- height: 100%;
+ width: 20px;
+ height: 20px;
padding: 0;
}
.topics-icon-size {
- font-size: var(--font-size-md);
- width: var(--font-size-md);
- height: var(--font-size-md);
+ font-size: 1.08rem;
color: white;
+ width: 20px;
+ height: 20px;
}
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts
b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index a312894935..6b35f1b43b 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -151,8 +151,8 @@ export class PipelineComponent implements OnInit, OnDestroy
{
): Record<string, string> {
return {
position: 'absolute',
- width: '90px',
- height: '90px',
+ width: '70px',
+ height: '70px',
left: pipelineElementConfig.settings.position.x + 'px',
top: pipelineElementConfig.settings.position.y + 'px',
};
diff --git a/ui/src/app/editor/editor.component.html
b/ui/src/app/editor/editor.component.html
index 3ba0f9c70d..38a4d76a3c 100644
--- a/ui/src/app/editor/editor.component.html
+++ b/ui/src/app/editor/editor.component.html
@@ -16,7 +16,7 @@
~
-->
-<div fxLayout="column" class="page-container">
+<div fxLayout="column" fxFlex="100" class="pipeline-editor-outer">
@if (!allElementsLoaded) {
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
<mat-spinner
@@ -26,33 +26,25 @@
></mat-spinner>
<p>{{ 'Preparing pipeline editor...' | translate }}</p>
</div>
- }
- @if (allElementsLoaded) {
- <div
- class="fixed-height editor-container-inner"
- fxLayout="row"
- fxFlex="100"
- >
- <div fxFlex="250px">
- <div
- id="shepherd-test"
- style="
- padding: 0;
- border-bottom: 1px solid #ffffff;
- margin-right: 5px;
- "
- >
- @if (allElementsLoaded) {
- <sp-pipeline-element-icon-stand
- [allElements]="allElements"
- >
- </sp-pipeline-element-icon-stand>
- }
- </div>
- </div>
+ } @else {
+ <div fxLayout="row" fxFlex="100">
+ <sp-basic-view
+ style="width: 250px"
+ [hideNavbar]="true"
+ margin="10px 0 0 10px"
+ >
+ @if (allElementsLoaded) {
+ <sp-pipeline-element-icon-stand
+ id="shepherd-test"
+ [allElements]="allElements"
+ >
+ </sp-pipeline-element-icon-stand>
+ }
+ </sp-basic-view>
@if (allElementsLoaded && allMetadataLoaded) {
<sp-pipeline-assembly
fxFlex="100"
+ class="w-100"
style="margin-left: 10px"
[rawPipelineModel]="rawPipelineModel"
[allElements]="allElements"
diff --git a/ui/src/app/editor/editor.component.scss
b/ui/src/app/editor/editor.component.scss
index 23cf249c67..edc86d51bb 100644
--- a/ui/src/app/editor/editor.component.scss
+++ b/ui/src/app/editor/editor.component.scss
@@ -16,6 +16,10 @@
*
*/
+.pipeline-editor-outer {
+ min-height: calc(100vh - 56px);
+}
+
.text-color {
color: var(--color-primary);
}
diff --git a/ui/src/app/editor/services/jsplumb-config.service.ts
b/ui/src/app/editor/services/jsplumb-config.service.ts
index 9795df34b3..21b8465061 100644
--- a/ui/src/app/editor/services/jsplumb-config.service.ts
+++ b/ui/src/app/editor/services/jsplumb-config.service.ts
@@ -29,7 +29,7 @@ export class JsplumbConfigService {
constructor() {}
getEditorConfig() {
- return this.makeConfig(this.makeSettings(12, 5, 30, 30, 2, 80));
+ return this.makeConfig(this.makeSettings(8, 3, 15, 15, 2, 80));
}
getEndpointTypeConfig(): Record<string, EndpointTypeDescriptor> {
@@ -65,25 +65,25 @@ export class JsplumbConfigService {
getConnectorStyleSuccess() {
return {
- stroke: '#6ab26c',
- outlineStroke: '#6ab26c',
- strokeWidth: 5,
+ stroke: 'var(--color-success)',
+ outlineStroke: 'var(--color-success)',
+ strokeWidth: 3,
};
}
getConnectorStyleError() {
return {
- stroke: '#b74e4e',
- outlineStroke: '#b74e4e',
- strokeWidth: 5,
+ stroke: 'var(--color-error)',
+ outlineStroke: 'var(--color-error)',
+ strokeWidth: 3,
};
}
getConnectorStyleWarning() {
return {
- outlineStroke: '#d3c545',
- stroke: '#d3c545',
- strokeWidth: 5,
+ outlineStroke: 'var(--color-warning)',
+ stroke: 'var(--color-warning)',
+ strokeWidth: 3,
};
}
@@ -157,7 +157,7 @@ export class JsplumbConfigService {
connector: this.getDefaultConnector(settings),
source: true,
maxConnections: -1,
- anchor: 'Right',
+ anchor: [1, 0.5, 1, 0, 2, 0],
connectorOverlays: [this.defaultConnectorOverlay(settings)],
};
}
diff --git
a/ui/src/app/pipelines/components/pipeline-feature-card/pipeline-feature-card.component.ts
b/ui/src/app/pipelines/components/pipeline-feature-card/pipeline-feature-card.component.ts
index 5c73fa2456..4a76817985 100644
---
a/ui/src/app/pipelines/components/pipeline-feature-card/pipeline-feature-card.component.ts
+++
b/ui/src/app/pipelines/components/pipeline-feature-card/pipeline-feature-card.component.ts
@@ -87,6 +87,8 @@ export class PipelineFeatureCardComponent implements OnInit {
navigateToPipelines(): void {
this.onClose();
- this.router.navigate(['pipelines', 'details', this.resourceId]);
+ setTimeout(() => {
+ this.router.navigate(['pipelines', 'details', this.resourceId]);
+ }, 500);
}
}
diff --git a/ui/src/scss/sp/feature-card.scss b/ui/src/scss/sp/feature-card.scss
index 677c3eb8a8..d635108f3d 100644
--- a/ui/src/scss/sp/feature-card.scss
+++ b/ui/src/scss/sp/feature-card.scss
@@ -26,7 +26,6 @@
.feature-card-meta-card {
padding: 1.25rem;
box-shadow: none;
- background: var(--color-bg-0);
color: var(--color-default-text);
display: flex;
flex-direction: column;
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index c61be69160..35c8bd5dbe 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -454,22 +454,9 @@ md-content {
padding: 5px;
}
-.editorIconStandOptions {
- color: black;
- background: var(--color-bg-1);
- border-bottom: 1px solid var(--color-bg-3);
- padding: 0px;
- width: 100%;
-}
-
.outer-assembly-preview {
position: relative;
overflow: auto;
- box-shadow:
- 0 1px 3px 0 rgba(0, 0, 0, 0.2),
- 0 1px 1px 0 rgba(0, 0, 0, 0.14),
- 0 2px 1px -1px rgba(0, 0, 0, 0.12);
- border: 1px solid var(--color-bg-2);
display: flex;
flex: 1 1 0;
max-width: 100%;
@@ -520,9 +507,9 @@ md-content {
}
.connectable-editor {
- height: 90px !important;
- width: 90px !important;
- line-height: 90px;
+ height: 70px !important;
+ width: 70px !important;
+ line-height: 70px;
}
.connectable-element {
@@ -686,7 +673,7 @@ textarea {
}
.element-text-icon {
- font-size: 20px;
+ font-size: var(--font-size-lg);
}
.element-text-icon-small {
diff --git a/ui/src/scss/sp/pipeline-element-options.scss
b/ui/src/scss/sp/pipeline-element-options.scss
index 6ad08f156a..fbe5db8183 100644
--- a/ui/src/scss/sp/pipeline-element-options.scss
+++ b/ui/src/scss/sp/pipeline-element-options.scss
@@ -33,8 +33,8 @@
position: absolute;
left: 0%;
top: 50%;
- width: 104%;
- padding: 60px 0 10px;
+ width: 106%;
+ padding: 50px 0 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 50426cd36b..aee7f7a619 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: -27px;
+ top: -25px;
width: 100%;
height: 100%;
}
@@ -33,16 +33,16 @@
}
.pipeline-element-configuration-invalid-icon {
- font-size: 20pt;
- color: red;
+ font-size: var(--font-size-lg);
+ color: var(--color-error);
}
.pipeline-element-configuration-modified-icon {
- font-size: 20pt;
- color: #d3c545;
+ font-size: var(--font-size-lg);
+ color: var(--color-warning);
}
.pipeline-element-configuration-ok-icon {
- font-size: 20pt;
- color: #6ab26c;
+ font-size: var(--font-size-lg);
+ color: var(--color-success);
}
