This is an automated email from the ASF dual-hosted git repository. dominikriemer pushed a commit to branch modernize-appearance-css in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 8c1d2d8350353803e61f4748bb2f6b41f74b3369 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Jun 22 21:54:39 2026 +0200 Harmonize dialogs --- .../dialog/card-dialog/card-dialog.component.scss | 5 +++- .../confirm-dialog/confirm-dialog.component.scss | 4 ++- .../panel-dialog/panel-dialog.component.scss | 18 ++++++++++--- .../standard-dialog/standard-dialog.component.scss | 28 +++++++++++++------- .../dialog/customize/customize.component.html | 8 +++--- .../editor/dialog/customize/customize.component.ts | 2 ++ ui/src/scss/sp/dialog.scss | 30 ++++++++++------------ ui/src/scss/sp/sp-dialog.scss | 16 +++++++++--- ui/src/scss/sp/sp-theme.scss | 13 ++++++++++ 9 files changed, 85 insertions(+), 39 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/dialog/card-dialog/card-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/card-dialog/card-dialog.component.scss index c92e4122ce..570a6ccde3 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/dialog/card-dialog/card-dialog.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/card-dialog/card-dialog.component.scss @@ -25,5 +25,8 @@ sp-card-dialog { height: 90vh; margin-top: auto; margin-bottom: auto; - border-radius: 1rem; + border: 1px solid var(--color-border-subtle); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-overlay); + overflow: hidden; } diff --git a/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss index eef4ad0780..521cf0c2b2 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss @@ -17,7 +17,9 @@ */ .footer { - margin-top: 20px; + margin-top: var(--space-lg); + padding-top: var(--space-sm); + border-top: 1px solid var(--color-border-subtle); } .neutral-action-wrapper { diff --git a/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss index cf4c869e56..9918a02dc9 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/panel-dialog/panel-dialog.component.scss @@ -20,7 +20,8 @@ sp-panel-dialog-container { width: 100%; background-color: var(--color-bg-0); color: var(--color-default-text); - box-shadow: -7px 0px 5px -5px #777; + border-left: 1px solid var(--color-border-subtle); + box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12); } .dialog-panel { @@ -37,6 +38,8 @@ sp-panel-dialog-container { width: 100%; background: var(--color-secondary); align-items: center; + border-bottom: 1px solid + color-mix(in srgb, var(--color-secondary) 78%, black); } .dialog-panel-content { @@ -45,9 +48,18 @@ sp-panel-dialog-container { } .dialog-title { - padding: 5px 5px 5px 15px; + padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-lg); - color: var(--color-bg-0); + font-weight: var(--font-weight-semibold); + color: var(--color-navigation-text); +} + +.dialog-panel-header .mat-mdc-icon-button { + color: var(--color-navigation-text); +} + +.dialog-panel-header .material-icons { + color: var(--color-navigation-text) !important; } #portal { diff --git a/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss index 885e6a1a43..e2e5cb3ab6 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/dialog/standard-dialog/standard-dialog.component.scss @@ -20,10 +20,9 @@ sp-standard-dialog-container { width: 100%; background-color: var(--color-bg-0); color: var(--color-default-text); - border-radius: 5px; - -webkit-box-shadow: 0 10px 6px -6px #777; - -moz-box-shadow: 0 10px 6px -6px #777; - box-shadow: 0 10px 6px -6px #777; + border-radius: var(--radius-md); + box-shadow: var(--shadow-overlay); + overflow: hidden; } .standard-dialog-panel { @@ -41,8 +40,10 @@ sp-standard-dialog-container { width: 100%; background: var(--color-secondary); align-items: center; - border-top-left-radius: 5px; - border-top-right-radius: 5px; + border-bottom: 1px solid + color-mix(in srgb, var(--color-secondary) 78%, black); + border-top-left-radius: var(--radius-md); + border-top-right-radius: var(--radius-md); } .dialog-panel-content { @@ -52,9 +53,18 @@ sp-standard-dialog-container { } .dialog-title { - padding: 5px 5px 5px 15px; - font-size: 20px; - color: white; + padding: var(--space-sm) var(--space-lg); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-semibold); + color: var(--color-navigation-text); +} + +.standard-dialog-panel-header .mat-mdc-icon-button { + color: var(--color-navigation-text); +} + +.standard-dialog-panel-header .material-icons { + color: var(--color-navigation-text) !important; } #portal { diff --git a/ui/src/app/editor/dialog/customize/customize.component.html b/ui/src/app/editor/dialog/customize/customize.component.html index 809113d688..a99a65a559 100644 --- a/ui/src/app/editor/dialog/customize/customize.component.html +++ b/ui/src/app/editor/dialog/customize/customize.component.html @@ -171,13 +171,12 @@ <mat-divider></mat-divider> <div class="sp-dialog-actions"> @if (!templateMode) { - <div fxLayout="row"> + <div fxLayout="row" fxLayoutGap="10px" fxFlex="100"> <button mat-button mat-flat-button color="accent" (click)="save()" - style="margin-right: 10px" [disabled]="!formValid" data-cy="sp-element-configuration-save" > @@ -197,7 +196,7 @@ <button mat-button mat-flat-button - color="accent" + class="mat-basic" [disabled]="!formValid" data-cy="create-template" (click)="triggerTemplateMode()" @@ -208,13 +207,12 @@ </div> } @if (templateMode) { - <div fxLayout="row"> + <div fxLayout="row" fxLayoutGap="10px"> <button mat-button mat-flat-button color="accent" (click)="saveTemplate()" - style="margin-right: 10px" [disabled]="!formValid" data-cy="save-template" > diff --git a/ui/src/app/editor/dialog/customize/customize.component.ts b/ui/src/app/editor/dialog/customize/customize.component.ts index eea8a9bdb9..4c42d30e32 100644 --- a/ui/src/app/editor/dialog/customize/customize.component.ts +++ b/ui/src/app/editor/dialog/customize/customize.component.ts @@ -67,6 +67,7 @@ import { PipelineElementTemplateConfigComponent } from '../../../core-ui/pipelin import { MatDivider } from '@angular/material/divider'; import { MatButton } from '@angular/material/button'; import { TranslatePipe } from '@ngx-translate/core'; +import { LayoutGapDirective } from '@ngbracket/ngx-layout'; @Component({ selector: 'sp-customize-pipeline-element', @@ -92,6 +93,7 @@ import { TranslatePipe } from '@ngx-translate/core'; MatDivider, MatButton, TranslatePipe, + LayoutGapDirective, ], }) export class CustomizeComponent implements OnInit, AfterViewInit { diff --git a/ui/src/scss/sp/dialog.scss b/ui/src/scss/sp/dialog.scss index 162bca8303..ce33757f95 100644 --- a/ui/src/scss/sp/dialog.scss +++ b/ui/src/scss/sp/dialog.scss @@ -19,13 +19,11 @@ @use './variables'; .sp-no-padding-dialog .mat-dialog-container { - box-shadow: - 0 11px 15px -7px rgba(0, 0, 0, 0.2), - 0 24px 38px 3px rgba(0, 0, 0, 0.14), - 0 9px 46px 8px rgba(0, 0, 0, 0.12); + box-shadow: var(--shadow-overlay); display: block; - padding: 0px; - border-radius: 2px; + padding: 0; + border: 1px solid var(--color-border-subtle); + border-radius: var(--radius-md); box-sizing: border-box; overflow: auto; outline: 0; @@ -34,13 +32,11 @@ } .sp.no-padding-dialog .mat-dialog-container .md-dialog { - box-shadow: - 0 11px 15px -7px rgba(0, 0, 0, 0.2), - 0 24px 38px 3px rgba(0, 0, 0, 0.14), - 0 9px 46px 8px rgba(0, 0, 0, 0.12); + box-shadow: var(--shadow-overlay); display: block; - padding: 0px; - border-radius: 2px; + padding: 0; + border: 1px solid var(--color-border-subtle); + border-radius: var(--radius-md); box-sizing: border-box; overflow: auto; outline: 0; @@ -49,8 +45,9 @@ } .sp-no-padding-dialog .mat-dialog-container .md-dialog .md-toolbar { - background: var(--color-secondary); - color: white; + background: var(--mat-sys-surface); + color: var(--mat-sys-on-surface); + border-bottom: 1px solid var(--color-border-subtle); } .sp-no-padding-dialog .mat-dialog-container .md-dialog .md-dialog-content { @@ -76,10 +73,11 @@ padding-left: 16px; min-height: 52px; overflow: hidden; - border-top: 1px solid #cccccc; + border-top: 1px solid var(--color-border-subtle); } .custom-dialog-container .mat-dialog-container { - padding: 0px; + padding: 0; overflow: auto; + border-radius: var(--radius-md); } diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/scss/sp/sp-dialog.scss index 976b8fb023..23a6a26fba 100644 --- a/ui/src/scss/sp/sp-dialog.scss +++ b/ui/src/scss/sp/sp-dialog.scss @@ -19,17 +19,25 @@ .sp-dialog-container { display: grid; height: 100%; - grid-template-rows: auto 10px 60px; + grid-template-rows: minmax(0, 1fr) auto auto; + background: var(--mat-sys-surface); + color: var(--mat-sys-on-surface); } .sp-dialog-content { - margin: 0px; + margin: 0; overflow-y: auto; flex: 1 1 auto; } .sp-dialog-actions { - padding: 10px; + min-height: 3.75rem; + padding: var(--space-sm) var(--space-lg); + border-top: 1px solid var(--color-border-subtle); + background: var(--mat-sys-surface); + display: flex; + align-items: center; + gap: var(--space-sm); } .actions-align-right { @@ -37,5 +45,5 @@ } .p-15 { - padding: 15px; + padding: var(--space-lg); } diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss index 311173e75e..18c4ece15c 100644 --- a/ui/src/scss/sp/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme.scss @@ -93,6 +93,19 @@ html { ) ); + @include mat.dialog-overrides( + ( + container-color: var(--mat-sys-surface), + container-shape: var(--radius-md), + container-elevation-shadow: var(--shadow-overlay), + subhead-color: var(--mat-sys-on-surface), + subhead-weight: var(--font-weight-semibold), + supporting-text-color: var(--mat-sys-on-surface-variant), + actions-padding: var(--space-sm) var(--space-lg), + content-padding: var(--space-lg), + ) + ); + &.dark-mode { @include mat.theme-overrides( (
