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 678c5386b8a9678ac5758ce53fd45a9ec9b0b98e Author: Dominik Riemer <[email protected]> AuthorDate: Mon Jun 22 21:39:29 2026 +0200 Harmonize table design --- .../components/sp-table/sp-table.component.scss | 131 +++++++++++++++++++-- .../lib/components/sp-table/sp-table.component.ts | 29 ++++- ui/src/scss/sp/sp-theme.scss | 27 +++++ 3 files changed, 172 insertions(+), 15 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss index 3d122a76ca..12e3c9f628 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss @@ -16,14 +16,82 @@ * */ +:host { + --table-divider-color: color-mix( + in srgb, + var(--mat-sys-on-surface) 10%, + transparent + ); + --table-divider-strong-color: color-mix( + in srgb, + var(--mat-sys-on-surface) 16%, + transparent + ); +} + .paginator-container { - border-top: 1px solid var(--color-bg-3); + border-top: 1px solid var(--table-divider-color); + background: var(--mat-sys-surface); +} + +.paginator-container .mat-mdc-paginator-page-size-select { + width: 5.25rem; +} + +.paginator-container .mat-mdc-paginator .mat-mdc-select { + line-height: 1.5; + margin-top: 5px; +} + +.paginator-container + .mat-mdc-paginator-page-size-select + .mdc-text-field--outlined { + height: 1.875rem; + background: var(--color-surface-interactive); + border-radius: var(--radius-sm); +} + +.paginator-container + .mat-mdc-paginator-page-size-select + .mat-mdc-form-field-infix { + display: flex; + align-items: center; + min-height: 1.875rem; + padding-top: 0; + padding-bottom: 0; +} + +.paginator-container + .mat-mdc-paginator-page-size-select + .mat-mdc-select-trigger { + display: flex; + align-items: center; + height: 1.875rem; + color: var(--color-primary); + font-weight: var(--font-weight-medium); +} + +.paginator-container .mat-mdc-paginator-page-size-select .mat-mdc-select-value { + display: flex; + align-items: center; + height: 100%; + line-height: inherit; +} + +.paginator-container + .mat-mdc-paginator-page-size-select + .mat-mdc-select-arrow-wrapper { + display: flex; + align-items: center; + height: 100%; + transform: none; } .selection-toolbar { - border-bottom: 1px solid var(--color-bg-3); + border-bottom: 1px solid var(--color-border-subtle); + border-radius: var(--radius-sm); margin-bottom: var(--space-md); - padding-bottom: var(--space-xs); + padding: var(--space-sm); } .selection-toolbar__left { @@ -35,7 +103,10 @@ } .grouping-toolbar { - padding: var(--space-sm) 0 var(--space-lg); + padding: var(--space-sm); + margin-bottom: var(--space-md); + border-bottom: 1px solid var(--color-border-subtle); + border-radius: var(--radius-sm); } .grouping-toolbar--standalone { @@ -85,16 +156,51 @@ } .table-search-field__clear { - color: var(--color-text-2); + color: var(--color-primary); +} + +.sp-table { + border-collapse: collapse; +} + +.mat-mdc-header-row { + background: var(--mat-sys-surface); + border-bottom: none; + box-shadow: inset 0 -1px var(--table-divider-strong-color); +} + +.mat-mdc-header-cell { + color: var(--mat-sys-on-surface); + font-weight: var(--font-weight-semibold); + border-bottom: 0; +} + +.mat-mdc-row { + transition: background-color var(--motion-duration-fast) + var(--motion-easing-standard); +} + +.mat-mdc-row:hover:not(.grouped-table-row--header) { + background-color: var(--color-surface-interactive-hover); +} + +.mat-mdc-row:has(.mat-mdc-checkbox-checked) { + background-color: var(--color-surface-selected); +} + +.mat-mdc-row:has(.mat-mdc-checkbox-checked):hover { + background-color: var(--color-surface-selected-hover); } -.mat-mdc-row:hover { - background-color: var(--color-bg-1); +.cursor-pointer:focus-visible { + outline: 2px solid var(--mat-sys-primary); + outline-offset: -2px; } .mat-mdc-no-data-row { height: var(--mat-table-row-item-container-height, 52px); text-align: center; + color: var(--mat-sys-on-surface-variant); } .cursor-pointer { @@ -120,7 +226,7 @@ } .asset-context-empty { - color: var(--color-text-2); + color: var(--mat-sys-on-surface-variant); font-size: var(--font-size-xs); } @@ -135,13 +241,14 @@ .grouped-table-header { padding: var(--space-md) var(--space-lg); - border-top: 1px solid var(--color-bg-3); - border-bottom: 1px solid var(--color-bg-3); - background: var(--color-bg-1); + border-top: 1px solid var(--table-divider-color); + border-bottom: 1px solid var(--table-divider-color); + background: var(--color-surface-interactive); } .grouped-table-title { margin: 0; font-size: var(--font-size-md); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); + color: var(--mat-sys-on-surface); } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts index 2b01a2b6cd..23e530d5b3 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts @@ -223,6 +223,8 @@ export class SpTableComponent<T> private renderedDataSubscription?: Subscription; private assetDataSubscription?: Subscription; private nameSearchSubscription?: Subscription; + private columnDefsSubscription?: Subscription; + private registeredColumnDefs = new Set<MatColumnDef>(); private nameSearchInput$ = new Subject<string>(); private viewInitialized = false; private defaultFilterPredicates = new WeakMap< @@ -261,9 +263,11 @@ export class SpTableComponent<T> } ngAfterContentInit() { - this.columnDefs.forEach(columnDef => - this.table.addColumnDef(columnDef), - ); + this.syncColumnDefs(); + this.columnDefsSubscription = this.columnDefs.changes.subscribe(() => { + this.syncColumnDefs(); + this.table.renderRows(); + }); this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef)); this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef), @@ -312,6 +316,7 @@ export class SpTableComponent<T> this.renderedDataSubscription?.unsubscribe(); this.assetDataSubscription?.unsubscribe(); this.nameSearchSubscription?.unsubscribe(); + this.columnDefsSubscription?.unsubscribe(); } @HostListener('window:resize') @@ -562,6 +567,24 @@ export class SpTableComponent<T> }); } + private syncColumnDefs() { + const currentColumnDefs = new Set(this.columnDefs.toArray()); + + this.registeredColumnDefs.forEach(columnDef => { + if (!currentColumnDefs.has(columnDef)) { + this.table.removeColumnDef(columnDef); + this.registeredColumnDefs.delete(columnDef); + } + }); + + currentColumnDefs.forEach(columnDef => { + if (!this.registeredColumnDefs.has(columnDef)) { + this.table.addColumnDef(columnDef); + this.registeredColumnDefs.add(columnDef); + } + }); + } + private refreshRenderedRows() { this.updateRenderedState(this.getCurrentPageRows(), false); } diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss index 64711cf114..311173e75e 100644 --- a/ui/src/scss/sp/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme.scss @@ -66,6 +66,33 @@ html { ) ); + @include mat.table-overrides( + ( + background-color: var(--mat-sys-surface), + header-headline-color: var(--mat-sys-on-surface), + header-headline-weight: var(--font-weight-semibold), + row-item-label-text-color: var(--mat-sys-on-surface), + row-item-outline-color: color-mix( + in srgb, + var(--mat-sys-on-surface) 10%, + transparent + ), + ) + ); + + @include mat.paginator-overrides( + ( + container-background-color: transparent, + container-text-color: var(--mat-sys-on-surface-variant), + enabled-icon-color: var(--color-primary), + container-size: 2.5rem, + form-field-container-height: 1.875rem, + form-field-container-vertical-padding: 0, + page-size-select-touch-target-height: 1.875rem, + select-trigger-text-size: var(--font-size-sm), + ) + ); + &.dark-mode { @include mat.theme-overrides( (
