This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch improve-layout-default-colors in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 89da0c4ce911c8e9fdc9704fd0001ba5dc290995 Author: Dominik Riemer <[email protected]> AuthorDate: Tue Sep 30 17:02:10 2025 +0200 feat: Modernize layout, use default colors in data explorer --- .../basic-nav-tabs/basic-nav-tabs.component.scss | 6 ++ .../basic-view/basic-view.component.scss | 3 + .../adapter-configuration-header.component.html | 33 -------- .../adapter-configuration-header.component.scss | 22 ----- .../adapter-configuration-header.component.ts | 39 --------- .../adapter-configuration.component.html | 11 ++- ui/src/app/connect/connect.module.ts | 2 - .../grid-view/dashboard-grid-view.component.scss | 2 +- ...lorer-widget-appearance-settings.component.html | 98 +++++++++++++++------- ...lorer-widget-appearance-settings.component.scss | 6 ++ ...xplorer-widget-appearance-settings.component.ts | 44 +++++++++- ui/src/app/home/components/status.component.scss | 8 +- ui/src/app/home/home.component.html | 4 +- ui/src/scss/sp/buttons-mat3.scss | 2 +- 14 files changed, 136 insertions(+), 144 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss index 33e2b0fb14..004d4e0ae0 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss @@ -28,6 +28,12 @@ margin: 10px; border: 1px solid var(--color-bg-3); min-height: calc(100% - 50px); + border-radius: 10px; +} + +.page-container-nav { + border-top-left-radius: 10px; + border-top-right-radius: 10px; } .page-container-padding-inner { diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss index ac8e22cd4b..1200a6529b 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss @@ -29,6 +29,8 @@ line-height: 24px; height: 44px; border-bottom: 1px solid var(--color-bg-3); + border-top-left-radius: 10px; + border-top-right-radius: 10px; } .sp-bg-lightgray { @@ -44,6 +46,7 @@ border: 1px solid var(--color-bg-3); min-height: calc(100vh - 90px); background-color: var(--color-bg-main-panel-content); + border-radius: 10px; } .page-container-padding-inner { diff --git a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.html b/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.html deleted file mode 100644 index 0412b5677b..0000000000 --- a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.html +++ /dev/null @@ -1,33 +0,0 @@ -<!-- - ~ 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. - ~ - --> - -<div fxLayout="column" fxFlex="100"> - <div fxLayout="row" fxLayoutAlign="start center"> - <mat-icon class="real-time">lens </mat-icon> - <div fxLayoutAlign="start center"> - <p>Data Stream</p> - </div> - <span fxFlex></span> - </div> - <h1 *ngIf="!isEditMode" class="new-adapter-title"> - New Adapter: {{ displayName }} - </h1> - <h1 *ngIf="isEditMode" class="new-adapter-title"> - Edit Adapter: {{ displayName }} - </h1> -</div> diff --git a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.scss b/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.scss deleted file mode 100644 index 7579cb8994..0000000000 --- a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.scss +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * 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. - * - */ - -.real-time { - cursor: pointer; - color: #ffeb3b; -} diff --git a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.ts b/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.ts deleted file mode 100644 index 0a71ea5b66..0000000000 --- a/ui/src/app/connect/components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -/* - * 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, Input } from '@angular/core'; - -@Component({ - selector: 'sp-adapter-configuration-header', - templateUrl: './adapter-configuration-header.component.html', - styleUrls: ['./adapter-configuration-header.component.scss'], - standalone: false, -}) -export class AdapterConfigurationHeaderComponent { - /** - * Used to display the type of the configured adapter - */ - @Input() displayName = ''; - - /** - * Use different title when in edit mode - */ - @Input() isEditMode; - - constructor() {} -} diff --git a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html index 1f5593d18c..5037978a73 100644 --- a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html +++ b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html @@ -36,10 +36,13 @@ </button> </div> <div fxLayout="column" fxLayoutAlign="center stretch" *ngIf="adapter"> - <sp-adapter-configuration-header - [displayName]="displayName" - [isEditMode]="isEditMode" - ></sp-adapter-configuration-header> + <sp-basic-header-title-component + [title]=" + isEditMode + ? 'Edit adapter: ' + displayName + : 'New adapter: ' + displayName + " + ></sp-basic-header-title-component> <mat-horizontal-stepper [linear]="true" diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts index 33e5fce983..e973068aeb 100644 --- a/ui/src/app/connect/connect.module.ts +++ b/ui/src/app/connect/connect.module.ts @@ -63,7 +63,6 @@ import { SpEpSettingsSectionComponent } from './dialog/edit-event-property/compo import { SpAdapterOptionsPanelComponent } from './components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component'; import { SpAdapterTemplateDialogComponent } from './dialog/adapter-template/adapter-template-dialog.component'; import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { AdapterConfigurationHeaderComponent } from './components/adapter-configuration/adapter-configuration-header/adapter-configuration-header.component'; import { NewAdapterComponent } from './components/new-adapter/new-adapter.component'; import { EditAdapterComponent } from './components/edit-adapter/edit-adapter.component'; import { EventSchemaErrorHintsComponent } from './components/adapter-configuration/schema-editor/event-schema-error-hints/event-schema-error-hints.component'; @@ -200,7 +199,6 @@ import { AdapterDetailsCodeComponent } from './components/adapter-details/adapte exports: [ErrorMessageComponent], declarations: [ AdapterCodePanelComponent, - AdapterConfigurationHeaderComponent, AdapterConfigurationComponent, AdapterDescriptionComponent, AdapterDetailsCodeComponent, diff --git a/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss b/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss index d2b543726c..77cf1cf14c 100644 --- a/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss +++ b/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.scss @@ -21,7 +21,7 @@ gridster.custom-gridster-style ::ng-deep { } gridster.custom-gridster-style.edit ::ng-deep { - background: var(--mat-sys-surface); + background: var(--mat-color-bg-1); } gridster.scrollVertical ::ng-deep { diff --git a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html index 774574963c..0c3fabe6be 100644 --- a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html +++ b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html @@ -19,41 +19,75 @@ <sp-configuration-box [title]="'Color' | translate"> <div fxLayout="column" class="mt-10"> <div fxFlex="100" fxLayout="row" class="mb-10"> - <span>{{ 'Background' | translate }}</span> - <span fxFlex></span> - <input - [(colorPicker)]=" - currentlyConfiguredWidget.baseAppearanceConfig - .backgroundColor - " - [cpPosition]="'left'" - [style.background]=" - currentlyConfiguredWidget.baseAppearanceConfig - .backgroundColor - " - required - [cpPresetColors]="presetColors" - (colorPickerSelect)="triggerViewUpdate()" - autocomplete="off" - /> + <span fxFlex="30">{{ 'Background' | translate }}</span> + <div fxFlex="70" fxLayout="column"> + <mat-radio-group + [(ngModel)]="backgroundOption" + (ngModelChange)="onBackgroundChange($event)" + fxLayout="column" + > + <mat-radio-button value="default">{{ + 'Default' | translate + }}</mat-radio-button> + <mat-radio-button value="custom" + >{{ 'Custom' }} + @if (backgroundOption === 'custom') { + <input + class="ml-5 color-picker" + [(colorPicker)]=" + currentlyConfiguredWidget + .baseAppearanceConfig.backgroundColor + " + [cpPosition]="'left'" + [style.background]=" + currentlyConfiguredWidget + .baseAppearanceConfig.backgroundColor + " + required + [cpPresetColors]="presetColors" + (colorPickerSelect)="triggerViewUpdate()" + autocomplete="off" + /> + } + </mat-radio-button> + </mat-radio-group> + </div> </div> <div fxFlex="100" fxLayout="row" class="mb-10"> - <span>{{ 'Text' | translate }}</span> - <span fxFlex></span> - <input - [(colorPicker)]=" - currentlyConfiguredWidget.baseAppearanceConfig.textColor - " - [cpPosition]="'left'" - [style.background]=" - currentlyConfiguredWidget.baseAppearanceConfig.textColor - " - required - [cpPresetColors]="presetColors" - (colorPickerSelect)="triggerViewUpdate()" - autocomplete="off" - /> + <span fxFlex="30">{{ 'Text' | translate }}</span> + <div fxFlex="70" fxLayout="column"> + <mat-radio-group + [(ngModel)]="textOption" + (ngModelChange)="onTextChange($event)" + fxLayout="column" + > + <mat-radio-button value="default">{{ + 'Default' | translate + }}</mat-radio-button> + <mat-radio-button value="custom" + >{{ 'Custom' }} + @if (textOption === 'custom') { + <input + class="ml-5 color-picker" + [(colorPicker)]=" + currentlyConfiguredWidget + .baseAppearanceConfig.textColor + " + [cpPosition]="'left'" + [style.background]=" + currentlyConfiguredWidget + .baseAppearanceConfig.textColor + " + required + [cpPresetColors]="presetColors" + (colorPickerSelect)="triggerViewUpdate()" + autocomplete="off" + /> + } + </mat-radio-button> + </mat-radio-group> + </div> </div> </div> </sp-configuration-box> diff --git a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss index 13cbc4aacb..80257685b2 100644 --- a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss +++ b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss @@ -15,3 +15,9 @@ * limitations under the License. * */ + +.color-picker { + width: 25px; + cursor: pointer; + border: none; +} diff --git a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts index 57f341695d..e6e70f6350 100644 --- a/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts +++ b/ui/src/app/data-explorer/components/chart-view/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts @@ -34,6 +34,12 @@ export class DataExplorerWidgetAppearanceSettingsComponent { @Input() currentlyConfiguredWidget: DataExplorerWidgetModel; + backgroundOption: 'default' | 'custom' = 'default'; + textOption: 'default' | 'custom' = 'default'; + + defaultBackgroundColor = 'var(--color-bg-0)'; + defaultTextColor = 'var(--color-default-text)'; + presetColors: string[] = [ '#39B54A', '#1B1464', @@ -62,13 +68,21 @@ export class DataExplorerWidgetAppearanceSettingsComponent if ( !this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor ) { - this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor = - '#FFFFFF'; + this.applyDefaultBackground(); } if (!this.currentlyConfiguredWidget.baseAppearanceConfig.textColor) { - this.currentlyConfiguredWidget.baseAppearanceConfig.textColor = - '#3e3e3e'; + this.applyDefaultText(); } + this.backgroundOption = + this.currentlyConfiguredWidget.baseAppearanceConfig + ?.backgroundColor === this.defaultBackgroundColor + ? 'default' + : 'custom'; + this.textOption = + this.currentlyConfiguredWidget.baseAppearanceConfig?.textColor === + this.defaultTextColor + ? 'default' + : 'custom'; } findWidget(widgetType: string): void { @@ -89,4 +103,26 @@ export class DataExplorerWidgetAppearanceSettingsComponent ngOnDestroy() { this.widgetTypeSubscription?.unsubscribe(); } + + onBackgroundChange(option: string) { + if (option === 'default') { + this.applyDefaultBackground(); + } + } + + onTextChange(option: string): void { + if (option === 'default') { + this.applyDefaultText(); + } + } + + applyDefaultBackground(): void { + this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor = + this.defaultBackgroundColor; + } + + applyDefaultText(): void { + this.currentlyConfiguredWidget.baseAppearanceConfig.textColor = + this.defaultTextColor; + } } diff --git a/ui/src/app/home/components/status.component.scss b/ui/src/app/home/components/status.component.scss index 7778f4845d..386a0667ea 100644 --- a/ui/src/app/home/components/status.component.scss +++ b/ui/src/app/home/components/status.component.scss @@ -20,11 +20,11 @@ height: 150px; width: 100%; color: var(--color-secondary); - border-radius: 5px; + border-radius: 10px; margin-bottom: 20px; - border: 2px solid var(--color-bg-2); - background: var(--color-bg-2); - border-bottom: 5px solid var(--color-primary); + border: 1px solid var(--color-bg-2); + background: var(--color-bg-1); + //border-bottom: 5px solid var(--color-primary); } .status-container-number { diff --git a/ui/src/app/home/home.component.html b/ui/src/app/home/home.component.html index 3ef8353255..b85bc96c84 100644 --- a/ui/src/app/home/home.component.html +++ b/ui/src/app/home/home.component.html @@ -16,7 +16,7 @@ ~ --> -<div fxLayout="column" class="page-container page-container-padding"> +<sp-basic-view [hideNavbar]="true"> <div fxFlex fxLayout="row" fxLayoutAlign="start start"> <div fxFlex="100"> <div fxFlex="100" fxLayout="column"> @@ -81,4 +81,4 @@ </div> </div> </div> -</div> +</sp-basic-view> diff --git a/ui/src/scss/sp/buttons-mat3.scss b/ui/src/scss/sp/buttons-mat3.scss index 48c158b97e..4a9d09e424 100644 --- a/ui/src/scss/sp/buttons-mat3.scss +++ b/ui/src/scss/sp/buttons-mat3.scss @@ -24,7 +24,7 @@ } @include mat.button-overrides( ( - filled-container-shape: 5px, + filled-container-shape: 20px, outlined-outline-color: var(--mat-sys-outline), outlined-label-text-color: var(--mat-sys-on-surface), filled-label-text-weight: 400,
