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 2022/01/19 21:52:28 UTC
[incubator-streampipes] branch STREAMPIPES-507 updated: [STREAMPIPES-507] Add toggle for fields view in data configuration
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-507 by this push:
new 5cd51a2 [STREAMPIPES-507] Add toggle for fields view in data configuration
5cd51a2 is described below
commit 5cd51a2a37557c0680e096348a2cbc4415de76b0
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Jan 19 22:52:17 2022 +0100
[STREAMPIPES-507] Add toggle for fields view in data configuration
---
.../field-selection-panel.component.html | 28 +++++++++++++++-------
.../field-selection-panel.component.scss | 9 ++++++-
.../field-selection-panel.component.ts | 6 +++++
.../filter-selection-panel.component.html | 7 +++---
ui/src/scss/sp/layout.scss | 9 +++++--
5 files changed, 44 insertions(+), 15 deletions(-)
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html
index 1ee90e5..1e2decf 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html
@@ -17,20 +17,32 @@
-->
<div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center">
- <span class="data-explorer-header">Fields </span>
- <div fxLayout="row" fxLayoutAlign="start center">
- <button mat-button mat-raised-button color="accent" class="small-button"
- style="margin-right:10px;"
+ <span class="data-explorer-header">Fields </span>
+ <button mat-button mat-raised-button color="accent" class="small-button btn-margin"
data-cy="data-explorer-data-set-field-select-all"
(click)="selectAllFields()">Select all
</button>
- <button mat-button mat-raised-button class="small-button mat-basic"
- style="margin-right:10px;"
+ <button mat-button mat-raised-button class="small-button mat-basic btn-margin"
(click)="deselectAllFields()">Deselect all
</button>
- </div>
+ <button mat-button
+ mat-icon-button
+ class="pull-btn-right"
+ matTooltip="Expand More"
+ (click)="toggleExpandFields()"
+ *ngIf="!expandFields">
+ <mat-icon>expand_more</mat-icon>
+ </button>
+ <button mat-button
+ mat-icon-button
+ class="pull-btn-right"
+ matTooltip="Expand Less"
+ (click)="toggleExpandFields()"
+ *ngIf="expandFields">
+ <mat-icon>expand_less</mat-icon>
+ </button>
</div>
- <div fxLayout="column" class="field-scroll-panel">
+ <div fxLayout="column" [class.field-scroll-panel]="!expandFields">
<div fxLayout="column"
*ngFor="let field of sourceConfig.queryConfig.fields">
<sp-field-selection [field]="field" [sourceConfig]="sourceConfig" [widgetId]="widgetId">
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss
index 4e4c150..b27aa7d 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss
@@ -17,9 +17,16 @@
*/
.field-scroll-panel {
- max-height: 200px;
+ max-height: 100px;
overflow-y:auto;
overflow-x: hidden;
}
+.pull-btn-right {
+ margin-left: auto;
+}
+
+.btn-margin {
+ margin-right:10px;
+}
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts
index 2f29c0b..a191f0d 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts
@@ -32,6 +32,8 @@ export class FieldSelectionPanelComponent implements OnInit {
@Input() sourceConfig: SourceConfig;
@Input() widgetId: string;
+ expandFields = false;
+
constructor(private fieldProvider: DataExplorerFieldProviderService,
private widgetConfigService: WidgetConfigurationService) {}
@@ -80,5 +82,9 @@ export class FieldSelectionPanelComponent implements OnInit {
}
}
+ toggleExpandFields() {
+ this.expandFields = !this.expandFields;
+ }
+
}
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
index 0c8dabf..8d360a4 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html
@@ -29,7 +29,7 @@
fxLayout="column">
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
- <mat-form-field color="accent" class="w-150-px mr-15">
+ <mat-form-field color="accent" class="w-140-px mr-5">
<mat-label>Field</mat-label>
<mat-select
[(value)]="filter.field"
@@ -40,8 +40,7 @@
[value]="field">{{field.runtimeName}}</mat-option>
</mat-select>
</mat-form-field>
- <mat-form-field color="accent" class="w-50-px mr-15">
- <mat-label>Operator</mat-label>
+ <mat-form-field color="accent" class="w-50-px mr-5">
<mat-select
[(value)]="filter.operator"
(selectionChange)="updateWidget()"
@@ -66,7 +65,7 @@
</mat-option>
</mat-select>
</mat-form-field>
- <mat-form-field color="accent" class="w-150-px mr-15">
+ <mat-form-field color="accent" class="w-140-px mr-5">
<mat-label>Value</mat-label>
<input matInput
[(ngModel)]="filter.value"
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index c6858eb..f664ae2 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -84,6 +84,11 @@
margin-right: 10px;
}
+.mr-5 {
+ margin-right: 5px;
+}
+
+
.mr-15 {
margin-right: 15px;
}
@@ -96,8 +101,8 @@
width: 100px;
}
-.w-150-px {
- width: 150px;
+.w-140-px {
+ width: 140px;
}
.w-100 {