You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/08/17 15:20:13 UTC
[incubator-streampipes] 01/04: [STREAMPIPES-402] Properly resize
grid in edit mode
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-319
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 39a957b7c3dc79d8aac0c145bf9c2a35cf0fe43e
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 12 22:16:17 2021 +0200
[STREAMPIPES-402] Properly resize grid in edit mode
---
.../components/panel/data-explorer-dashboard-panel.component.html | 4 ++--
.../components/panel/data-explorer-dashboard-panel.component.ts | 6 +++++-
.../components/widgets/table/table-widget.component.html | 3 ++-
.../components/widgets/table/table-widget.component.scss | 5 +++++
ui/src/app/data-explorer/data-explorer.component.html | 2 +-
ui/src/app/data-explorer/data-explorer.component.ts | 4 ++++
6 files changed, 19 insertions(+), 5 deletions(-)
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
index d016b1a..0cf976e 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
@@ -18,8 +18,8 @@
<div fxFlex="100" fxLayout="column">
<mat-drawer-container class="designer-panel-container h-100 dashboard-grid">
- <mat-drawer #designerDrawer [opened]="editMode" mode="side" position="end" class="designer-panel">
- <div fxLayout="column" fxFlex>
+ <mat-drawer #designerDrawer [opened]="editMode" mode="side" position="end" class="designer-panel" (opened)="triggerResize()">
+ <div fxLayout="column" fxFlex="100">
<div fxLayout="row" class="sp-tab-bg designer-panel-header">
<div fxLayoutAlign="start center" class="designer-panel-title">Widget Configuration</div>
<div fxFlex fxLayoutAlign="end end">
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
index 476d62b..7b63feb 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
@@ -18,7 +18,7 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
-import { Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
import { DataExplorerAddVisualizationDialogComponent } from '../../dialogs/add-widget/data-explorer-add-visualization-dialog.component';
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
@@ -68,6 +68,10 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
}
+ triggerResize() {
+ window.dispatchEvent(new Event('resize'));
+ }
+
addWidget(): void {
const dialogRef = this.dialog.open(DataExplorerAddVisualizationDialogComponent, {
width: '70%',
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
index 2b1ea3b..05131f5 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
@@ -22,6 +22,7 @@
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
+ <div class="table-container">
<table
mat-table
mat-sort
@@ -54,5 +55,5 @@
<tr mat-row *matRowDef="let row; columns: dataExplorerWidget.dataConfig.columnNames;"></tr>
</table>
-
+ </div>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
index 401d1c9..86b2c82 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
@@ -18,6 +18,11 @@
@import '../../../../../scss/variables';
+.table-container {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
.table-widget {
width: 100%;
background: inherit;
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index c302fde..cd3c920 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -31,7 +31,7 @@
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
- <button mat-menu-item (click)="editMode = true" *ngIf="!editMode">
+ <button mat-menu-item (click)="triggerEditMode()" *ngIf="!editMode">
<mat-icon>edit</mat-icon>
<span>Edit dashboard</span>
</button>
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index cc431d11..07de37c 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -117,4 +117,8 @@ export class DataExplorerComponent implements OnInit {
toggleGrid() {
this.dashboardPanel.toggleGrid(this.gridVisible);
}
+
+ triggerEditMode() {
+ this.editMode = true;
+ }
}