This is an automated email from the ASF dual-hosted git repository.
dominikriemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 278567ee34 style: Harmonize button and table layout (#4608)
278567ee34 is described below
commit 278567ee34f0454eafff6708e9a8dce3bbdc7b14
Author: Dominik Riemer <[email protected]>
AuthorDate: Sun Jun 28 21:24:11 2026 +0200
style: Harmonize button and table layout (#4608)
---
ui/cypress/support/utils/dataset/DatasetUtils.ts | 66 ++++-
ui/deployment/theme/_custom-variables.scss | 28 ++-
.../alert-banner/alert-banner.component.scss | 5 +
.../pipeline-element.component.scss | 23 ++
.../components/sp-table/sp-table.component.scss | 129 +++++++++-
.../lib/components/sp-table/sp-table.component.ts | 29 ++-
.../dialog/card-dialog/card-dialog.component.scss | 5 +-
.../confirm-dialog/confirm-dialog.component.scss | 4 +-
.../panel-dialog/panel-dialog.component.scss | 17 +-
.../standard-dialog/standard-dialog.component.scss | 28 ++-
.../configure-schema.component.scss | 4 -
.../last-updated-formatter.service.ts | 22 ++
.../simple-metrics/simple-metrics.component.html | 11 +-
.../simple-metrics/simple-metrics.component.scss} | 12 +-
.../simple-metrics/simple-metrics.component.ts | 2 +-
.../core-ui/status/status-widget.component.scss | 57 +++--
.../core/components/toolbar/toolbar.component.scss | 5 +
.../chart-preview/chart-preview.component.scss | 6 +-
.../panel/dashboard-panel.component.html | 1 +
.../panel/dashboard-panel.component.scss | 10 +
.../datalake-configuration.component.html | 6 +-
.../datalake-configuration.component.ts | 15 +-
.../datalake-last-event-label.component.html} | 40 +---
.../datalake-last-event-label.component.scss} | 9 +-
.../datalake-last-event-label.component.ts | 69 ++++++
.../pipeline-element-icon-stand-row.component.html | 87 +++----
.../pipeline-element-icon-stand-row.component.scss | 127 ++++++++--
.../pipeline-element-icon-stand-row.component.ts | 16 +-
.../pipeline-element-icon-stand.component.scss | 17 +-
.../pipeline-element-options.component.html | 146 +++++------
.../pipeline-element-options.component.scss | 82 ++++---
.../components/pipeline/pipeline.component.scss | 37 +--
.../dialog/customize/customize.component.html | 8 +-
.../editor/dialog/customize/customize.component.ts | 2 +
ui/src/scss/sp/_variables.scss | 57 ++++-
ui/src/scss/sp/buttons-mat3.scss | 266 ++++++++++++++++++---
ui/src/scss/sp/dialog.scss | 30 ++-
ui/src/scss/sp/forms-mat3.scss | 37 ++-
ui/src/scss/sp/main.scss | 140 ++++++-----
ui/src/scss/sp/mat-tab.scss | 44 +++-
ui/src/scss/sp/pipeline-element-options.scss | 50 ++--
ui/src/scss/sp/sp-dialog.scss | 16 +-
ui/src/scss/sp/sp-theme.scss | 115 ++++++++-
43 files changed, 1374 insertions(+), 506 deletions(-)
diff --git a/ui/cypress/support/utils/dataset/DatasetUtils.ts
b/ui/cypress/support/utils/dataset/DatasetUtils.ts
index 482c79eda0..1c9e63ba8d 100644
--- a/ui/cypress/support/utils/dataset/DatasetUtils.ts
+++ b/ui/cypress/support/utils/dataset/DatasetUtils.ts
@@ -148,7 +148,9 @@ export class DatasetUtils {
): Cypress.Chainable<string> {
this.refreshDataLakeMeasures();
return this.getDatasetLastEventCell(datasetName).then($cell => {
- const lastEvent = $cell.text().trim();
+ const lastEvent = this.getComparableLastEventValueFromElements(
+ Array.from($cell),
+ );
if (this.isDatasetNotEmptyValue(lastEvent)) {
return lastEvent;
@@ -201,11 +203,7 @@ export class DatasetUtils {
previousLastEvent: string,
datasetName?: string,
) {
- this.waitForDatasetNotEmpty(datasetName).should(lastEvent => {
- expect(this.getComparableLastEventValue(lastEvent)).not.to.equal(
- this.getComparableLastEventValue(previousLastEvent),
- );
- });
+ this.waitForDatasetLastEventChanged(previousLastEvent, datasetName);
}
private static getDatasetLastEventCell(datasetName?: string) {
@@ -229,6 +227,62 @@ export class DatasetUtils {
return exactTimeMatch?.[1] ?? trimmedValue;
}
+ private static waitForDatasetLastEventChanged(
+ previousLastEvent: string,
+ datasetName?: string,
+ attempts = 30,
+ ): Cypress.Chainable<string> {
+ const previousComparableValue =
+ this.getComparableLastEventValue(previousLastEvent);
+
+ this.refreshDataLakeMeasures();
+ return this.getDatasetLastEventCell(datasetName).then($cell => {
+ const lastEvent = this.getComparableLastEventValueFromElements(
+ Array.from($cell),
+ );
+ const lastEventChanged =
+ this.isDatasetNotEmptyValue(lastEvent) &&
+ this.getComparableLastEventValue(lastEvent) !==
+ previousComparableValue;
+
+ if (lastEventChanged) {
+ return lastEvent;
+ } else if (attempts > 0) {
+ cy.wait(1000);
+ return this.waitForDatasetLastEventChanged(
+ previousLastEvent,
+ datasetName,
+ attempts - 1,
+ );
+ } else {
+ expect(
+ this.getComparableLastEventValue(lastEvent),
+ ).not.to.equal(previousComparableValue);
+ return lastEvent;
+ }
+ });
+ }
+
+ private static getComparableLastEventValueFromElements(
+ cells: HTMLElement[],
+ ): string {
+ const rawLastEventValue = cells
+ .flatMap(cell =>
+ Array.from(
+ cell.querySelectorAll('sp-datalake-last-event-label'),
+ ),
+ )
+ .map(label => label.getAttribute('data-last-event-value'))
+ .find(value => value && this.isDatasetNotEmptyValue(value));
+
+ return (
+ rawLastEventValue ??
+ this.getComparableLastEventValue(
+ cells.map(cell => cell.textContent ?? '').join(' '),
+ )
+ );
+ }
+
public static openLatestEventsTab() {
GeneralUtils.tab('Latest events');
}
diff --git a/ui/deployment/theme/_custom-variables.scss
b/ui/deployment/theme/_custom-variables.scss
index abb2def7ed..d9d25bf633 100644
--- a/ui/deployment/theme/_custom-variables.scss
+++ b/ui/deployment/theme/_custom-variables.scss
@@ -22,7 +22,7 @@
--color-primary: #1b1464;
--color-primary-dark: #83a3de;
--color-secondary: rgb(57, 181, 74);
- --color-secondary-dark: #16cc39;
+ --color-secondary-dark: #7ac98a;
--color-loading-bar: var(--color-primary);
--color-primary-alt: rgb(59, 92, 149);
@@ -50,7 +50,31 @@
--color-primary: var(--color-primary-dark);
--color-secondary: var(--color-secondary-dark);
--color-menubar-text-menu-group: #120c47;
- --color-navigation-text: #121212;
+ --color-navigation-bg: #123b28;
+ --color-navigation-hover: #185236;
+ --color-navigation-selected: var(--color-secondary);
+ --color-navigation-bg-selected: color-mix(
+ in srgb,
+ var(--color-navigation-selected) 18%,
+ var(--color-navigation-bg)
+ );
+ --color-navigation-text: rgba(255, 255, 255, 0.9);
+ --color-navigation-link-text: rgba(255, 255, 255, 0.86);
+ --color-navigation-divider: rgba(255, 255, 255, 0.12);
+ --color-menubar-bg: var(--color-navigation-bg);
+ --color-menubar-bg-menu-item: transparent;
+ --color-menubar-bg-menu-item-hover: var(--color-navigation-hover);
+ --color-menubar-bg-menu-item-selected: var(--color-navigation-bg-selected);
+ --color-menubar-bg-menu-group-hover: color-mix(
+ in srgb,
+ var(--color-navigation-hover) 72%,
+ transparent
+ );
+ --color-menubar-bg-menu-group-selected:
var(--color-navigation-bg-selected);
+ --color-menubar-text-menu-item: var(--color-navigation-link-text);
+ --color-menubar-text-menu-item-hover: var(--color-navigation-text);
+ --color-menubar-text-menu-group: rgba(255, 255, 255, 0.68);
+ --color-menubar-text-menu-group-hover: var(--color-navigation-text);
--content-box-color: #404040;
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/alert-banner/alert-banner.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/alert-banner/alert-banner.component.scss
index 8400ca7770..fcb9d8f623 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/alert-banner/alert-banner.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/alert-banner/alert-banner.component.scss
@@ -24,6 +24,7 @@
gap: 0.75rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
+ border: 1px solid transparent;
}
.alert-icon {
@@ -51,6 +52,7 @@
.alert-info {
background-color: var(--color-info-bg);
color: var(--color-info);
+ border-color: color-mix(in srgb, var(--color-info) 24%, transparent);
}
.alert-icon-info {
@@ -60,6 +62,7 @@
.alert-warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
+ border-color: color-mix(in srgb, var(--color-warning) 24%, transparent);
}
.alert-icon-warning {
color: var(--color-warning);
@@ -68,6 +71,7 @@
.alert-error {
background-color: var(--color-error-bg);
color: var(--color-error);
+ border-color: color-mix(in srgb, var(--color-error) 24%, transparent);
}
.alert-icon-error {
color: var(--color-error);
@@ -76,6 +80,7 @@
.alert-success {
background-color: var(--color-success-bg);
color: var(--color-success);
+ border-color: color-mix(in srgb, var(--color-success) 24%, transparent);
}
.alert-icon-success {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.scss
index 581807cf7a..d67736b8ef 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element/pipeline-element.component.scss
@@ -16,10 +16,33 @@
*
*/
+.text-small,
+.element-text-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 1;
+}
+
.text-small {
font-size: 8pt;
}
.pipeline-element-image {
+ display: block;
+ background: transparent;
+ mix-blend-mode: normal;
+}
+
+:host-context(.dark-mode) .pipeline-element-image {
mix-blend-mode: multiply;
}
+
+:host {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ line-height: 1;
+}
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..31dea4817c 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,81 @@
*
*/
+: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);
margin-bottom: var(--space-md);
- padding-bottom: var(--space-xs);
+ padding: var(--space-sm);
}
.selection-toolbar__left {
@@ -35,7 +102,9 @@
}
.grouping-toolbar {
- padding: var(--space-sm) 0 var(--space-lg);
+ padding: var(--space-sm);
+ margin-bottom: var(--space-md);
+ border-radius: var(--radius-sm);
}
.grouping-toolbar--standalone {
@@ -85,16 +154,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 +224,7 @@
}
.asset-context-empty {
- color: var(--color-text-2);
+ color: var(--mat-sys-on-surface-variant);
font-size: var(--font-size-xs);
}
@@ -135,13 +239,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/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..4c4194a969 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,7 @@ sp-panel-dialog-container {
width: 100%;
background-color: var(--color-bg-0);
color: var(--color-default-text);
- box-shadow: -7px 0px 5px -5px #777;
+ box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
}
.dialog-panel {
@@ -37,6 +37,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 +47,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/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss
b/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss
index 63da642e69..cf0f1a803c 100644
---
a/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss
+++
b/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss
@@ -17,10 +17,6 @@
*/
:host {
- --mat-button-toggle-selected-state-text-color: var(--color-bg-1);
- --mat-button-toggle-selected-state-background-color: var(--color-primary);
- --mat-button-toggle-text-color: var(--color-default-text);
- --mat-button-toggle-background-color: var(--color-bg-0);
--mat-button-toggle-height: 20px;
}
diff --git
a/ui/src/app/core-services/time-formatting/last-updated-formatter.service.ts
b/ui/src/app/core-services/time-formatting/last-updated-formatter.service.ts
index 4f906933b7..6627763baf 100644
--- a/ui/src/app/core-services/time-formatting/last-updated-formatter.service.ts
+++ b/ui/src/app/core-services/time-formatting/last-updated-formatter.service.ts
@@ -41,6 +41,28 @@ export class LastUpdatedFormatterService {
return relativeTime ? `${relativeTime} (${exactTime})` : exactTime;
}
+ public formatExactLastUpdatedAt(
+ updatedAt: number | null | undefined,
+ emptyLabel = 'n/a',
+ ): string {
+ if (!updatedAt) {
+ return emptyLabel;
+ }
+
+ return this.formatExactTime(updatedAt);
+ }
+
+ public formatRelativeLastUpdatedAt(
+ updatedAt: number | null | undefined,
+ currentTime = Date.now(),
+ ): string | undefined {
+ if (!updatedAt) {
+ return undefined;
+ }
+
+ return this.formatRelativeTime(updatedAt, currentTime);
+ }
+
private formatExactTime(updatedAt: number): string {
this.updateFormatters();
return this.exactTimeFormatter.format(new Date(updatedAt));
diff --git
a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
index bc76be0893..a3186773b8 100644
--- a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
+++ b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
@@ -16,20 +16,21 @@
~
-->
-<div fxLayout="column">
+<div class="simple-metrics" fxLayout="column">
<sp-basic-header-title-component
[title]="elementName + ' - Metrics'"
></sp-basic-header-title-component>
<div
+ class="simple-metrics__grid"
fxLayout="row"
- fxLayoutAlign="center center"
- fxLayoutGap="20px"
+ fxLayoutAlign="start stretch"
+ fxLayoutGap="var(--space-md)"
fxFlex="100"
>
<sp-status-widget
fxFlex="50"
[label]="lastPublishedLabel"
- widgetHeight="400px"
+ widgetHeight="7.5rem"
[statusValue]="
lastTimestamp === 0 ? 'n/a' : (lastTimestamp | date: 'medium')
"
@@ -38,7 +39,7 @@
<sp-status-widget
fxFlex="50"
[label]="statusValueLabel"
- widgetHeight="400px"
+ widgetHeight="7.5rem"
[statusValue]="statusValue"
>
</sp-status-widget>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.scss
similarity index 87%
copy from
ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
copy to
ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.scss
index eef4ad0780..99c50c9d76 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
+++ b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.scss
@@ -16,10 +16,14 @@
*
*/
-.footer {
- margin-top: 20px;
+:host {
+ display: block;
}
-.neutral-action-wrapper {
- margin-right: auto;
+.simple-metrics {
+ gap: var(--space-md);
+}
+
+.simple-metrics__grid {
+ width: 100%;
}
diff --git
a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.ts
b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.ts
index 7552e8cc5f..fa0ef1b477 100644
--- a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.ts
+++ b/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.ts
@@ -30,7 +30,7 @@ import { DatePipe } from '@angular/common';
@Component({
selector: 'sp-simple-metrics',
templateUrl: './simple-metrics.component.html',
- styleUrls: [],
+ styleUrls: ['./simple-metrics.component.scss'],
imports: [
LayoutDirective,
SpBasicHeaderTitleComponent,
diff --git a/ui/src/app/core-ui/status/status-widget.component.scss
b/ui/src/app/core-ui/status/status-widget.component.scss
index e5fad2d3c5..328269dc81 100644
--- a/ui/src/app/core-ui/status/status-widget.component.scss
+++ b/ui/src/app/core-ui/status/status-widget.component.scss
@@ -16,40 +16,45 @@
*
*/
-.statusValue {
- font-size: 40pt;
- background: darkblue;
- color: white;
- margin: 5px;
- min-height: 140px;
- padding: 15px;
-}
-
-.statusValue > h4 {
- font-size: 20pt;
- margin-bottom: 30px;
-}
-
-.fix-margin {
- margin-top: -5px;
+:host {
+ display: block;
+ width: 100%;
+ --status-widget-color: var(--color-primary);
+ --status-widget-bg: color-mix(
+ in srgb,
+ var(--status-widget-color) 10%,
+ var(--color-bg-0)
+ );
}
.status-container {
- height: 150px;
width: 100%;
- color: var(--color-primary);
- border-radius: 5px;
- margin-bottom: 20px;
- border: 2px solid var(--color-bg-2);
- background: var(--color-bg-2);
- border-bottom: 5px solid var(--color-primary);
+ min-height: 7rem;
+ box-sizing: border-box;
+ color: var(--status-widget-color);
+ border-radius: var(--radius-md);
+ background: var(--status-widget-bg);
+ overflow: hidden;
}
.status-container-value {
- font-size: 36pt;
- font-weight: bold;
+ min-width: 0;
+ color: var(--status-widget-color);
+ font-size: var(--font-size-2xl);
+ font-weight: var(--font-weight-bold);
+ line-height: var(--line-height-tight);
+ letter-spacing: -0.02em;
+ text-align: center;
+ overflow-wrap: anywhere;
}
.status-container-label {
- font-size: 14pt;
+ color: color-mix(in srgb, var(--status-widget-color) 82%, transparent);
+ font-size: var(--font-size-md);
+ font-weight: var(--font-weight-semibold);
+ line-height: var(--line-height-normal);
+}
+
+.status-container.p-10 {
+ padding: var(--space-md);
}
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.scss
b/ui/src/app/core/components/toolbar/toolbar.component.scss
index d11249a954..4681e53d0e 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.scss
+++ b/ui/src/app/core/components/toolbar/toolbar.component.scss
@@ -62,4 +62,9 @@
::ng-deep .toolbar-menu {
background-color: var(--mat-sys-surface);
--mat-menu-item-icon-color: var(--mat-sys-on-surface);
+ color: var(--mat-sys-on-surface);
+}
+
+::ng-deep .toolbar-menu .current-user {
+ color: var(--mat-sys-on-surface);
}
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
index 3d7a82ba85..47ba94c038 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-preview/chart-preview.component.scss
@@ -60,11 +60,7 @@ mat-icon {
min-width: 40px;
height: 40px;
border-radius: 12px;
- background: linear-gradient(
- 180deg,
- color-mix(in srgb, var(--color-primary) 14%, white) 0%,
- color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-1)) 100%
- );
+ background: color-mix(in srgb, var(--color-primary) 10%,
var(--color-bg-1));
color: var(--color-primary);
}
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
index d60106f42e..185562ac2f 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
@@ -339,6 +339,7 @@
fxFlex="100"
fxLayout="column"
fxLayoutAlign="center center"
+ class="empty-dashboard-state"
data-cy="empty-dashboard"
>
<h4>
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.scss
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.scss
index 2655e51d21..7a3d2d80ac 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.scss
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.scss
@@ -88,3 +88,13 @@
.view-radio-button {
margin: 5px;
}
+
+.empty-dashboard-state {
+ color: var(--mat-sys-on-surface-variant);
+ text-align: center;
+}
+
+.empty-dashboard-state h4 {
+ color: inherit;
+ font-weight: var(--font-weight-medium);
+}
diff --git
a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html
b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html
index 0c00c5679f..49c6aedaa4 100644
---
a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html
+++
b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html
@@ -99,7 +99,11 @@
>{{ 'Loading' | translate }}
</mat-spinner>
} @else {
- {{ formatLastEvent(configurationEntry.lastEvent) }}
+ <sp-datalake-last-event-label
+ [lastEvent]="configurationEntry.lastEvent"
+ [currentTime]="currentTime"
+ >
+ </sp-datalake-last-event-label>
}
</td>
</ng-container>
diff --git
a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts
b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts
index 3428ec876c..e951762ad6 100644
---
a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts
+++
b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts
@@ -86,11 +86,11 @@ import { MatButton, MatIconButton } from
'@angular/material/button';
import { MatTooltip } from '@angular/material/tooltip';
import { MatIcon } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { DatePipe, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
import { StyleDirective } from '@ngbracket/ngx-layout/extended';
import { MatMenuItem } from '@angular/material/menu';
import { catchError, of, Subscription } from 'rxjs';
-import { LastUpdatedFormatterService } from
'../../../core-services/time-formatting/last-updated-formatter.service';
+import { DatalakeLastEventLabelComponent } from
'./datalake-last-event-label/datalake-last-event-label.component';
@Component({
selector: 'sp-datalake-configuration',
@@ -122,12 +122,12 @@ import { LastUpdatedFormatterService } from
'../../../core-services/time-formatt
MatHeaderRow,
MatRowDef,
MatRow,
- DatePipe,
TranslatePipe,
SpTableComponent,
SpBasicHeaderTitleComponent,
SpBasicViewComponent,
SpTableActionsDirective,
+ DatalakeLastEventLabelComponent,
],
})
export class DatalakeConfigurationComponent
@@ -146,8 +146,6 @@ export class DatalakeConfigurationComponent
private currentUserService = inject(CurrentUserService);
private assetFilterService = inject(SpAssetBrowserService);
private router = inject(Router);
- private lastUpdatedFormatterService = inject(LastUpdatedFormatterService);
-
dataSource: MatTableDataSource<DataLakeConfigurationEntry> =
new MatTableDataSource([]);
availableMeasurements: DataLakeConfigurationEntry[] = [];
@@ -515,13 +513,6 @@ export class DatalakeConfigurationComponent
});
}
- formatLastEvent(lastEventAt: number | null): string {
- return this.lastUpdatedFormatterService.formatLastUpdatedAt(
- lastEventAt,
- this.currentTime,
- );
- }
-
private toConfigurationEntry(
measurement: DatasetSummaryDto,
): DataLakeConfigurationEntry {
diff --git
a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
b/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.html
similarity index 51%
copy from
ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
copy to
ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.html
index bc76be0893..bf98d1f985 100644
--- a/ui/src/app/core-ui/monitoring/simple-metrics/simple-metrics.component.html
+++
b/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.html
@@ -16,31 +16,15 @@
~
-->
-<div fxLayout="column">
- <sp-basic-header-title-component
- [title]="elementName + ' - Metrics'"
- ></sp-basic-header-title-component>
- <div
- fxLayout="row"
- fxLayoutAlign="center center"
- fxLayoutGap="20px"
- fxFlex="100"
- >
- <sp-status-widget
- fxFlex="50"
- [label]="lastPublishedLabel"
- widgetHeight="400px"
- [statusValue]="
- lastTimestamp === 0 ? 'n/a' : (lastTimestamp | date: 'medium')
- "
- >
- </sp-status-widget>
- <sp-status-widget
- fxFlex="50"
- [label]="statusValueLabel"
- widgetHeight="400px"
- [statusValue]="statusValue"
- >
- </sp-status-widget>
- </div>
-</div>
+<sp-label
+ size="small"
+ shape="badge"
+ variant="soft"
+ [tone]="usesRelativeTime ? 'success' : 'neutral'"
+ [labelText]="displayValue"
+ minWidth="9rem"
+ [matTooltip]="tooltipValue"
+ [matTooltipDisabled]="!tooltipValue"
+ matTooltipPosition="above"
+>
+</sp-label>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
b/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.scss
similarity index 90%
copy from
ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
copy to
ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.scss
index eef4ad0780..723331d792 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/dialog/confirm-dialog/confirm-dialog.component.scss
+++
b/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.scss
@@ -16,10 +16,7 @@
*
*/
-.footer {
- margin-top: 20px;
-}
-
-.neutral-action-wrapper {
- margin-right: auto;
+:host {
+ display: inline-flex;
+ align-items: center;
}
diff --git
a/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.ts
b/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.ts
new file mode 100644
index 0000000000..c2d2c7b1d0
--- /dev/null
+++
b/ui/src/app/dataset/components/datalake-configuration/datalake-last-event-label/datalake-last-event-label.component.ts
@@ -0,0 +1,69 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {
+ Component,
+ HostBinding,
+ inject,
+ Input,
+ OnChanges,
+} from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { SpLabelComponent } from '@streampipes/shared-ui';
+import { LastUpdatedFormatterService } from
'../../../../core-services/time-formatting/last-updated-formatter.service';
+
+@Component({
+ selector: 'sp-datalake-last-event-label',
+ templateUrl: './datalake-last-event-label.component.html',
+ styleUrls: ['./datalake-last-event-label.component.scss'],
+ imports: [MatTooltip, SpLabelComponent],
+})
+export class DatalakeLastEventLabelComponent implements OnChanges {
+ @Input()
+ lastEvent: number | null;
+
+ @Input()
+ currentTime = Date.now();
+
+ displayValue = 'n/a';
+ tooltipValue = '';
+ usesRelativeTime = false;
+
+ @HostBinding('attr.data-last-event-value')
+ get lastEventValue(): string | null {
+ return this.lastEvent ? `${this.lastEvent}` : null;
+ }
+
+ private lastUpdatedFormatterService = inject(LastUpdatedFormatterService);
+
+ ngOnChanges(): void {
+ const relativeTime =
+ this.lastUpdatedFormatterService.formatRelativeLastUpdatedAt(
+ this.lastEvent,
+ this.currentTime,
+ );
+ const exactTime =
+ this.lastUpdatedFormatterService.formatExactLastUpdatedAt(
+ this.lastEvent,
+ );
+
+ this.usesRelativeTime = !!relativeTime;
+ this.displayValue = relativeTime ?? exactTime;
+ this.tooltipValue = relativeTime ? exactTime : '';
+ }
+}
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
index 529c29fc97..fb2923d22d 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
@@ -16,36 +16,31 @@
~
-->
<div
- fxLayout="row"
class="draggable-pipeline-element"
- fxFlex="100"
id="{{ element.appId || element.name.toLowerCase().replaceAll(' ', '_') }}"
[attr.data-pe]="element.elementId"
(mouseenter)="updateMouseOver(element.name)"
(mouseleave)="updateMouseOver('')"
data-cy="pipeline-element-icon-stand-row"
>
- <div fxFlex="50px">
- <div
- matTooltip="{{ element.name }}"
- [matTooltipPosition]="'above'"
- class="draggable-icon-editor tt"
- [ngClass]="activeCssClass"
- >
- <span id="container" class="pe-container">
- <sp-pipeline-element
- id="pe-icon-stand-{{ element.appId }}"
- style="margin-left: -3%"
- [iconStandSize]="true"
- [attr.data-cy]="'sp-pipeline-element-' + cypressName"
- [pipelineElement]="element"
- ></sp-pipeline-element>
- </span>
- </div>
+ <div
+ matTooltip="{{ element.name }}"
+ [matTooltipPosition]="'above'"
+ class="draggable-icon-editor tt"
+ [ngClass]="activeCssClass"
+ >
+ <span id="container" class="pe-container">
+ <sp-pipeline-element
+ id="pe-icon-stand-{{ element.appId }}"
+ [iconStandSize]="true"
+ [attr.data-cy]="'sp-pipeline-element-' + cypressName"
+ [pipelineElement]="element"
+ ></sp-pipeline-element>
+ </span>
</div>
- <div fxFlex fxLayoutAlign="start start" fxLayout="column">
+ <div class="pipeline-element-row-content">
<div
- class="font-bold"
+ class="element-name-label"
[ngClass]="{
'element-name-hover': currentMouseOver,
'element-name': !currentMouseOver,
@@ -54,39 +49,35 @@
{{ element.name }}
</div>
@if (currentMouseOver && assetContext) {
- <div class="element-description" fxLayoutAlign="start start">
- <div fxLayout="row wrap" fxLayoutGap="4px">
- @for (asset of assetContext.assets; track asset.id) {
- <sp-label
- size="small"
- tone="neutral"
- variant="soft"
- [labelText]="asset.label"
- [matTooltip]="asset.tooltip"
- >
- </sp-label>
- }
- </div>
+ <div class="asset-labels">
+ @for (asset of assetContext.assets; track asset.id) {
+ <sp-label
+ size="small"
+ tone="neutral"
+ variant="soft"
+ [labelText]="asset.label"
+ [matTooltip]="asset.tooltip"
+ >
+ </sp-label>
+ }
</div>
}
@if (currentMouseOver) {
- <div class="element-description" fxLayoutAlign="start start">
- <span class="text-xs">{{ element.description }}</span>
+ <div class="element-description">
+ {{ element.description }}
</div>
}
</div>
@if (currentMouseOver) {
- <div fxLayoutAlign="end start">
- <button
- style="height: 20px"
- mat-flat-button
- color="accent"
- class="help-button-stand"
- data-cy="help-button-icon-stand"
- (click)="openHelpDialog(element)"
- >
- ?
- </button>
- </div>
+ <button
+ mat-icon-button
+ class="help-button-stand"
+ data-cy="help-button-icon-stand"
+ [matTooltip]="'Help'"
+ [matTooltipPosition]="'above'"
+ (click)="openHelpDialog(element)"
+ >
+ <mat-icon>help</mat-icon>
+ </button>
}
</div>
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
index 9396ebddf8..48bbb026c6 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
@@ -20,72 +20,165 @@
cursor: move;
vertical-align: top;
background-color: var(--color-pe);
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
height: 35px;
width: 35px;
- line-height: 35px;
- box-shadow: 1px 1px 2px var(--color-shadow);
+ line-height: 1;
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
text-align: center;
z-index: 100;
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.draggable-icon-drag {
cursor: pointer;
vertical-align: top;
background: var(--color-pe);
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
height: 70px;
width: 70px;
- line-height: 70px;
- box-shadow: 1px 1px 2px var(--color-shadow);
+ line-height: 1;
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
text-align: center;
z-index: 100;
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ border-color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+
+.draggable-icon-editor.stream,
+.draggable-icon-drag.stream {
+ border-color: var(--color-data-source);
+ border-radius: 50%;
+ background: var(--color-pe);
+}
+
+.draggable-icon-editor.sepa,
+.draggable-icon-drag.sepa {
+ border-color: var(--color-processor);
+ background: var(--color-pe);
+}
+
+.draggable-icon-editor.action,
+.draggable-icon-drag.action {
+ border-color: var(--color-sink);
+ background: var(--color-pe);
}
.draggable-pipeline-element {
cursor: move;
+ display: grid;
+ grid-template-columns: 35px minmax(0, 1fr) auto;
+ align-items: center;
+ column-gap: var(--space-sm);
+ min-height: 2.5rem;
+ padding: var(--space-2xs) var(--space-sm);
+ border-radius: var(--radius-sm);
z-index: 100;
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+
+.draggable-pipeline-element:hover {
+ background: var(--color-surface-interactive-hover);
+}
+
+.pipeline-element-row-content {
+ display: flex;
+ min-width: 0;
+ flex-direction: column;
+ gap: var(--space-2xs);
}
.element-name {
overflow: hidden;
text-overflow: ellipsis;
- display: inline-block;
white-space: nowrap;
- max-width: 170px;
}
.element-name-hover {
- word-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
}
+.element-name-label {
+ color: var(--mat-sys-on-surface);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
+ line-height: 1.25;
+}
+
.element-description {
- font-weight: 300;
+ display: -webkit-box;
+ overflow: hidden;
+ color: var(--mat-sys-on-surface-variant);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-regular);
+ line-height: 1.25;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+}
+
+.asset-labels {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-2xs);
}
.help-button-stand {
padding: 0;
min-width: 0;
- width: 20px;
- height: 20px;
+ width: 1.5rem;
+ height: 1.5rem;
flex-shrink: 0;
- line-height: 20px;
- border-radius: 0;
- margin-right: 5px;
+ border-radius: var(--radius-xs);
+ color: var(--color-primary);
+ line-height: 1;
+}
+
+.help-button-stand:hover {
+ background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+.help-button-stand .mat-icon {
+ width: 1.125rem;
+ height: 1.125rem;
+ font-size: var(--font-size-lg);
+ line-height: 1;
}
.pe-container {
position: relative;
- display: block;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
width: 35px;
height: 35px;
+ line-height: 1;
}
.pe-container-drag {
position: relative;
- display: block;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
width: 70px;
height: 70px;
+ line-height: 1;
}
diff --git
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
index 2b5c97dcbe..36ff52c4f4 100644
---
a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
+++
b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
@@ -23,21 +23,16 @@ import {
} from '../../../model/editor.model';
import { PipelineElementTypeUtils } from '../../../utils/editor.utils';
import { EditorService } from '../../../services/editor.service';
-import {
- FlexDirective,
- LayoutAlignDirective,
- LayoutDirective,
-} from '@ngbracket/ngx-layout/flex';
import { MatTooltip } from '@angular/material/tooltip';
import { NgClass } from '@angular/common';
-import { ClassDirective } from '@ngbracket/ngx-layout/extended';
import {
PipelineElementComponent,
SpLabelComponent,
SpAssetBrowserService,
SpTableAssetContextService,
} from '@streampipes/shared-ui';
-import { MatButton } from '@angular/material/button';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { SpDataStream } from '@streampipes/platform-services';
import { SpTableResolvedAssetContext } from '@streampipes/shared-ui';
@@ -48,15 +43,12 @@ import { map } from 'rxjs';
templateUrl: './pipeline-element-icon-stand-row.component.html',
styleUrls: ['./pipeline-element-icon-stand-row.component.scss'],
imports: [
- LayoutDirective,
- FlexDirective,
MatTooltip,
NgClass,
- ClassDirective,
PipelineElementComponent,
SpLabelComponent,
- LayoutAlignDirective,
- MatButton,
+ MatIconButton,
+ MatIcon,
],
})
export class PipelineElementIconStandRowComponent implements OnInit {
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 6255f29a3e..1fad9a6012 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
@@ -29,22 +29,7 @@
}
.pe-row {
- padding-top: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
-}
-
-.pe-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-
-.pe-row:nth-child(odd) {
- background-color: var(--color-bg-0);
-}
-
-.pe-row:hover {
- background-color: var(--color-bg-2);
- cursor: pointer;
+ padding: 1px var(--space-xs);
}
.panel-header {
diff --git
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
index 4fc91c67e2..421ff8ba8e 100644
---
a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
+++
b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
@@ -15,99 +15,85 @@
~ limitations under the License.
~
-->
-<div>
- <div>
- <div
- [ngStyle]="
- currentMouseOverElement === pipelineElement.payload.dom
- ? { opacity: 1 }
- : { opacity: 1 }
- "
- class="sp-fade-options"
- >
- @if (pipelineElement.type !== 'stream') {
- <span
- class="options-button customize-button"
- style="z-index: 10"
- >
- <button
- class="options-icon-button"
- mat-icon-button
- [matTooltip]="'Configure Element' | translate"
- [matTooltipPosition]="'above'"
- (click)="customizeElement(pipelineElement)"
- data-cy="settings-pipeline-element-button"
- >
- <mat-icon class="options-icon-size">settings</mat-icon>
- </button>
- </span>
- }
- @if (pipelineElement.type === 'stream' && isWildcardTopic()) {
- <span
- class="options-button customize-button"
- style="z-index: 10"
- >
- <button
- class="options-icon-button"
- mat-icon-button
- [matTooltip]="'Configure Element' | translate"
- [matTooltipPosition]="'above'"
- (click)="openCustomizeStreamDialog()"
- >
- <mat-icon class="options-icon-size">settings</mat-icon>
- </button>
- </span>
- }
- <span class="options-button delete-button" style="z-index: 10">
+<div
+ [ngStyle]="
+ currentMouseOverElement === pipelineElement.payload.dom
+ ? { opacity: 1 }
+ : { opacity: 1 }
+ "
+ class="sp-fade-options"
+>
+ <div class="pipeline-element-action-bar pipeline-element-action-bar--top">
+ @if (pipelineElement.type !== 'stream') {
+ <span class="options-button customize-button">
<button
class="options-icon-button"
mat-icon-button
- [matTooltip]="'Delete Element' | translate"
+ [matTooltip]="'Configure Element' | translate"
[matTooltipPosition]="'above'"
- (click)="removeElement(pipelineElement)"
+ (click)="customizeElement(pipelineElement)"
+ data-cy="settings-pipeline-element-button"
>
- <mat-icon class="options-icon-size">clear</mat-icon>
+ <mat-icon class="options-icon-size">settings</mat-icon>
</button>
</span>
- @if (pipelineElement.type !== 'action') {
- <span
- class="options-button possible-button"
- style="z-index: 10"
+ }
+ @if (pipelineElement.type === 'stream' && isWildcardTopic()) {
+ <span class="options-button customize-button">
+ <button
+ class="options-icon-button"
+ mat-icon-button
+ [matTooltip]="'Configure Element' | translate"
+ [matTooltipPosition]="'above'"
+ (click)="openCustomizeStreamDialog()"
>
- <button
- class="options-icon-button"
- mat-icon-button
- [matTooltip]="'Compatible Elements' | translate"
- [matTooltipPosition]="'below'"
- [disabled]="
- !possibleElements || possibleElements.length === 0
- "
- (click)="openPossibleElementsDialog()"
- [attr.data-cy]="
- 'sp-possible-elements-' +
- pipelineElement.payload.name
- .toLowerCase()
- .replaceAll(' ', '_')
- "
- _
- >
- <mat-icon class="options-icon-size"
- >account_tree</mat-icon
- >
- </button>
- </span>
- }
- <span class="options-button help-button" style="z-index: 10">
+ <mat-icon class="options-icon-size">settings</mat-icon>
+ </button>
+ </span>
+ }
+ @if (pipelineElement.type !== 'action') {
+ <span class="options-button possible-button">
<button
class="options-icon-button"
- [matTooltip]="'Help' | translate"
- [matTooltipPosition]="'below'"
mat-icon-button
- (click)="openHelpDialog()"
+ [matTooltip]="'Compatible Elements' | translate"
+ [matTooltipPosition]="'above'"
+ [disabled]="
+ !possibleElements || possibleElements.length === 0
+ "
+ (click)="openPossibleElementsDialog()"
+ [attr.data-cy]="
+ 'sp-possible-elements-' +
+ pipelineElement.payload.name
+ .toLowerCase()
+ .replaceAll(' ', '_')
+ "
>
- <mat-icon class="options-icon-size">help</mat-icon>
+ <mat-icon class="options-icon-size">account_tree</mat-icon>
</button>
</span>
- </div>
+ }
+ <span class="options-button help-button">
+ <button
+ class="options-icon-button"
+ [matTooltip]="'Help' | translate"
+ [matTooltipPosition]="'above'"
+ mat-icon-button
+ (click)="openHelpDialog()"
+ >
+ <mat-icon class="options-icon-size">help</mat-icon>
+ </button>
+ </span>
+ <span class="options-button delete-button">
+ <button
+ class="options-icon-button"
+ mat-icon-button
+ [matTooltip]="'Delete Element' | translate"
+ [matTooltipPosition]="'above'"
+ (click)="removeElement(pipelineElement)"
+ >
+ <mat-icon class="options-icon-size">clear</mat-icon>
+ </button>
+ </span>
</div>
</div>
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 f605ae8c56..b00445c498 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
@@ -18,49 +18,73 @@
.options-button {
cursor: pointer;
- position: absolute;
- height: 20px;
- width: 20px;
- border-radius: 20%;
- box-shadow: 0 0 3px var(--color-primary);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 1.5rem;
+ width: 1.5rem;
+ border-radius: var(--radius-xs);
+ box-shadow: none;
text-align: center;
- padding: 1px 1px;
- background-color: var(--mat-sys-primary);
+ padding: 0;
+ background-color: transparent;
}
.mat-mdc-icon-button.options-icon-button {
- width: 20px;
- height: 20px;
- line-height: 1.2;
- border-radius: 0;
+ width: 1.5rem;
+ height: 1.5rem;
+ line-height: 1;
+ border-radius: var(--radius-xs);
padding: 0;
- color: var(--mat-sys-on-primary);
+ color: var(--color-primary);
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+
+.mat-mdc-icon-button.options-icon-button:hover:not(:disabled) {
+ background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.options-icon-size {
- font-size: 1.08rem;
- width: inherit;
- height: inherit;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--font-size-lg);
+ width: 1.125rem;
+ height: 1.125rem;
+ line-height: 1;
+}
+
+.pipeline-element-action-bar {
+ position: absolute;
+ z-index: 50;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2xs);
+ padding: var(--space-2xs);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ background: var(--mat-sys-surface);
}
-.customize-button {
- left: 2%;
- top: -35%;
+.pipeline-element-action-bar--top {
+ left: 50%;
+ top: -2.25rem;
+ transform: translateX(-50%);
}
-.delete-button {
- left: 73%;
- top: -35%;
- background-color: darkred;
- box-shadow: 0 0 3px darkred;
+.delete-button .mat-mdc-icon-button.options-icon-button {
+ color: var(--color-error);
}
-.help-button {
- left: 37.5%;
- top: -35%;
+.delete-button .mat-mdc-icon-button.options-icon-button:hover:not(:disabled) {
+ background: color-mix(in srgb, var(--color-error) 12%, transparent);
}
-.possible-button {
- left: 37.5%;
- top: 80%;
+.possible-button .mat-mdc-icon-button.options-icon-button:disabled {
+ color: var(--mat-sys-on-surface-variant);
+ opacity: 0.5;
}
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.scss
b/ui/src/app/editor/components/pipeline/pipeline.component.scss
index e47a6b33c9..c7044dfa18 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.scss
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.scss
@@ -18,28 +18,35 @@
.topics-button {
cursor: pointer;
- 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: 40%;
- top: 82%;
+ left: 50%;
+ top: -2.25rem;
+ transform: translateX(-50%);
z-index: 50;
- margin-top: 5px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: auto;
+ height: auto;
+ padding: var(--space-2xs);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ background: var(--mat-sys-surface);
}
.topics-icon-button {
- width: 20px;
- height: 20px;
+ width: 1.5rem;
+ height: 1.5rem;
padding: 0;
+ color: var(--color-primary);
}
.topics-icon-size {
- font-size: 1.08rem;
- color: white;
- width: 20px;
- height: 20px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--font-size-lg);
+ width: 1.125rem;
+ height: 1.125rem;
+ line-height: 1;
}
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/_variables.scss b/ui/src/scss/sp/_variables.scss
index 7900e374dd..100b4a7888 100644
--- a/ui/src/scss/sp/_variables.scss
+++ b/ui/src/scss/sp/_variables.scss
@@ -123,16 +123,60 @@
var(--color-primary) 10%,
var(--color-bg-0)
);
+ --color-panel-header-accent: color-mix(
+ in srgb,
+ var(--color-primary) 5%,
+ var(--color-bg-0)
+ );
+
+ // Semantic appearance tokens
+ --radius-xs: 0.25rem;
+ --radius-sm: 0.5rem;
+ --radius-md: 0.75rem;
+ --radius-lg: 1rem;
+ --radius-pill: 999px;
+
--color-border-subtle: color-mix(
in srgb,
- var(--color-bg-3) 72%,
+ var(--mat-sys-outline-variant) 72%,
transparent
);
- --color-panel-header-accent: color-mix(
+ --color-border-default: color-mix(
in srgb,
- var(--color-primary) 5%,
- var(--color-bg-0)
+ var(--mat-sys-outline) 58%,
+ transparent
);
+ --color-border-strong: color-mix(
+ in srgb,
+ var(--mat-sys-outline) 78%,
+ transparent
+ );
+
+ --color-surface-interactive: var(--mat-sys-surface-container-low);
+ --color-surface-interactive-hover: var(--mat-sys-surface-container);
+ --color-surface-interactive-active: var(--mat-sys-surface-container-high);
+ --color-surface-selected: color-mix(
+ in srgb,
+ var(--mat-sys-primary) 10%,
+ var(--mat-sys-surface)
+ );
+ --color-surface-selected-hover: color-mix(
+ in srgb,
+ var(--mat-sys-primary) 15%,
+ var(--mat-sys-surface)
+ );
+
+ --color-focus-ring: color-mix(
+ in srgb,
+ var(--mat-sys-primary) 38%,
+ transparent
+ );
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
+
+ --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.16);
+ --motion-duration-fast: 120ms;
+ --motion-duration-standard: 180ms;
+ --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}
.dark-mode {
@@ -148,6 +192,11 @@
--color-default-text: rgba(255, 255, 255, 0.87);
--color-secondary-text: #aaa;
+ --color-info-bg: #0b1f3f;
+ --color-success-bg: #0f2f1f;
+ --color-warning-bg: #3a2704;
+ --color-error-bg: #3a1111;
+
// only used for buttons
--color-warn: #b36161;
--color-tab-border: #cccccc;
diff --git a/ui/src/scss/sp/buttons-mat3.scss b/ui/src/scss/sp/buttons-mat3.scss
index 7e073ec758..a0264c3ca9 100644
--- a/ui/src/scss/sp/buttons-mat3.scss
+++ b/ui/src/scss/sp/buttons-mat3.scss
@@ -19,69 +19,268 @@
@use '@angular/material' as mat;
:root {
- .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
- border-radius: 6px;
- }
@include mat.button-overrides(
(
- filled-container-shape: 1.5rem,
- outlined-outline-color: var(--mat-sys-outline),
+ filled-container-shape: var(--radius-sm),
+ outlined-container-shape: var(--radius-sm),
+ outlined-outline-color: var(--color-border-default),
outlined-label-text-color: var(--mat-sys-on-surface),
- filled-label-text-weight: 400,
+ text-container-shape: var(--radius-sm),
+ filled-label-text-weight: var(--font-weight-medium),
+ outlined-label-text-weight: var(--font-weight-medium),
+ text-label-text-weight: var(--font-weight-medium),
filled-label-text-tracking: -0.01em,
outlined-label-text-tracking: -0.01em,
- text-container-shape: 6px,
text-label-text-tracking: -0.01em,
- filled-hover-state-layer-opacity: 0.2,
+ filled-hover-state-layer-opacity: 0,
+ filled-pressed-state-layer-opacity: 0,
+ outlined-hover-state-layer-opacity: 0.06,
+ text-hover-state-layer-opacity: 0.06,
)
);
- .btn-secondary {
- @include mat.button-overrides(
- (
- filled-container-color: var(--mat-sys-surface-container-high),
- filled-label-text-color: var(--mat-sys-secondary),
- text-hover-state-layer-opacity: 1,
- filled-label-text-weight: 400,
- )
+ @include mat.icon-button-overrides(
+ (
+ container-shape: var(--radius-sm),
+ icon-color: var(--color-primary),
+ state-layer-color: var(--color-primary),
+ hover-state-layer-opacity: 0.06,
+ focus-state-layer-opacity: 0.06,
+ pressed-state-layer-opacity: 0.1,
+ )
+ );
+
+ @include mat.button-toggle-overrides(
+ (
+ shape: var(--radius-sm),
+ height: 1.875rem,
+ background-color: var(--color-surface-interactive),
+ text-color: var(--mat-sys-on-surface-variant),
+ divider-color: var(--color-border-subtle),
+ selected-state-background-color: var(--color-surface-selected),
+ selected-state-text-color: var(--mat-sys-primary),
+ state-layer-color: var(--mat-sys-on-surface),
+ hover-state-layer-opacity: 0.06,
+ focus-state-layer-opacity: 0.06,
+ label-text-weight: var(--font-weight-medium),
+ label-text-tracking: -0.01em,
+ )
+ );
+
+ .mat-mdc-icon-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ padding: 0;
+ color: var(--mat-icon-button-icon-color);
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: var(--radius-sm);
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ border-color var(--motion-duration-fast)
+ var(--motion-easing-standard);
+ }
+
+ .mat-mdc-icon-button .mat-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ line-height: 1;
+ }
+
+ .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
+ border-radius: var(--radius-sm);
+ }
+
+ .mat-mdc-icon-button:hover:not(:disabled) {
+ background: color-mix(in srgb, currentColor 8%, transparent);
+ border-color: color-mix(in srgb, currentColor 14%, transparent);
+ }
+
+ .mat-mdc-icon-button:active:not(:disabled) {
+ background: color-mix(in srgb, currentColor 12%, transparent);
+ border-color: color-mix(in srgb, currentColor 20%, transparent);
+ }
+
+ .mat-mdc-icon-button[aria-pressed='true'],
+ .mat-mdc-icon-button.sp-navbar-icon-button-selected {
+ background: var(--color-surface-selected);
+ border-color: color-mix(
+ in srgb,
+ var(--mat-sys-primary) 18%,
+ transparent
);
}
- .btn-secondary-outline {
- border: 1px solid var(--color-primary);
+ .mat-mdc-icon-button:focus-visible {
+ outline: 2px solid var(--mat-sys-primary);
+ outline-offset: -2px;
+ box-shadow: none;
+ }
+
+ .mat-mdc-icon-button:disabled {
+ background: transparent;
+ border-color: transparent;
+ }
+
+ .mat-button-toggle-group {
+ border-color: var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ background: var(--color-surface-interactive);
+ }
+
+ .mat-button-toggle {
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ color var(--motion-duration-fast) var(--motion-easing-standard);
+ }
+
+ .mat-button-toggle:hover:not(.mat-button-toggle-checked) {
+ background: var(--color-surface-interactive-hover);
+ }
+
+ .mat-button-toggle-checked:hover {
+ background: var(--color-surface-selected-hover);
+ }
+
+ .mat-button-toggle-button:focus-visible {
+ outline: 2px solid var(--mat-sys-primary);
+ outline-offset: -2px;
+ }
+
+ .mat-mdc-unelevated-button:not(.mat-basic):not(.btn-secondary):not(
+ .btn-secondary-outline
+ ):not(.btn-warn):hover:not(:disabled) {
+ --mat-button-filled-container-color: color-mix(
+ in srgb,
+ var(--color-primary) 88%,
+ white
+ );
+ background-color: var(--mat-button-filled-container-color);
+ }
+
+ .mat-mdc-unelevated-button:not(.mat-basic):not(.btn-secondary):not(
+ .btn-secondary-outline
+ ):not(.btn-warn):active:not(:disabled) {
+ --mat-button-filled-container-color: color-mix(
+ in srgb,
+ var(--color-primary) 82%,
+ white
+ );
+ background-color: var(--mat-button-filled-container-color);
+ }
+
+ .btn-secondary,
+ .mat-basic {
+ border: 1px solid transparent;
+
@include mat.button-overrides(
(
- filled-container-color: var(--mat-sys-surface-container-high),
- filled-label-text-color: var(--mat-sys-primary),
- text-hover-state-layer-opacity: 1,
- filled-label-text-weight: 400,
+ filled-container-color: color-mix(
+ in srgb,
+ var(--color-primary) 6%,
+ var(--color-bg-0)
+ ),
+ filled-label-text-color: var(--color-primary),
+ filled-state-layer-color: var(--color-primary),
+ filled-hover-state-layer-opacity: 0,
+ filled-pressed-state-layer-opacity: 0,
)
);
}
- .mat-basic {
- border: 1px solid var(--mat-sys-surface-container-high);
+ .btn-secondary:hover:not(:disabled),
+ .mat-basic:hover:not(:disabled) {
+ border-color: transparent;
+ background: color-mix(
+ in srgb,
+ var(--color-primary) 10%,
+ var(--color-bg-0)
+ );
+ }
+
+ .btn-secondary:active:not(:disabled),
+ .mat-basic:active:not(:disabled) {
+ border-color: transparent;
+ background: color-mix(
+ in srgb,
+ var(--color-primary) 12%,
+ var(--color-bg-0)
+ );
+ }
+
+ .btn-secondary-outline {
+ border: 1px solid var(--color-border-default);
+
@include mat.button-overrides(
(
- filled-container-color: var(--mat-sys-surface-container-high),
+ filled-container-color: transparent,
filled-label-text-color: var(--mat-sys-primary),
- text-hover-state-layer-opacity: 1,
- filled-label-text-weight: 400,
+ filled-state-layer-color: var(--mat-sys-primary),
+ filled-hover-state-layer-opacity: 0.06,
)
);
}
.btn-warn {
+ border: 1px solid transparent;
+
@include mat.button-overrides(
(
- filled-container-color: var(--mat-sys-error-container),
- filled-label-text-color: var(--mat-sys-on-error-container),
- text-hover-state-layer-opacity: 1,
- filled-label-text-weight: 400,
+ filled-container-color: color-mix(
+ in srgb,
+ var(--mat-sys-error) 7%,
+ var(--color-bg-0)
+ ),
+ filled-label-text-color: var(--mat-sys-error),
+ filled-state-layer-color: var(--mat-sys-error),
+ filled-hover-state-layer-opacity: 0,
+ filled-pressed-state-layer-opacity: 0,
)
);
}
+ .btn-warn:hover:not(:disabled) {
+ border-color: transparent;
+ background: color-mix(
+ in srgb,
+ var(--mat-sys-error) 11%,
+ var(--color-bg-0)
+ );
+ }
+
+ .btn-warn:active:not(:disabled) {
+ border-color: transparent;
+ background: color-mix(
+ in srgb,
+ var(--mat-sys-error) 14%,
+ var(--color-bg-0)
+ );
+ }
+
+ .mat-mdc-button-base {
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ border-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ box-shadow var(--motion-duration-fast)
var(--motion-easing-standard);
+ }
+
+ .mat-mdc-button-base:focus-visible {
+ outline: none;
+ box-shadow: var(--focus-ring);
+ }
+
+ .mat-mdc-button-base[disabled] {
+ border-color: transparent;
+ }
+
.mdc-button.small-button {
padding: 0.25rem 0.75rem;
font-size: var(--font-size-sm);
@@ -101,8 +300,9 @@
font-size: var(--font-size-sm);
max-height: 75px;
line-height: 25px;
- background: white;
- border: 1.5px solid var(--mat-sys-primary);
+ background: var(--mat-sys-surface);
+ border: 1px solid var(--color-border-default);
color: var(--mat-sys-primary);
+ border-radius: var(--radius-sm);
}
}
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/forms-mat3.scss b/ui/src/scss/sp/forms-mat3.scss
index e8d4f5d9ec..ca58139f33 100644
--- a/ui/src/scss/sp/forms-mat3.scss
+++ b/ui/src/scss/sp/forms-mat3.scss
@@ -23,13 +23,9 @@
(
container-height: 2.5rem,
container-vertical-padding: 0.5rem,
- outlined-container-shape: 2px,
- outlined-outline-color: var(--mat-sys-surface-container-highest),
- outlined-hover-outline-color: color-mix(
- in srgb,
- var(--mat-sys-outline) 85%,
- #000 0%
- ),
+ outlined-container-shape: var(--radius-sm),
+ outlined-outline-color: var(--color-border-subtle),
+ outlined-hover-outline-color: var(--color-border-strong),
outlined-focus-outline-color: var(--mat-sys-primary),
outlined-label-text-color: var(--mat-sys-on-surface-variant),
outlined-caret-color: var(--mat-sys-primary),
@@ -41,4 +37,31 @@
),
)
);
+
+ .mat-mdc-form-field {
+ transition: filter var(--motion-duration-fast)
+ var(--motion-easing-standard);
+ }
+
+ .mat-mdc-form-field .mdc-text-field--outlined {
+ background-color: var(--color-surface-interactive);
+ border-radius: var(--radius-sm);
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ box-shadow var(--motion-duration-fast)
var(--motion-easing-standard);
+ }
+
+ .mat-mdc-form-field:hover .mdc-text-field--outlined {
+ background-color: var(--color-surface-interactive-hover);
+ }
+
+ .mat-mdc-form-field:has(.mdc-text-field--focused)
+ .mdc-text-field--outlined {
+ background-color: var(--mat-sys-surface);
+ }
+
+ .mat-mdc-form-field.mat-form-field-disabled {
+ filter: saturate(0.7);
+ }
}
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index a1b5ad3b0f..e5d0bb9f30 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -33,11 +33,11 @@ html {
}
md-progress-linear.md-accent .md-container {
- background-color: rgb(168, 168, 168);
+ background-color: var(--color-surface-interactive-active);
}
.stream-endpoint {
- background: green;
+ background: var(--color-success);
}
.gu-mirror {
@@ -75,15 +75,12 @@ pre[class*='language-'] {
top: 40px;
z-index: 1;
background: var(--color-bg-dialog);
- border: 2px solid var(--color-warn);
- border-radius: 5px;
+ border: 1px solid color-mix(in srgb, var(--color-error) 38%, transparent);
+ border-radius: var(--radius-sm);
width: 300px;
color: var(--color-default-text);
- padding: 5px;
- box-shadow:
- 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
- 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
- 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+ padding: var(--space-xs);
+ box-shadow: var(--shadow-overlay);
}
.mat-step-header .mat-step-icon {
@@ -122,7 +119,7 @@ md-toolbar:not(.md-menu-toolbar) {
width: 0;
height: 0;
border: 20px solid transparent;
- border-bottom-color: rgb(63, 81, 181);
+ border-bottom-color: var(--color-primary);
border-top: 0;
border-left: 0;
margin-left: -10px;
@@ -173,9 +170,9 @@ md-content {
left: 0px;
width: 100%;
/* styling bellow */
- background-color: rgb(63, 81, 181);
- font-size: 15px;
- color: white;
+ background-color: var(--color-primary);
+ font-size: var(--font-size-sm);
+ color: var(--mat-sys-on-primary);
opacity: 0.9; /* transparency */
filter: alpha(opacity=90); /* IE transparency */
align-items: center;
@@ -191,7 +188,7 @@ md-content {
left: 10%;
margin-right: auto;
height: 0px;
- background-color: #ccc;
+ background-color: var(--color-border-default);
z-order: 0;
}
@@ -201,7 +198,7 @@ md-content {
}
.wizard-row-stream:before {
- border-top: 1px solid #ccc;
+ border-top: 1px solid var(--color-border-default);
content: '';
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative
positioning must be applied to the parent */
@@ -216,14 +213,14 @@ md-content {
.wizard-inactive {
background-color: var(--color-bg-0) !important;
color: var(--color-default-text) !important;
- border: 2px solid var(--color-primary) !important;
+ border: 1px solid var(--color-primary) !important;
}
.popover {
- border: 1px solid var(--color-primary);
- box-shadow: 0 0px 0px;
+ border: 1px solid var(--color-border-subtle);
+ box-shadow: none;
-webkit-bow-shadow: none;
- border-radius: 0px;
+ border-radius: var(--radius-sm);
padding: 0px;
}
@@ -233,8 +230,8 @@ md-content {
.popover-title {
background-color: var(--color-primary);
- color: white;
- border-radius: 0px 0px 0 0;
+ color: var(--mat-sys-on-primary);
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.full-background {
@@ -242,12 +239,9 @@ md-content {
}
.box-shadow-login {
- border: 1px solid #e0e0e0;
- border-radius: 5px;
- box-shadow:
- 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
- 0px 1px 4px 0px rgba(0, 0, 0, 0.14),
- 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-overlay);
}
.circle {
@@ -255,7 +249,7 @@ md-content {
width: 150px;
height: 150px;
font-size: 40px;
- color: #fff;
+ color: var(--mat-sys-on-primary);
line-height: 150px;
text-align: center;
}
@@ -266,7 +260,7 @@ md-content {
}
.customize-item-main {
- border-radius: 5px;
+ border-radius: var(--radius-sm);
margin: 5px;
}
@@ -286,8 +280,8 @@ md-content {
}
.tree-node {
- border: 1px solid var(--color-bg-3);
- border-radius: 5px;
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
background: var(--color-bg-0);
color: var(--color-primary);
margin: 5px;
@@ -305,7 +299,7 @@ md-content {
position: absolute;
right: 16px;
top: 25px;
- color: #ffffff;
+ color: var(--mat-sys-on-primary);
background-color: var(--color-primary);
vertical-align: middle;
}
@@ -346,7 +340,9 @@ md-content {
width: 50px;
min-width: 50px;
line-height: 50px;
- box-shadow: 1px 1px 2px #555;
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
text-align: center;
}
@@ -360,19 +356,20 @@ md-content {
line-height: 70px;
margin-left: 3%;
margin-top: 5px;
- box-shadow: 1px 1px 2px var(--color-shadow);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
text-align: center;
z-index: 200;
}
.pe-label {
- color: white;
+ color: var(--mat-sys-on-primary);
padding: 2px 5px;
}
.adapter-label {
background: var(--color-adapter);
- color: white;
+ color: var(--mat-sys-on-primary);
}
.stream-label {
@@ -409,7 +406,7 @@ md-content {
.draggable-img {
height: 50px;
width: 50px;
- color: #d22;
+ color: var(--color-error);
}
.sepa > .draggable-img {
@@ -423,11 +420,11 @@ md-content {
}
.ui-selectable-helper {
- background: rgba(51, 200, 51, 0.5);
+ background: color-mix(in srgb, var(--color-success) 22%, transparent);
}
.ui-selected {
- box-shadow: 0 0 10px #33dd33 !important;
+ box-shadow: 0 0 0 2px var(--color-success) !important;
}
.draggable-img-dragging {
@@ -440,13 +437,13 @@ md-content {
}
.assemblyOptions {
- color: white;
+ color: var(--mat-sys-on-primary);
padding: 5px;
margin-top: 1%;
}
.assembly-options-preview {
- color: white;
+ color: var(--mat-sys-on-primary);
padding: 5px;
}
@@ -477,7 +474,7 @@ md-content {
}
.shadow {
- box-shadow: 0 0 5px #333;
+ box-shadow: var(--shadow-overlay);
}
._jsPlumb_endpoint {
@@ -487,7 +484,10 @@ md-content {
.connectable {
cursor: move;
position: absolute;
- box-shadow: 0 0 2px #555;
+ box-sizing: border-box;
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
display: inline-block;
vertical-align: middle;
background-color: var(--color-pe);
@@ -508,11 +508,29 @@ md-content {
line-height: 70px;
}
+.connectable.stream {
+ border: 2px solid var(--color-data-source);
+ border-radius: 50%;
+ background-color: var(--color-pe);
+}
+
+.connectable.sepa {
+ border: 2px solid var(--color-processor);
+ background-color: var(--color-pe);
+}
+
+.connectable.action {
+ border: 2px solid var(--color-sink);
+ background-color: var(--color-pe);
+}
+
.connectable-element {
cursor: move;
height: 150px !important;
width: 150px !important;
- box-shadow: 0 0 2px var(--color-primary);
+ border: 1px solid color-mix(in srgb, var(--color-primary) 28%,
transparent);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
display: inline-block;
vertical-align: middle;
background-color: var(--color-pe);
@@ -527,7 +545,7 @@ md-content {
}
.connectable-img {
- color: #d22;
+ color: var(--color-error);
font-size: 80px;
/*margin-top: 14%;*/
/*margin-left: 14%;*/
@@ -548,7 +566,8 @@ md-content {
height: 40%;
width: 40%;
background-color: var(--color-bg-0);
- box-shadow: 0 0 2px #555;
+ border: 1px solid var(--color-border-subtle);
+ box-shadow: none;
line-height: 1.6;
border-radius: 50%;
}
@@ -562,13 +581,15 @@ md-content {
}
.recommended-item {
- box-shadow: 0 0 2px #555;
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ box-shadow: none;
background-color: var(--color-bg-0);
cursor: pointer;
}
.recommended-item:hover {
- box-shadow: 0 0 5px #555;
+ background-color: var(--color-surface-interactive-hover);
}
.recommended-item-img {
@@ -582,11 +603,11 @@ md-content {
}
.green {
- color: rgba(51, 200, 51, 0.5);
+ color: color-mix(in srgb, var(--color-success) 70%, transparent);
}
.red {
- color: rgba(200, 51, 51, 0.5);
+ color: color-mix(in srgb, var(--color-error) 70%, transparent);
}
ul.circleMenu-open {
@@ -619,7 +640,7 @@ ul.circleMenu-closed {
}
.ui-draggable-dragging {
- box-shadow: 0 0 8px black;
+ box-shadow: var(--shadow-overlay);
}
#submit {
@@ -646,17 +667,17 @@ h4.panel-title {
}
.disabled {
- border: 2px solid red;
+ border: 1px solid var(--color-error);
}
.endpoint-token svg rect {
- fill: rgb(63, 81, 181);
- stroke: rgb(63, 81, 181);
+ fill: var(--color-primary);
+ stroke: var(--color-primary);
}
.endpoint-empty svg rect {
- fill: white;
- stroke: rgb(63, 81, 181);
+ fill: var(--color-bg-0);
+ stroke: var(--color-primary);
stroke-width: 4;
}
@@ -681,7 +702,7 @@ textarea {
padding-left: 10px;
margin-top: 3px;
margin-bottom: 3px;
- background: #dfdfdf5e;
+ background: var(--color-surface-interactive);
border-left: 1px solid var(--color-primary);
}
@@ -690,12 +711,11 @@ label {
}
.error-message {
- background-color: black;
+ background-color: var(--color-code-bg);
font:
0.7rem Inconsolata,
monospace;
- text-shadow: 0 0 5px #c8c8c8;
- color: white;
+ color: var(--mat-sys-on-surface);
width: 100%;
max-width: 100%;
}
diff --git a/ui/src/scss/sp/mat-tab.scss b/ui/src/scss/sp/mat-tab.scss
index 912850e62d..1660e66dd5 100644
--- a/ui/src/scss/sp/mat-tab.scss
+++ b/ui/src/scss/sp/mat-tab.scss
@@ -16,13 +16,51 @@
*
*/
-.mdc-tab__text-label {
- color: rgba(0, 0, 0, 0.87);
+.mat-mdc-tab-group {
+ --mat-tab-active-indicator-color: var(--mat-sys-primary);
+ --mat-tab-active-label-text-color: var(--mat-sys-primary);
+ --mat-tab-active-focus-label-text-color: var(--mat-sys-primary);
+ --mat-tab-active-hover-label-text-color: var(--mat-sys-primary);
+ --mat-tab-inactive-label-text-color: var(--mat-sys-on-surface-variant);
+ --mat-tab-inactive-focus-label-text-color: var(--mat-sys-on-surface);
+ --mat-tab-inactive-hover-label-text-color: var(--mat-sys-on-surface);
+ --mat-tab-divider-color: var(--color-border-subtle);
+}
+
+.mat-mdc-tab {
+ border-radius: var(--radius-xs) var(--radius-xs) 0 0;
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+
+.mat-mdc-tab:hover {
+ background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
+}
+
+.mat-mdc-tab.mdc-tab--active {
+ background: transparent;
+}
+
+.mat-mdc-tab.mdc-tab--active:hover {
+ background: color-mix(in srgb, var(--mat-sys-primary) 5%, transparent);
+}
+
+.mat-mdc-tab:focus-visible {
+ outline: none;
+ box-shadow: inset 0 0 0 2px var(--color-focus-ring);
+}
+
+.mat-mdc-tab .mdc-tab-indicator__content--underline {
+ border-top-width: 2px;
+ border-radius: var(--radius-pill);
}
.mat-mdc-tab-group.small-tab-headers .mdc-tab__text-label {
height: 32px;
- font-size: 10pt;
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
}
.mat-mdc-tab-group.mat-tab-fill-height .mat-mdc-tab-body-wrapper {
diff --git a/ui/src/scss/sp/pipeline-element-options.scss
b/ui/src/scss/sp/pipeline-element-options.scss
index fbe5db8183..f3bf539418 100644
--- a/ui/src/scss/sp/pipeline-element-options.scss
+++ b/ui/src/scss/sp/pipeline-element-options.scss
@@ -23,51 +23,47 @@
width: 20px;
border-radius: 50%;
background-color: var(--color-primary);
- color: rgba(255, 255, 255, 0.75);
- box-shadow: 0 0 2px var(--color-primary);
+ color: var(--mat-sys-on-primary);
+ box-shadow: none;
line-height: 1.2;
text-align: center;
}
.editor-pe-info {
position: absolute;
- left: 0%;
- top: 50%;
- width: 106%;
- padding: 50px 0 10px;
- font-size: smaller;
+ left: 50%;
+ top: calc(100% + var(--space-2xs));
+ transform: translateX(-50%);
+ box-sizing: border-box;
+ min-width: 6.5rem;
+ max-width: 9rem;
+ padding: var(--space-xs) var(--space-sm);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-semibold);
+ line-height: 1.22;
text-align: center;
- box-shadow: 0 0 2px #555;
- -webkit-animation: slidein 0.5s;
overflow: hidden;
- text-overflow: ellipsis;
- display: block;
-}
-
-@keyframes slidein {
- 0% {
- top: 0;
- border-top-left-radius: 50%;
- border-top-right-radius: 50%;
- }
- 100% {
- top: 50%;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
+ overflow-wrap: anywhere;
+ hyphens: auto;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 4;
+ border: 1px solid transparent;
+ box-shadow: none;
}
.pe-info-action {
background: var(--color-sink);
- color: white;
+ color: #ffffff;
}
.pe-info-sepa {
background: var(--color-processor);
- color: white;
+ color: #ffffff;
}
.pe-info-stream {
background: var(--color-data-source);
- color: #343434;
+ color: #1f1f1f;
}
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 64711cf114..7406dad58f 100644
--- a/ui/src/scss/sp/sp-theme.scss
+++ b/ui/src/scss/sp/sp-theme.scss
@@ -66,12 +66,125 @@ 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),
+ )
+ );
+
+ @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),
+ )
+ );
+
+ @include mat.menu-overrides(
+ (
+ container-color: var(--mat-sys-surface),
+ container-shape: var(--radius-sm),
+ container-elevation-shadow: var(--shadow-overlay),
+ divider-color: var(--color-border-subtle),
+ divider-bottom-spacing: var(--space-xs),
+ divider-top-spacing: var(--space-xs),
+ item-icon-size: 1.125rem,
+ item-spacing: var(--space-xs),
+ item-leading-spacing: var(--space-sm),
+ item-trailing-spacing: var(--space-sm),
+ item-with-icon-leading-spacing: var(--space-sm),
+ item-with-icon-trailing-spacing: var(--space-sm),
+ item-label-text-color: var(--mat-sys-on-surface),
+ item-icon-color: var(--color-primary),
+ item-hover-state-layer-color: color-mix(
+ in srgb,
+ var(--color-primary) 8%,
+ transparent
+ ),
+ item-focus-state-layer-color: color-mix(
+ in srgb,
+ var(--color-primary) 10%,
+ transparent
+ ),
+ item-label-text-size: var(--font-size-sm),
+ item-label-text-line-height: 1.25rem,
+ item-label-text-weight: var(--font-weight-medium),
+ item-label-text-tracking: -0.01em,
+ )
+ );
+
+ .mat-mdc-menu-panel {
+ min-width: 10rem;
+ border: 1px solid var(--color-border-subtle);
+ overflow: hidden;
+ }
+
+ .mat-mdc-menu-content {
+ padding: var(--space-xs) 0;
+ }
+
+ .mat-mdc-menu-item {
+ width: calc(100% - (var(--space-xs) + var(--space-xs)));
+ min-height: 2.25rem;
+ box-sizing: border-box;
+ border-radius: var(--radius-xs);
+ margin: 0 var(--space-xs);
+ transition:
+ background-color var(--motion-duration-fast)
+ var(--motion-easing-standard),
+ color var(--motion-duration-fast) var(--motion-easing-standard);
+ }
+
+ .mat-mdc-menu-item .mat-icon {
+ width: 1.125rem;
+ height: 1.125rem;
+ margin-right: var(--space-xs);
+ font-size: 1.125rem;
+ line-height: 1;
+ }
+
+ .mat-mdc-menu-item-text {
+ line-height: 1.25rem;
+ }
+
+ .mat-mdc-menu-item:hover:not([disabled]),
+ .mat-mdc-menu-item.cdk-focused:not([disabled]),
+ .mat-mdc-menu-item.mat-mdc-menu-item-highlighted:not([disabled]) {
+ color: var(--color-primary);
+ }
+
&.dark-mode {
@include mat.theme-overrides(
(
primary: var(--color-primary),
secondary: var(--color-secondary),
- on-primary: #fff,
+ on-primary: #121212,
primary-container: mat.get-theme-color(
mat3theme.$palettes,
primary,
