This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch improve-adapter-overview in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 4b946e894c5577a9c61f9bb28c99c531aeceb5ab Author: Dominik Riemer <[email protected]> AuthorDate: Fri Sep 12 12:12:46 2025 -0500 feat: Improve layout of adapter overview, minor style fixes --- ui/deployment/i18n/de.json | 2 +- .../adapter-description.component.html | 51 ++++++++++++++-------- .../adapter-description.component.scss | 28 +++++++----- .../adapter-description.component.ts | 3 ++ .../data-marketplace.component.html | 1 + .../data-marketplace.component.scss | 2 +- .../charts/density/density-renderer.service.ts | 6 ++- .../charts/scatter/scatter-renderer.service.ts | 6 ++- ui/src/scss/sp/_variables.scss | 2 + 9 files changed, 66 insertions(+), 35 deletions(-) diff --git a/ui/deployment/i18n/de.json b/ui/deployment/i18n/de.json index 8c6208c308..40a7b24452 100644 --- a/ui/deployment/i18n/de.json +++ b/ui/deployment/i18n/de.json @@ -307,7 +307,7 @@ "Histogram": "Histogramm", "Pie": "Kreisdiagramm", "Value Distribution Heatmap": "Wertverteilung-Heatmap", - "2D Density Contour": "2D-Dichterverteilung", + "2D Density Contour": "2D-Dichteverteilung", "No Warning Range defined": "Kein Warnbereich definiert", "Current Warning Range: ": "Aktueller Warnbereich: ", "to": "zu", diff --git a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html index 70aa4d23b8..4e8afb07f4 100644 --- a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html +++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html @@ -19,7 +19,7 @@ <div class="adapter-description-box" fxFlex="100" fxLayout="column"> <div fxLayout="column"> <div - class="type mt-10" + class="type" fxLayout="row" fxLayoutAlign="start start" fxFlex="100" @@ -27,23 +27,40 @@ <div class="adapter-icon large-icon"> <img *ngIf="iconUrl" [src]="iconUrl" class="icon" /> </div> - <div class="ml-5" fxFlex fxLayoutAlign="end start"> - <button - mat-icon-button - color="accent" - (click)="openDocumentation($event)" - matTooltip="Show documentation" + <div + class="p-5 ml-10 h-100" + fxFlex + fxLayoutAlign="start start" + fxLayout="column" + > + <div fxLayout="column" fxLayoutAlign="end start"> + <span class="adapter-name">{{ adapter.name }}</span> + </div> + <div + fxFlex="100" + fxLayout="row wrap" + fxLayoutGap="10px" + fxLayoutAlign="end end" > - <mat-icon>menu_book</mat-icon> - </button> - </div> - </div> - </div> - <div fxFlex fxLayout="row" class="ml-10" fxLayoutGap="20px"> - <div fxFlex fxLayout="column"> - <h3>{{ adapter.name }}</h3> - <div class="description" fxLayoutAlign="start start"> - <p [innerHTML]="adapter.description"></p> + <button + fxFlex + mat-flat-button + (click)="createEmitter.emit(adapter.appId)" + matTooltip="Show documentation" + > + <span>Create</span> + <mat-icon>add</mat-icon> + </button> + <button + mat-flat-button + class="mat-basic" + (click)="openDocumentation($event)" + matTooltip="Show documentation" + > + <span>Docs</span> + <mat-icon>menu_book</mat-icon> + </button> + </div> </div> </div> </div> diff --git a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss index f45beda7bc..ed17e3110c 100644 --- a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss +++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss @@ -18,17 +18,20 @@ .adapter-description-box { height: 100%; - min-height: 260px; - border: 1px solid gray; - border-bottom: 5px solid gray; - background: var(--color-bg-dialog); - padding: 10px; + border: 1px solid var(--color-bg-2); + background: var(--color-bg-0); cursor: pointer; + border-radius: 5px; } .adapter-description-box:hover { - border-bottom: 5px solid var(--color-primary); - border-color: var(--color-primary); + border-color: var(--color-bg-3); + background: var(--color-bg-1); +} + +.adapter-name { + font-size: var(--mat-sys-body-large-size); + margin-top: 10px; } .edit { @@ -38,30 +41,31 @@ .delete { cursor: pointer; } + .type p { padding: 4px; margin: 0; } + .iconImg { max-height: 50px; max-width: 80%; } + .real-time { cursor: pointer; color: #ffeb3b; } .adapter-icon { - margin-left: 10px; - box-shadow: - rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, - rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + background: var(--color-bg-0); + border-right: 1px solid var(--color-bg-2); text-align: center; display: inline-block; } .icon { - max-width: 60px; + max-width: 70px; } .large-icon { diff --git a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts index 71c5eb35db..2022d76e07 100644 --- a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts +++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts @@ -35,6 +35,9 @@ export class AdapterDescriptionComponent implements OnInit { @Input() adapter: AdapterDescription; + @Output() + createEmitter = new EventEmitter<string>(); + isRunningAdapter = false; adapterLabel: string; iconUrl: SafeUrl; diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html index 70df090903..838c9afbb6 100644 --- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html +++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html @@ -78,6 +78,7 @@ }}" class="adapter-description" fxFlex="33" + (createEmitter)="selectAdapter($event)" (click)="selectAdapter(adapterDescription.appId)" *ngFor=" let adapterDescription of adapterDescriptions diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss index d6488fb4f8..6c69ecf698 100644 --- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss +++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss @@ -21,7 +21,7 @@ } .adapter-description { - padding: 15px; + padding: 10px; } .data-marketplace-container { padding-bottom: 10px; diff --git a/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts b/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts index b7621c78eb..e61809c1a5 100644 --- a/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts +++ b/ui/src/app/data-explorer-shared/components/charts/density/density-renderer.service.ts @@ -70,8 +70,9 @@ export class SpDensityRendererService extends SpBaseEchartsRenderer<CorrelationC `${xField.fullDbName}${xField.measurementUnitResourceId ? ` (${xField.measurementUnitResourceId.split('#').pop()})` : ''}`, nameLocation: 'center', nameTextStyle: { - fontSize: 20, + fontSize: 14, }, + nameGap: 40, }, yAxis: { scale: true, @@ -82,8 +83,9 @@ export class SpDensityRendererService extends SpBaseEchartsRenderer<CorrelationC `${yField.fullDbName}${yField.measurementUnitResourceId ? ` (${yField.measurementUnitResourceId.split('#').pop()})` : ''}`, nameLocation: 'center', nameTextStyle: { - fontSize: 20, + fontSize: 14, }, + nameGap: 40, }, dataset: dataset.rawDataset, visualMap: { diff --git a/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts b/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts index 08222544fe..c25272d75d 100644 --- a/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts +++ b/ui/src/app/data-explorer-shared/components/charts/scatter/scatter-renderer.service.ts @@ -71,8 +71,9 @@ export class SpScatterRendererService extends SpBaseEchartsRenderer<CorrelationC `${xField.fullDbName}${xField.measurementUnitResourceId ? ` (${xField.measurementUnitResourceId.split('#').pop()})` : ''}`, nameLocation: 'center', nameTextStyle: { - fontSize: 20, + fontSize: 14, }, + nameGap: 40, }, yAxis: { type: 'value', @@ -83,8 +84,9 @@ export class SpScatterRendererService extends SpBaseEchartsRenderer<CorrelationC `${yField.fullDbName}${yField.measurementUnitResourceId ? ` (${yField.measurementUnitResourceId.split('#').pop()})` : ''}`, nameLocation: 'center', nameTextStyle: { - fontSize: 20, + fontSize: 14, }, + nameGap: 40, }, series, }); diff --git a/ui/src/scss/sp/_variables.scss b/ui/src/scss/sp/_variables.scss index e02b6309b1..663001ef74 100644 --- a/ui/src/scss/sp/_variables.scss +++ b/ui/src/scss/sp/_variables.scss @@ -78,6 +78,8 @@ $sp-color-error: #b71c1c; --mdc-switch-selected-icon-size: 12px; --mat-menu-container-color: var(--color-bg-0); + --mat-select-panel-background-color: var(--color-bg-0); + --mat-sidenav-container-shape: 0; } .dark-mode {
