This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch extend-inner-panel-and-label-options in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit ef607d0312de7b0e9ba1edd0ce67c8faf359dab9 Author: Dominik Riemer <[email protected]> AuthorDate: Thu Nov 13 22:24:15 2025 +0100 feat: Extend options to configure inner panel and labels --- .../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()
