You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2020/04/15 16:48:52 UTC

[incubator-streampipes] 02/02: Fix css for data explorer

This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch STREAMPIPES-79
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit 149db7ce2842bac45032d9e729a709c54169c4a3
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Apr 15 18:48:25 2020 +0200

    Fix css for data explorer
---
 ui/package.json                                               |  4 +---
 .../grid/data-explorer-dashboard-grid.component.css           |  6 ++++++
 .../panel/data-explorer-dashboard-panel.component.css         |  6 ++++++
 .../panel/data-explorer-dashboard-panel.component.html        |  2 +-
 ui/src/app/data-explorer-v2/data-explorer-v2.component.css    | 11 ++++++++++-
 ui/src/app/data-explorer-v2/data-explorer-v2.component.html   |  5 ++---
 ui/src/app/data-explorer-v2/data-explorer-v2.module.ts        |  6 ++----
 7 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 610daf1..a509626 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -98,11 +98,9 @@
     "shepherd.js": "2.4.0",
     "slick-carousel": "1.6.0",
     "systemjs": "^0.21.6",
-    "tslib": "^1.10.0",
-    "ng-pick-datetime": "^7.0.0",
-    "trix": "0.10.1",
     "tslib": "^1.11.1",
     "ng-pick-datetime": "^7.0.0",
+    "trix": "0.10.1",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
diff --git a/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.css b/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.css
index 6368cea..791a047 100644
--- a/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.css
+++ b/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.css
@@ -22,4 +22,10 @@ gridster ::ng-deep {
 
 gridster.edit ::ng-deep {
     background: #d3d3d3;
+}
+
+gridster.scrollVertical ::ng-deep {
+    min-height: 100%;
+    display: flex;
+    flex: 1 1 100%;
 }
\ No newline at end of file
diff --git a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.css b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.css
index 1faa4d1..178a2de 100644
--- a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.css
+++ b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.css
@@ -23,3 +23,9 @@
 .h-100 {
     height:100%;
 }
+
+.dashboard-grid {
+    display:flex;
+    flex-direction: column;
+    flex: 1 1 100%;
+}
diff --git a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html
index 119ca8b..76ba569 100644
--- a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html
@@ -34,5 +34,5 @@
             [viewDateRange]="viewDateRange"
             (updateCallback)="updateAndQueueItemForDeletion($event)"
             (deleteCallback)="removeAndQueueItemForDeletion($event)"
-            class="h-100"></sp-data-explorer-dashboard-grid>
+            class="h-100 dashboard-grid"></sp-data-explorer-dashboard-grid>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.component.css b/ui/src/app/data-explorer-v2/data-explorer-v2.component.css
index 7eaab26..1837aff 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.component.css
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.component.css
@@ -18,4 +18,13 @@
 
 .mr-20 {
     margin-right:20px;
-}
\ No newline at end of file
+}
+
+.dashboard-panel {
+    height: 100%;
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 100%;
+    overflow-y: auto;
+}
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.component.html b/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
index 678e218..00c5b19 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
@@ -39,7 +39,7 @@
         </div>
     </div>
 
-    <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
+    <div class="page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
         <sp-data-explorer-dashboard-overview (selectDashboardEmitter)="openDashboard($event)"
                                              (reloadDashboardsEmitter)="getDashboards()"
                                              [dataViewDashboards]="dataViewDashboards"
@@ -50,8 +50,7 @@
                                           [(editMode)]="editMode"
                                           [dashboard]="selectedDataViewDashboard"
                                           [viewDateRange]="viewDateRange"
-                                          style="height:100%;" *ngIf="dashboardTabSelected">
-
+                                          class="dashboard-panel" *ngIf="dashboardTabSelected">
         </sp-data-explorer-dashboard-panel>
     </div>
 </div>
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
index 81bbd05..10d2fc1 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
@@ -44,8 +44,8 @@ import { DataExplorerDashboardPanelComponent } from './components/panel/data-exp
 import { TimeRangeSelectorComponent } from './components/time-selector/timeRangeSelector.component';
 import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component';
 import { LineChartWidgetComponent } from './components/widgets/line-chart/line-chart-widget.component';
-import { DataDownloadDialog } from './components/widgets/old-explorer-widget/datadownloadDialog/dataDownload.dialog';
-import { OldExplorerComponent } from './components/widgets/old-explorer-widget/old-explorer.component';
+// import { DataDownloadDialog } from './components/widgets/old-explorer-widget/datadownloadDialog/dataDownload.dialog';
+// import { OldExplorerComponent } from './components/widgets/old-explorer-widget/old-explorer.component';
 import { TableWidgetComponent } from './components/widgets/table/table-widget.component';
 import { LoadDataSpinnerComponent } from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
 import { NoDataInDateRangeComponent } from './components/widgets/utils/no-data/no-data-in-date-range.component';
@@ -108,9 +108,7 @@ export const MY_NATIVE_FORMATS = {
     DataExplorerEditDataViewDialogComponent,
     TableWidgetComponent,
     LineChartWidgetComponent,
-    DataDownloadDialog,
     TimeRangeSelectorComponent,
-    OldExplorerComponent,
     NoDataInDateRangeComponent,
     LoadDataSpinnerComponent,
     SelectPropertiesComponent