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 4ebbd213c9 feat: Extend options to configure inner panel and labels
(#3924)
4ebbd213c9 is described below
commit 4ebbd213c962b394cfb181fc1a66508a7a7b426d
Author: Dominik Riemer <[email protected]>
AuthorDate: Fri Nov 14 08:07:58 2025 +0100
feat: Extend options to configure inner panel and labels (#3924)
---
.../basic-inner-panel.component.html | 25 ++++++++++---
.../basic-inner-panel.component.scss | 31 +++++++++++++++-
.../basic-inner-panel.component.ts | 41 ++++++++++++++++++++++
.../components/sp-label/sp-label.component.html | 4 +++
.../components/sp-label/sp-label.component.scss | 16 +++++++--
.../lib/components/sp-label/sp-label.component.ts | 6 ++++
6 files changed, 116 insertions(+), 7 deletions(-)
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
index d5698211ec..838e1c1d99 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
@@ -24,7 +24,9 @@
>
<div
class="general-panel-header"
+ [class.header-collapsed]="collapsed"
[ngClass]="headerBackground ? 'bg-highlight' : 'bg-no-highlight'"
+ [style.height]="headerHeight"
fxLayout="row"
fxLayoutAlign="start center"
*ngIf="!hideToolbar"
@@ -36,14 +38,29 @@
</div>
</div>
<ng-content select="[header]" class="pr-5"></ng-content>
+ <div fxFlex></div>
+
+ <button
+ *ngIf="collapsible"
+ type="button"
+ class="collapse-btn"
+ (click)="toggleCollapse(); $event.stopPropagation()"
+ >
+ <mat-icon class="chevron-icon" [class.collapsed]="collapsed">
+ expand_less
+ </mat-icon>
+ </button>
</div>
</div>
<div
- class="general-panel"
- fxFlex="100"
- [ngStyle]="{ padding: innerPadding }"
+ class="general-panel-wrapper"
+ [@collapseExpand]="
+ collapsible ? (collapsed ? 'collapsed' : 'expanded') : 'expanded'
+ "
>
- <ng-content fxFlex="100"></ng-content>
+ <div class="general-panel" [ngStyle]="{ padding: innerPadding }">
+ <ng-content></ng-content>
+ </div>
</div>
</div>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
index fa4f329fd1..849003f306 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.scss
@@ -29,7 +29,6 @@
.general-panel-header {
margin-top: -1px;
- height: 40px;
min-height: 40px;
max-height: 40px;
border-top-left-radius: 12px;
@@ -37,6 +36,11 @@
padding: 10px 12px;
}
+.header-collapsed {
+ border-bottom-left-radius: 12px;
+ border-bottom-right-radius: 12px;
+}
+
.bg-highlight {
background: var(--color-bg-2);
}
@@ -54,3 +58,28 @@
font-weight: 400;
white-space: nowrap;
}
+
+.general-panel {
+ overflow: hidden;
+}
+
+.general-panel-wrapper {
+ overflow: hidden;
+}
+
+.collapse-btn {
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ padding: 0 0.5rem;
+}
+
+.chevron-icon {
+ transition: transform 200ms ease;
+}
+
+.chevron-icon.collapsed {
+ transform: rotate(-180deg);
+}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
index 453dded956..cd642307ba 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.ts
@@ -17,12 +17,40 @@
*/
import { Component, Input } from '@angular/core';
+import {
+ animate,
+ state,
+ style,
+ transition,
+ trigger,
+} from '@angular/animations';
@Component({
selector: 'sp-basic-inner-panel',
templateUrl: './basic-inner-panel.component.html',
styleUrls: ['./basic-inner-panel.component.scss'],
standalone: false,
+ animations: [
+ trigger('collapseExpand', [
+ state(
+ 'expanded',
+ style({
+ height: '*',
+ opacity: 1,
+ transform: 'translateY(0)',
+ }),
+ ),
+ state(
+ 'collapsed',
+ style({
+ height: '0px',
+ opacity: 0,
+ transform: 'translateY(-4px)',
+ }),
+ ),
+ transition('expanded <=> collapsed', animate('200ms ease-in-out')),
+ ]),
+ ],
})
export class SpBasicInnerPanelComponent {
@Input()
@@ -42,4 +70,17 @@ export class SpBasicInnerPanelComponent {
@Input()
headerBackground = true;
+
+ @Input()
+ headerHeight = '40px';
+
+ @Input()
+ collapsible = false;
+
+ @Input() collapsed = false;
+
+ toggleCollapse(): void {
+ if (!this.collapsible) return;
+ this.collapsed = !this.collapsed;
+ }
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.html
index 392cb14c69..6fceab00fd 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.html
@@ -19,11 +19,15 @@
<span
class="basic-label"
[ngClass]="cssClass"
+ [class.no-icon]="icon === undefined"
[ngStyle]="{
background: labelBackground,
borderColor: 'color-mix(in srgb, ' + labelBackground + ' 70%, black)',
color: labelTextColor
}"
>
+ @if (icon) {
+ <i class="material-icons centered-icon">{{ icon }}</i>
+ }
{{ labelText }}
</span>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.scss
index a6b1d3ee47..d27a67f530 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.scss
@@ -18,10 +18,15 @@
.basic-label {
border-radius: 15px;
- min-width: 50px;
padding: 5px 7px;
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
text-align: center;
+ gap: 5px;
+}
+
+.basic-label.no-icon {
+ justify-content: center;
}
.medium-label {
@@ -33,3 +38,10 @@
font-size: 10pt;
padding: 2px 10px;
}
+
+.centered-icon {
+ line-height: 1;
+ display: inline-flex;
+ align-items: center;
+ font-size: inherit;
+}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
index 8f52fb8d05..e0105e10ea 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
@@ -32,6 +32,9 @@ export class SpLabelComponent implements OnInit {
@Input()
small = false;
+ @Input()
+ icon: string | undefined = undefined;
+
@Input()
size: 'small' | 'medium' | 'large' = 'large';
@@ -48,6 +51,9 @@ export class SpLabelComponent implements OnInit {
} else if (this.size === 'small') {
this.cssClass = 'small-label';
}
+ this.labelTextColor = this.colorizationService.generateContrastColor(
+ this._labelBackground,
+ );
}
@Input()
