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/11 20:29:43 UTC
[incubator-streampipes] 02/03: [STREAMPIPES-402] Fix wrong sizing
of widgets
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 a81054e10aea0f3e449d03fc503ad9fea933c302
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Aug 11 22:29:13 2021 +0200
[STREAMPIPES-402] Fix wrong sizing of widgets
---
.../data-explorer-dashboard-widget.component.html | 6 ++----
.../data-explorer-dashboard-widget.component.scss | 21 +++++++++++++++++++--
.../widgets/table/table-widget.component.html | 7 ++-----
ui/src/scss/sp/widgets.scss | 1 +
4 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
index 09d98ab..928181f 100644
--- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
+++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
@@ -18,8 +18,7 @@
<div class="h-100 shadow">
<div class="box" [ngStyle]="{background: configuredWidget.baseAppearanceConfig.backgroundColor, color: configuredWidget.baseAppearanceConfig.textColor}">
- <div class="widget-header">
- <div class="m-0 row header h-40">
+ <div class="widget-header h-40">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="widget-header-text">
{{ configuredWidget.baseAppearanceConfig.widgetTitle }}
</div>
@@ -42,8 +41,7 @@
</mat-menu>
</div>
</div>
- </div>
- <div class="h-100 p-0 row content gridster-item-content ml-0 mr-0">
+ <div class="widget-content p-0 gridster-item-content ml-0 mr-0">
<div *ngIf="widgetLoaded" class="h-100">
<div *ngIf="configuredWidget.widgetType === 'table'" class="h-100 p-0">
<sp-data-explorer-table-widget
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
index 3474819..18741fa 100644
--- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
+++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
@@ -27,7 +27,7 @@
}
.h-40 {
- height:35px;
+ height:40px;
}
.p-0 {
@@ -62,6 +62,23 @@
}
.widget-header {
- padding: 15px;
+ padding-left: 15px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(0,0,0,0.15);
+}
+
+::-webkit-scrollbar {
+ width: 15px;
+ height: 15px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(0,0,0,0.25);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(0,0,0,0.35);
}
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 64b6511..2b1ea3b 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
@@ -16,11 +16,9 @@
~
-->
-<div class="widget-content" [ngStyle]="{height: gridsterItemComponent.height, background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
- <div class="widget-inner-content">
-<!-- <div style=" overflow-y: auto;" [style.max-height.px]="gridsterItem.rows * 100 - 40">-->
+<div fxLayout="column" fxFlex="100" [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
- <sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
+ <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
@@ -56,6 +54,5 @@
<tr mat-row *matRowDef="let row; columns: dataExplorerWidget.dataConfig.columnNames;"></tr>
</table>
- </div>
</div>
diff --git a/ui/src/scss/sp/widgets.scss b/ui/src/scss/sp/widgets.scss
index aa8f5e6..26b6539 100644
--- a/ui/src/scss/sp/widgets.scss
+++ b/ui/src/scss/sp/widgets.scss
@@ -19,6 +19,7 @@
.widget-content {
width:100%;
height: calc(100% - 40px);
+ overflow-y: auto;
}
.widget-inner-options {