This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch modify-adapter-asset-selection-styles in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 1f44369f6c05ce9a59fad3933111ebd6f50e191e Author: Dominik Riemer <[email protected]> AuthorDate: Tue Oct 7 08:09:28 2025 +0200 fix: Improve styling of adapter asset browser --- ui/deployment/i18n/de.json | 2 +- .../alternate-id-configuration.component.html | 13 ++++- .../edit-group-dialog.component.html | 2 - .../adapter-asset-configuration.component.html | 32 +++++------- .../adapter-asset-configuration.component.scss | 57 +++------------------- .../adapter-options-panel.component.scss | 7 +-- .../pipeline-assembly-options.component.html | 8 ++- 7 files changed, 39 insertions(+), 82 deletions(-) diff --git a/ui/deployment/i18n/de.json b/ui/deployment/i18n/de.json index afd3c49ebb..21b99cf2ab 100644 --- a/ui/deployment/i18n/de.json +++ b/ui/deployment/i18n/de.json @@ -74,7 +74,7 @@ "Group": "Gruppe", "Save Pipeline": "Pipeline speichern", "Save pipeline": "Pipeline speichern", - "Auto Layout": "Automatisches Layout", + "Auto Layout": "Auto-Layout", "Add pipeline element": "Pipeline-Element hinzufügen", "Add element": "Element hinzufügen", "Add from template": "Aus Vorlage hinzufügen", diff --git a/ui/src/app/configuration/security-configuration/alternate-id-configuration/alternate-id-configuration.component.html b/ui/src/app/configuration/security-configuration/alternate-id-configuration/alternate-id-configuration.component.html index f02c21b7bb..462aa769f7 100644 --- a/ui/src/app/configuration/security-configuration/alternate-id-configuration/alternate-id-configuration.component.html +++ b/ui/src/app/configuration/security-configuration/alternate-id-configuration/alternate-id-configuration.component.html @@ -29,7 +29,12 @@ </button> </div> } - <div fxLayout="row" fxLayoutAlign="start center" class="alternate-id-row"> + <div + fxLayout="row" + fxLayoutAlign="start center" + class="alternate-id-row" + fxLayoutGap="10px" + > <mat-form-field color="accent" fxFlex subscriptSizing="dynamic"> <mat-label>New Alternate ID</mat-label> <input @@ -40,7 +45,11 @@ /> </mat-form-field> <div fxLayoutAlign="start center"> - <button mat-button class="mat-basic" (click)="addAlternateId()"> + <button + mat-flat-button + class="mat-basic" + (click)="addAlternateId()" + > <mat-icon>add</mat-icon><span>Add</span> </button> </div> diff --git a/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.html b/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.html index 60a7d322eb..a56a503184 100644 --- a/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.html +++ b/ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.html @@ -58,9 +58,7 @@ <div class="sp-dialog-actions"> <div fxLayout="row"> <button - mat-button mat-flat-button - color="accent" (click)="save()" style="margin-right: 10px" [disabled]="!parentForm.valid || clonedGroup.roles.length === 0" diff --git a/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.html b/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.html index 765dcb4975..1688dc5899 100644 --- a/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.html +++ b/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.html @@ -15,7 +15,7 @@ ~ limitations under the License. ~ --> -<div *ngIf="assetsData?.length"> +<div *ngIf="assetsData?.length" class="mt-10"> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" @@ -23,11 +23,7 @@ > <!-- Parent Node Definition --> <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild"> - <div - class="mat-tree-node" - (click)="onAssetSelect(node)" - [class.selected-node]="isSelected(node)" - > + <div class="mat-tree-node" (click)="onAssetSelect(node)"> <button mat-icon-button matTreeNodeToggle @@ -39,7 +35,9 @@ : 'chevron_right' }}</mat-icon> </button> - <span>{{ node.assetName }}</span> + <span [class.selected-node]="isSelected(node)">{{ + node.assetName + }}</span> </div> <div *ngIf="treeControl.isExpanded(node)" role="group"> <ng-container matTreeNodeOutlet></ng-container> @@ -48,19 +46,13 @@ <!-- Leaf Node Definition (no children) --> <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle> - <div - class="mat-tree-node" - (click)="onAssetSelect(node)" - [class.selected-node]="isSelected(node)" - > - <button - mat-icon-button - matTreeNodeToggle - [attr.aria-label]="'Toggle ' + node.assetName" - > - <mat-icon></mat-icon> - </button> - <span>{{ node.assetName }}</span> + <div class="mat-tree-node" (click)="onAssetSelect(node)"> + <span class="mat-icon-button placeholder-icon"> + <mat-icon class="invisible"></mat-icon> + </span> + <span [class.selected-node]="isSelected(node)">{{ + node.assetName + }}</span> </div> </mat-tree-node> </mat-tree> diff --git a/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.scss b/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.scss index 5a515d41e3..5e1df3b47e 100644 --- a/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.scss +++ b/ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.scss @@ -37,8 +37,8 @@ mat-form-field { mat-checkbox { margin-right: 20px; } + .asset-tree { - font-family: 'Roboto', sans-serif; padding-left: 10px; margin-left: 10px; } @@ -47,6 +47,7 @@ mat-checkbox { display: flex; align-items: center; padding-left: 10px; + cursor: pointer; } .mat-nested-tree-node { @@ -58,64 +59,22 @@ button[mat-icon-button] { margin-right: 8px; } -mat-icon { - font-size: 18px; - color: #3f51b5; -} - -.mat-tree-node span { - font-weight: bold; -} - .mat-tree-node:hover { - background-color: #e8e8e8; -} - -.mat-nested-tree-node span { - margin-left: 8px; -} - -.mat-nested-tree-node mat-icon { - margin-left: 16px; -} - -.transparent-btn { - background: transparent; - border: none; - padding: 0; - margin-left: 10px; - cursor: pointer; -} - -.transparent-btn:hover { - background-color: rgba(63, 81, 181, 0.1); -} - -.transparent-btn mat-icon { - font-size: 18px; - opacity: 0.4; -} - -.transparent-btn:hover mat-icon { - opacity: 1; -} - -.selected-node { - background-color: #e0f7fa; + background-color: var(--color-bg-2); border-radius: 4px; - padding: 5px; - font-family: 'Roboto-Bold', serif; - font-weight: bolder; } -.selected-node:hover { - background-color: #b2ebf2; +.selected-node { + color: var(--color-secondary); } .placeholder-icon { display: inline-flex; justify-content: center; align-items: center; + margin-right: 8px; + width: 32px; + height: 32px; } .placeholder-icon .mat-icon.invisible { diff --git a/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss b/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss index ffab8d1da7..8b3a4bf431 100644 --- a/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss +++ b/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss @@ -17,24 +17,25 @@ */ .options-panel { - border-left: 4px solid var(--color-primary); + border-left: 1px solid var(--color-primary); + border-radius: 5px; border-bottom: 1px solid var(--color-bg-2); border-top: 1px solid var(--color-bg-2); border-right: 1px solid var(--color-bg-2); padding: 8px; - background: var(--color-bg-1); margin-top: 6px; margin-bottom: 6px; } .title { color: var(--color-default-text); - font-weight: 600; + font-weight: 500; font-size: 13pt; } .description { font-size: 10pt; + font-weight: 300; } .icon { diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html index aee6656d67..a01033a136 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html @@ -19,7 +19,7 @@ <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center"> <button mat-flat-button - [matTooltip]="'Save Pipeline' | translate" + [matTooltip]="'Save pipeline' | translate" [matTooltipPosition]="'above'" [disabled]="!pipelineValidationService.pipelineValid" (click)="savePipelineEmitter.emit()" @@ -28,7 +28,7 @@ > <div fxLayoutAlign="start center" fxLayout="row"> <i class="material-icons">save</i> - <span> {{ 'Save pipeline' | translate }}</span> + <span> {{ 'Save' | translate }}</span> </div> </button> <span class="assembly-options-divider"></span> @@ -52,14 +52,12 @@ </button> <span class="assembly-options-divider"></span> <button - mat-flat-button - class="mat-basic" + mat-icon-button [matTooltip]="'Auto Layout' | translate" [matTooltipPosition]="'above'" (click)="autoLayout()" > <i class="material-icons">settings_overscan</i> - <span> {{ 'Auto Layout' | translate }}</span> </button> <span class="assembly-options-divider"></span> <button
