This is an automated email from the ASF dual-hosted git repository.
riemer 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 67c4da64f8 fix: Improve styling of adapter asset browser (#3818)
67c4da64f8 is described below
commit 67c4da64f87ba1926225c8f49413d08d1355d732
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Oct 7 08:50:04 2025 +0200
fix: Improve styling of adapter asset browser (#3818)
---
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
