This is an automated email from the ASF dual-hosted git repository. dominikriemer pushed a commit to branch fix-styling-bug-pipeline-details in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit c398da1042393606317dea77c541360391c0d8ad Author: Dominik Riemer <[email protected]> AuthorDate: Mon Jun 29 21:39:34 2026 +0200 fix: Properly position code icon button --- .../app/editor/components/pipeline/pipeline.component.html | 7 ++++++- .../app/editor/components/pipeline/pipeline.component.scss | 4 ++++ ui/src/app/editor/components/pipeline/pipeline.component.ts | 11 +++++++++++ ui/src/scss/sp/forms-mat3.scss | 12 ++++++++++-- 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html b/ui/src/app/editor/components/pipeline/pipeline.component.html index aafd90553a..ce7584440a 100644 --- a/ui/src/app/editor/components/pipeline/pipeline.component.html +++ b/ui/src/app/editor/components/pipeline/pipeline.component.html @@ -44,7 +44,12 @@ > </sp-dropped-pipeline-element> @if (readonly) { - <div class="topics-button customize-button"> + <div + class="topics-button customize-button" + [class.topics-button--with-metrics]=" + hasVisibleMetrics(pipelineElementConfig) + " + > <button class="topics-icon-button" mat-icon-button diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.scss b/ui/src/app/editor/components/pipeline/pipeline.component.scss index c7044dfa18..ed4d07af29 100644 --- a/ui/src/app/editor/components/pipeline/pipeline.component.scss +++ b/ui/src/app/editor/components/pipeline/pipeline.component.scss @@ -34,6 +34,10 @@ background: var(--mat-sys-surface); } +.topics-button--with-metrics { + top: -4.25rem; +} + .topics-icon-button { width: 1.5rem; height: 1.5rem; diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts index f82edf4a14..49b8938d6a 100644 --- a/ui/src/app/editor/components/pipeline/pipeline.component.ts +++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts @@ -237,6 +237,17 @@ export class PipelineComponent implements OnInit, OnDestroy { this.currentMouseOverElement === elementId ? '' : elementId; } + hasVisibleMetrics(pipelineElementConfig: PipelineElementConfig): boolean { + const metrics = + this.metricsInfo?.[pipelineElementConfig.payload.elementId]; + const hasMessagesIn = Object.keys(metrics?.messagesIn ?? {}).length > 0; + const hasMessagesOut = metrics?.messagesOut?.counter !== undefined; + + return pipelineElementConfig.type === 'action' + ? hasMessagesIn + : hasMessagesIn || hasMessagesOut; + } + findPipelineElementByElementId(elementId: string) { return this.allElements.find(a => a.elementId === elementId); } diff --git a/ui/src/scss/sp/forms-mat3.scss b/ui/src/scss/sp/forms-mat3.scss index ca58139f33..c5e0e11529 100644 --- a/ui/src/scss/sp/forms-mat3.scss +++ b/ui/src/scss/sp/forms-mat3.scss @@ -44,7 +44,7 @@ } .mat-mdc-form-field .mdc-text-field--outlined { - background-color: var(--color-surface-interactive); + background-color: var(--mat-sys-surface); border-radius: var(--radius-sm); transition: background-color var(--motion-duration-fast) @@ -53,7 +53,11 @@ } .mat-mdc-form-field:hover .mdc-text-field--outlined { - background-color: var(--color-surface-interactive-hover); + background-color: color-mix( + in srgb, + var(--mat-sys-primary) 3%, + var(--mat-sys-surface) + ); } .mat-mdc-form-field:has(.mdc-text-field--focused) @@ -64,4 +68,8 @@ .mat-mdc-form-field.mat-form-field-disabled { filter: saturate(0.7); } + + .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field--outlined { + background-color: var(--mat-sys-surface-container); + } }
