tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: improvements for form scss

pull/10050/head
Dmitriymush 3 years ago
parent
16fa1780c0
commit
6614928bce
3 changed files with 50 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
  2. 24
      ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
  3. 23
      ui-ngx/src/form.scss

30
ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
View File

@ -34,7 +34,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
{{ 'widgets.liquid-level-card.title' | translate }}
</mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
@ -49,7 +49,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
{{ 'widgets.liquid-level-card.icon' | translate }}
</mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-end">
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
@ -64,7 +64,7 @@
</div>
</div>
<div fxFlex fxLayout="column" class="tb-form-row space-between">
<div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
<div class="tb-flex-centered-row space-between no-gap fill-width">
<div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
<tb-toggle-select formControlName="tankSelectionType">
<tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -96,7 +96,7 @@
formControlName="shapeAttributeName">
</tb-string-autocomplete>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
<div class="tb-flex-centered-row space-between no-gap fill-width">
<div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
<div class="see-example"
[tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@ -123,16 +123,16 @@
<div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
<div class="tb-flex-centered-row flex-end no-gap">
<tb-unit-input required style="max-width: 25%;" class="flex"
[tagFilter]="unitsType.capacity"
formControlName="datasourceUnits">
</tb-unit-input>
</div>
</div>
<div class="tb-form-row space-between" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
<div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
<mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -154,9 +154,9 @@
</ng-template>
</div>
</div>
<div class="tb-form-row" [fxShow]="volumeInput">
<div class="tb-form-row column-xs" [fxShow]="volumeInput">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
<mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -186,9 +186,9 @@
</ng-template>
</div>
</div>
<div class="tb-form-row space-between" [fxShow]="volumeInput">
<div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
<mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -226,7 +226,7 @@
<div class="tb-form-row space-between"
*ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
<div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-end">
<mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
<input matInput formControlName="decimals" type="number"
min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@ -241,7 +241,7 @@
</div>
<div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
<div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-end">
<tb-font-settings formControlName="volumeFont"
[previewText]="totalVolumeValuePreviewFn">
</tb-font-settings>
@ -267,7 +267,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
{{ 'widgets.liquid-level-card.level' | translate }}
</mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-end">
<tb-unit-input required class="flex"
[tagFilter]="unitsType.capacity"
formControlName="tooltipUnits">
@ -288,7 +288,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
{{ 'widgets.value-card.date' | translate }}
</mat-slide-toggle>
<div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
<tb-font-settings formControlName="tooltipDateFont"
[previewText]="datePreviewFn">

24
ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
View File

@ -19,7 +19,7 @@
<div class="tb-form-panel no-padding no-border">
<div class="tb-form-panel">
<div fxFlex fxLayout="column" class="tb-form-row space-between">
<div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
<div class="tb-flex-centered-row space-between no-gap fill-width">
<div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
<tb-toggle-select formControlName="tankSelectionType">
<tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -51,7 +51,7 @@
formControlName="shapeAttributeName">
</tb-string-autocomplete>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
<div class="tb-flex-centered-row space-between no-gap fill-width">
<div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
<div class="see-example"
[tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@ -87,9 +87,9 @@
formControlName="datasourceUnits">
</tb-unit-input>
</div>
<div class="tb-form-row space-between" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
<div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
<mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -111,9 +111,9 @@
</ng-template>
</div>
</div>
<div class="tb-form-row" *ngIf="volumeInput">
<div class="tb-form-row column-xs" *ngIf="volumeInput">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
<mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -143,9 +143,9 @@
</ng-template>
</div>
</div>
<div class="tb-form-row space-between" [fxShow]="volumeInput">
<div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
<div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
<mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
<mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@ -188,7 +188,7 @@
<div class="tb-form-row space-between"
*ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
<div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-end">
<tb-font-settings formControlName="valueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
@ -198,7 +198,7 @@
</div>
<div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
<div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-end">
<tb-font-settings formControlName="volumeFont"
[previewText]="totalVolumeValuePreviewFn">
</tb-font-settings>
@ -232,7 +232,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
{{ 'widgets.liquid-level-card.level' | translate }}
</mat-slide-toggle>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<tb-unit-input [tagFilter]="unitsType.capacity"
required class="flex" formControlName="tooltipUnits">
</tb-unit-input>
@ -252,7 +252,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
{{ 'widgets.value-card.date' | translate }}
</mat-slide-toggle>
<div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div class="tb-flex-centered-row flex-start">
<tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
<tb-font-settings formControlName="tooltipDateFont"
[previewText]="datePreviewFn">

23
ui-ngx/src/form.scss
View File

@ -211,6 +211,29 @@
}
}
.tb-flex-centered-row {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
gap: 8px;
&.flex-start {
justify-content: flex-start;
}
&.flex-end {
justify-content: flex-end;
}
&.space-between {
justify-content: space-between;
}
&.no-gap {
gap: 0;
}
&.fill-width {
width: 100%;
}
}
.tb-form-panel, .tb-form-row {
.mat-slide {
margin: 0;

Write Preview
Loading…
Cancel
Save