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 2022/07/10 10:09:42 UTC
[incubator-streampipes] 01/03: [STREAMPIPES-558] Improve layout of guess schema view
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 4bfdaca1a88a328fa18fd0d4fdd4016d6515dce0
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sat Jul 9 12:21:21 2022 +0200
[STREAMPIPES-558] Improve layout of guess schema view
---
.../new-adapter/new-adapter.component.html | 6 ++--
.../event-property-row.component.html | 24 ++++++++++------
.../event-property-row.component.scss | 16 +++++++++++
ui/src/scss/sp/layout.scss | 32 ++++++++++++++++++++++
4 files changed, 66 insertions(+), 12 deletions(-)
diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.html b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
index 765d60e63..ff3275fb9 100644
--- a/ui/src/app/connect/components/new-adapter/new-adapter.component.html
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
@@ -19,12 +19,12 @@
<sp-basic-view [padding]="true" [showBackLink]="false">
<div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-icon-button (click)="removeSelection()">
+ <button mat-icon-button (click)="removeSelection()" matTooltip="Cancel">
<i class="material-icons">close</i>
</button>
</div>
<div fxLayout="column" fxLayoutAlign="center stretch" *ngIf="adapter">
- <div fxLayout="column" fxFlex="100" class="p-10">
+ <div fxLayout="column" fxFlex="100">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon *ngIf="isDataSetDescription" class="historic">lens</mat-icon>
<mat-icon *ngIf="isDataStreamDescription" class="real-time">lens
@@ -69,7 +69,7 @@
</mat-step>
<mat-step>
- <ng-template matStepLabel>Define Event Schema</ng-template>
+ <ng-template matStepLabel>Configure fields</ng-template>
<sp-event-schema #eschema fxLayout="column" fxFlex="100"
[(isEditable)]="isEditable"
[adapterDescription]="adapter"
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.html
index df176591a..31e7c672b 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.html
@@ -17,24 +17,28 @@
-->
<div fxLayout="row">
- <div fxFlex="1 1 auto" fxLayout="row">
+ <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="start center">
<b>
{{ label }}
</b>
- <mat-icon *ngIf="timestampProperty"
- style="font-size: 15px; padding: 4px;">
- access_time
- </mat-icon>
+ <span class="timestamp-property" *ngIf="timestampProperty" fxLayoutAlign="start center" fxLayout="row">
+ <mat-icon *ngIf="timestampProperty" class="timestamp-icon" fxLayout="row" fxLayoutAlign="start center">
+ access_time
+ </mat-icon>
+ marked as timestamp
+ </span>
<p style="margin: 0px 10px 10px;" *ngIf="isList">[List]</p>
</div>
- <div fxFlex="15" *ngIf="isPrimitive">
- <mat-select [(ngModel)]="node.data.propertyScope"
+ <div fxFlex="15" *ngIf="isPrimitive" fxLayoutAlign="center center">
+ <mat-form-field class="small-select" color="accent">
+ <mat-select [(ngModel)]="node.data.propertyScope" panelClass="small-select"
[attr.data-cy]="'property-scope-' + label">
<mat-option value="MEASUREMENT_PROPERTY">Measurement</mat-option>
<mat-option value="DIMENSION_PROPERTY">Dimension</mat-option>
<mat-option value="HEADER_PROPERTY">Header</mat-option>
</mat-select>
+ </mat-form-field>
</div>
<div fxFlex="0 1 auto" fxLayoutAlign="center center"
@@ -43,12 +47,14 @@
<mat-icon matTooltip="Add a Nested Property">queue</mat-icon>
</button>
</div>
- <div fxFlex="0 1 auto" fxLayoutAlign="center center"
+ <div fxFlex="0 1 auto"
+ fxLayoutAlign="center center"
+ class="ml-5 mr-5"
*ngIf="isNested || isPrimitive || isList">
<button [disabled]="!isEditable" color="accent" mat-button
(click)="openEditDialog(node.data)"
[attr.data-cy]="'edit-' + label.toLowerCase()">
- <mat-icon>edit</mat-icon>
+ <mat-icon>edit</mat-icon> Edit field
</button>
</div>
<div fxFlex="0 1 auto" fxLayoutAlign="center center">
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.scss b/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.scss
index a3becc8ef..aa6f60f17 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.scss
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-property-row/event-property-row.component.scss
@@ -28,3 +28,19 @@
.checkbox-selected {
opacity: 1 !important;
}
+
+.timestamp-property {
+ margin-left: 15px;
+ border-radius: 10px;
+ background: var(--color-processor);
+ padding: 0px 10px;
+ font-size: 12px;
+ color: #FFFFFF;
+}
+
+.timestamp-icon {
+ font-size: 12px;
+}
+
+
+
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index 2ed106575..64ae3550b 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -88,6 +88,9 @@
margin-right: 5px;
}
+.ml-5 {
+ margin-left: 5px;
+}
.mr-15 {
margin-right: 15px;
@@ -163,3 +166,32 @@ img {
.mat-expansion-panel-body {
padding: 0 !important;
}
+
+.small-select mat-select {
+ background-color: rgba(58, 40, 8, 0.12);
+ padding: 6px 10px 6px 10px;
+ box-sizing: border-box;
+ border-radius: 5px;
+}
+
+.small-select .mat-select-value {
+ font-size: 16px;
+ color: var(--color-accent);
+}
+
+.small-select .mat-form-field-underline {
+ display: none;
+}
+
+.small-select mat-select-trigger div>i {
+ margin-right: 8px;
+}
+
+.small-select .mat-form-field-infix {
+ padding: 0;
+ border-top: 0;
+}
+
+.small-select .mat-form-field-wrapper {
+ padding-bottom: 0;
+}