You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2026/06/22 20:20:13 UTC
(streampipes) 02/03: Harmonize table design
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 <do...@gmail.com>
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(
(