UI: Improved show error in layout settings
This commit is contained in:
Vladyslav_Prykhodko
parent
9e8ca44d44
commit
e6bffae9c0
@ -119,20 +119,15 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<div translate>dashboard.columns-count</div>
|
||||
<mat-form-field *ngIf="!isScada()"
|
||||
appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
|
||||
<mat-form-field *ngIf="!isScada()" appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltipDisabled]="!(gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched)"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('columns').hasError('required') ? 'dashboard.columns-count-required' :
|
||||
(gridSettingsFormGroup.get('columns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
|
||||
<input matInput formControlName="columns" type="number" min="10" max="1008" step="1"
|
||||
required
|
||||
placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<mat-icon matSuffix
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('columns').hasError('required') ? 'dashboard.columns-count-required' :
|
||||
(gridSettingsFormGroup.get('columns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate"
|
||||
*ngIf="gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched"
|
||||
class="tb-error">
|
||||
warning
|
||||
</mat-icon>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="isScada()"
|
||||
class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
||||
@ -145,37 +140,29 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<div translate>dashboard.min-layout-width</div>
|
||||
<mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
|
||||
<mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltipDisabled]="!(gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched)"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('minColumns').hasError('required') ? 'dashboard.columns-count-required' :
|
||||
(gridSettingsFormGroup.get('minColumns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
|
||||
<input matInput formControlName="minColumns" type="number" min="10" max="1008" step="1"
|
||||
required
|
||||
placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<mat-icon matSuffix
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('minColumns').hasError('required') ? 'dashboard.columns-count-required' :
|
||||
(gridSettingsFormGroup.get('minColumns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate"
|
||||
*ngIf="gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched"
|
||||
class="tb-error">
|
||||
warning
|
||||
</mat-icon>
|
||||
<span translate matSuffix>dashboard.columns-suffix</span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="!isScada()" class="tb-form-row space-between">
|
||||
<div translate>dashboard.widgets-margins</div>
|
||||
<mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
|
||||
<mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltipDisabled]="!(gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched)"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('margin').hasError('required') ? 'dashboard.margin-required' :
|
||||
(gridSettingsFormGroup.get('margin').hasError('min') ? 'dashboard.min-margin-message' : 'dashboard.max-margin-message')) | translate">
|
||||
<input matInput formControlName="margin" type="number" min="0" max="50" step="any"
|
||||
required
|
||||
placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<mat-icon matSuffix
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('margin').hasError('required') ? 'dashboard.margin-required' :
|
||||
(gridSettingsFormGroup.get('margin').hasError('min') ? 'dashboard.min-margin-message' : 'dashboard.max-margin-message')) | translate"
|
||||
*ngIf="gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched"
|
||||
class="tb-error">
|
||||
warning
|
||||
</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="!isScada()" class="tb-form-row">
|
||||
@ -190,20 +177,16 @@
|
||||
</div>
|
||||
<div *ngIf="isDefaultLayout && !isDefaultBreakpoint" class="tb-form-row space-between">
|
||||
<div translate>dashboard.row-height</div>
|
||||
<mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
|
||||
<mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltipDisabled]="!(gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched)"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('rowHeight').hasError('required') ? 'dashboard.row-height-required' :
|
||||
(gridSettingsFormGroup.get('rowHeight').hasError('min') ?
|
||||
'dashboard.min-row-height-message' : 'dashboard.max-row-height-message')) | translate">
|
||||
<input matInput formControlName="rowHeight" type="number" min="5" max="200" step="any"
|
||||
required
|
||||
placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<mat-icon matSuffix
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('rowHeight').hasError('required') ? 'dashboard.row-height-required' :
|
||||
(gridSettingsFormGroup.get('rowHeight').hasError('min') ?
|
||||
'dashboard.min-row-height-message' : 'dashboard.max-row-height-message')) | translate"
|
||||
*ngIf="gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched"
|
||||
class="tb-error">
|
||||
warning
|
||||
</mat-icon>
|
||||
<span matSuffix>px</span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -245,20 +228,16 @@
|
||||
</div>
|
||||
<div *ngIf="!isScada()" class="tb-form-row space-between">
|
||||
<div translate>dashboard.mobile-row-height</div>
|
||||
<mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
|
||||
<mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltipDisabled]="!(gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched)"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('mobileRowHeight').hasError('required') ? 'dashboard.mobile-row-height-required' :
|
||||
(gridSettingsFormGroup.get('mobileRowHeight').hasError('min') ?
|
||||
'dashboard.min-mobile-row-height-message' : 'dashboard.max-mobile-row-height-message')) | translate">
|
||||
<input matInput formControlName="mobileRowHeight" type="number" min="5" max="200" step="any"
|
||||
required
|
||||
placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<mat-icon matSuffix
|
||||
matTooltipPosition="above"
|
||||
matTooltipClass="tb-error-tooltip"
|
||||
[matTooltip]="(gridSettingsFormGroup.get('mobileRowHeight').hasError('required') ? 'dashboard.mobile-row-height-required' :
|
||||
(gridSettingsFormGroup.get('mobileRowHeight').hasError('min') ?
|
||||
'dashboard.min-mobile-row-height-message' : 'dashboard.max-mobile-row-height-message')) | translate"
|
||||
*ngIf="gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched"
|
||||
class="tb-error">
|
||||
warning
|
||||
</mat-icon>
|
||||
<span matSuffix>px</span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user