This is an automated email from the ASF dual-hosted git repository. mfholz pushed a commit to branch edit-data-explorer-window-resize in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 781179b2fead5f8d248cf17e87cd0d160fe5e175 Author: Marcelfrueh <[email protected]> AuthorDate: Mon Apr 28 15:17:26 2025 +0200 feat: add panel resize component --- .../sidebar-resize/sidebar-resize.component.html | 20 ++++++++ .../sidebar-resize/sidebar-resize.component.scss} | 53 ++++++---------------- .../sidebar-resize/sidebar-resize.component.ts | 52 +++++++++++++++++++++ .../shared-ui/src/lib/shared-ui.module.ts | 5 ++ .../streampipes/shared-ui/src/public-api.ts | 1 + .../data-explorer-chart-view.component.html | 14 +++++- .../data-explorer-chart-view.component.scss | 2 +- .../data-explorer-chart-view.component.ts | 15 +++++- 8 files changed, 121 insertions(+), 41 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.html new file mode 100644 index 0000000000..26e40c690a --- /dev/null +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.html @@ -0,0 +1,20 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + --> +<div class="resizer" cdkDrag (cdkDragMoved)="onDragMoved($event)"> + <span class="drag-icon">⠿</span> +</div> diff --git a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.scss similarity index 63% copy from ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss copy to ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.scss index b8ebed30f9..491ea40330 100644 --- a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.scss @@ -1,4 +1,4 @@ -/* +/*! * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. @@ -15,45 +15,22 @@ * limitations under the License. * */ - -.fixed-height { - height: 50px; -} - -.data-explorer-options { - padding: 0px; -} - -.data-explorer-options-item { - display: inline; - margin-right: 10px; -} - -.m-20 { - margin: 20px; -} - -.h-100 { +.resizer { + width: 6px; + cursor: ew-resize; + background: rgba(0, 0, 0, 0.1); height: 100%; -} - -.dashboard-grid { + position: absolute; + z-index: 10; display: flex; - flex-direction: column; - flex: 1 1 100%; -} - -.designer-panel-container { - width: 100%; - height: 100%; -} - -.designer-panel { - width: 450px; - border: 1px solid var(--color-tab-border); + align-items: center; + justify-content: center; + &:hover { + background-color: #aaa; + } } -.widget-title-text { - white-space: nowrap; - margin-right: 12px; +.drag-icon { + font-size: 10px; + color: #555; } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.ts new file mode 100644 index 0000000000..b8574acc07 --- /dev/null +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sidebar-resize/sidebar-resize.component.ts @@ -0,0 +1,52 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import { + Component, + EventEmitter, + Output, + WritableSignal, + Input, +} from '@angular/core'; +import { CdkDragMove } from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'sidebar-resize', + templateUrl: './sidebar-resize.component.html', + styleUrls: ['./sidebar-resize.component.scss'], +}) +export class SidebarResizeComponent { + @Input() currentWidth: WritableSignal<number>; + @Input() minWidth: number = 450; + @Input() maxWidth: number = 1000; + + @Output() currentWidthChanged = new EventEmitter<number>(); + + protected onDragMoved(event: CdkDragMove) { + const deltaX = -event.distance.x * 0.4; + const newWidth = Math.min( + Math.max(this.currentWidth() + deltaX, this.minWidth), + this.maxWidth, + ); + + const element = event.source.element.nativeElement; + element.style.transform = 'none'; + + this.currentWidthChanged.emit(newWidth); + } +} diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts index e4eeca1d76..6278f7f5f0 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts @@ -65,6 +65,7 @@ import { TimeRangeSelectorComponent } from './components/time-selector/time-rang import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-selector-menu/time-selector-menu.component'; import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; import { DataExplorerRefreshIntervalSettingsComponent } from './components/time-selector/refresh-interval-settings/refresh-interval-settings.component'; +import { SidebarResizeComponent } from './components/sidebar-resize/sidebar-resize.component'; import { MatSelectModule } from '@angular/material/select'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatMenuModule } from '@angular/material/menu'; @@ -83,6 +84,7 @@ import { DateInputComponent } from './components/date-input/date-input.component import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatInputModule } from '@angular/material/input'; import { TranslateModule } from '@ngx-translate/core'; +import { DragDropModule } from '@angular/cdk/drag-drop'; @NgModule({ declarations: [ @@ -123,6 +125,7 @@ import { TranslateModule } from '@ngx-translate/core'; SpConfigurationBoxComponent, SelectDataRangeComponent, SelectDataMissingValuesComponent, + SidebarResizeComponent, ], imports: [ CommonModule, @@ -150,6 +153,7 @@ import { TranslateModule } from '@ngx-translate/core'; MatRadioModule, MatSort, TranslateModule.forChild({}), + DragDropModule, ], providers: [DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], exports: [ @@ -176,6 +180,7 @@ import { TranslateModule } from '@ngx-translate/core'; TimeRangeSelectorComponent, TimeRangeSelectorMenuComponent, DataExplorerRefreshIntervalSettingsComponent, + SidebarResizeComponent, ], }) export class SharedUiModule {} diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts index cbf05ab894..f0022cb3d3 100644 --- a/ui/projects/streampipes/shared-ui/src/public-api.ts +++ b/ui/projects/streampipes/shared-ui/src/public-api.ts @@ -47,6 +47,7 @@ export * from './lib/components/time-selector/time-range-selector.component'; export * from './lib/components/time-selector/time-selector-menu/time-selector-menu.component'; export * from './lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; export * from './lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component'; +export * from './lib/components/sidebar-resize/sidebar-resize.component'; export * from './lib/models/sp-navigation.model'; diff --git a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.html b/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.html index 2f3c30bf4c..02f9eb6fda 100644 --- a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.html +++ b/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.html @@ -45,11 +45,20 @@ class="designer-panel-container h-100 dashboard-grid" > <mat-drawer + [style.width.px]="currentWidth()" [opened]="editMode" mode="side" position="end" class="designer-panel" + [style.overflow-x]="'hidden'" > + <sidebar-resize + [currentWidth]="currentWidth" + (currentWidthChanged)="updateCurrentWidth($event)" + [minWidth]="450" + [maxWidth]="1000" + > + </sidebar-resize> <div fxLayout="column" fxFlex="100"> <sp-data-explorer-designer-panel [currentlyConfiguredWidget]="dataView" @@ -59,7 +68,10 @@ </sp-data-explorer-designer-panel> </div> </mat-drawer> - <mat-drawer-content class="h-100 dashboard-grid"> + <mat-drawer-content + class="h-100 dashboard-grid" + [style.margin-right.px]="currentWidth()" + > <div #panel fxFlex="100" fxLayout="column"> <sp-data-explorer-dashboard-widget *ngIf=" diff --git a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss b/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss index b8ebed30f9..de0a7c5563 100644 --- a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss +++ b/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.scss @@ -49,7 +49,7 @@ } .designer-panel { - width: 450px; + width: 100%; border: 1px solid var(--color-tab-border); } diff --git a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.ts b/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.ts index 5e2f01d849..dd1fb46dc0 100644 --- a/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.ts +++ b/ui/src/app/data-explorer/components/chart-view/data-explorer-chart-view.component.ts @@ -16,7 +16,13 @@ * */ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { + Component, + ElementRef, + OnInit, + signal, + ViewChild, +} from '@angular/core'; import { ChartService, DataExplorerWidgetModel, @@ -71,6 +77,9 @@ export class DataExplorerChartViewComponent private translateService: TranslateService, ) {} + protected defaultWidth = 450; + protected currentWidth = signal(this.defaultWidth); + ngOnInit() { const dataViewId = this.route.snapshot.params.id; this.editMode = this.route.snapshot.queryParams.editMode; @@ -216,4 +225,8 @@ export class DataExplorerChartViewComponent this.dataView, ); } + + updateCurrentWidth(newWidth: number): void { + this.currentWidth.set(newWidth); + } }
