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

min width for server inputs fix

pull/11101/head
mpetrov 2 years ago
parent
d6043f4d74
commit
6773eb0b8d
2 changed files with 91 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
  2. 6
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss

168
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
View File

@ -16,93 +16,95 @@
--> -->
<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup"> <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> <div class="server-settings">
<div class="fixed-title-width" translate>gateway.server-url</div> <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
<div class="tb-flex no-gap"> <div class="fixed-title-width" translate>gateway.server-url</div>
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> <div class="tb-flex no-gap">
<input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/> <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<mat-icon matSuffix <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
matTooltipPosition="above" <mat-icon matSuffix
matTooltipClass="tb-error-tooltip" matTooltipPosition="above"
[matTooltip]="('gateway.server-url-required') | translate" matTooltipClass="tb-error-tooltip"
*ngIf="serverConfigFormGroup.get('url').hasError('required') && [matTooltip]="('gateway.server-url-required') | translate"
serverConfigFormGroup.get('url').touched" *ngIf="serverConfigFormGroup.get('url').hasError('required') &&
class="tb-error"> serverConfigFormGroup.get('url').touched"
warning class="tb-error">
</mat-icon> warning
</mat-form-field> </mat-icon>
</mat-form-field>
</div>
</div> </div>
</div> <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate> gateway.timeout
gateway.timeout </div>
</div> <div class="tb-flex no-gap">
<div class="tb-flex no-gap"> <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> <input matInput type="number" min="0" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
<input matInput type="number" min="0" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/> <mat-icon matSuffix
<mat-icon matSuffix matTooltipPosition="above"
matTooltipPosition="above" matTooltipClass="tb-error-tooltip"
matTooltipClass="tb-error-tooltip" [matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
[matTooltip]="'gateway.timeout-error' | translate: {min: 1000}" *ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
*ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') || serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
serverConfigFormGroup.get('timeoutInMillis').hasError('min')) && serverConfigFormGroup.get('timeoutInMillis').touched"
serverConfigFormGroup.get('timeoutInMillis').touched" class="tb-error">
class="tb-error"> warning
warning </mat-icon>
</mat-icon> </mat-form-field>
</mat-form-field> </div>
</div> </div>
</div> <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> <div class="fixed-title-width" translate>gateway.security</div>
<div class="fixed-title-width" translate>gateway.security</div> <div class="tb-flex no-gap">
<div class="tb-flex no-gap"> <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> <mat-select formControlName="security">
<mat-select formControlName="security"> <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
<mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> </div>
</div> </div>
</div> <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate> gateway.scan-period
gateway.scan-period </div>
</div> <div class="tb-flex no-gap">
<div class="tb-flex no-gap"> <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> <input matInput type="number" min="0" name="value"
<input matInput type="number" min="0" name="value" formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/> <mat-icon matSuffix
<mat-icon matSuffix matTooltipPosition="above"
matTooltipPosition="above" matTooltipClass="tb-error-tooltip"
matTooltipClass="tb-error-tooltip" [matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
[matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}" *ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
*ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') || serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) && serverConfigFormGroup.get('scanPeriodInMillis').touched"
serverConfigFormGroup.get('scanPeriodInMillis').touched" class="tb-error">
class="tb-error"> warning
warning </mat-icon>
</mat-icon> </mat-form-field>
</mat-form-field> </div>
</div>
</div>
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
gateway.sub-check-period
</div> </div>
<div class="tb-flex no-gap"> <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
<input matInput type="number" min="0" name="value" gateway.sub-check-period
formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/> </div>
<mat-icon matSuffix <div class="tb-flex no-gap">
matTooltipPosition="above" <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
matTooltipClass="tb-error-tooltip" <input matInput type="number" min="0" name="value"
[matTooltip]="'gateway.sub-check-period-error' | translate: {min: 10}" formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
*ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') || <mat-icon matSuffix
serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) && matTooltipPosition="above"
serverConfigFormGroup.get('subCheckPeriodInMillis').touched" matTooltipClass="tb-error-tooltip"
class="tb-error"> [matTooltip]="'gateway.sub-check-period-error' | translate: {min: 10}"
warning *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
</mat-icon> serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
</mat-form-field> serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</div> </div>
</div> </div>
<div class="tb-form-row" fxLayoutAlign="space-between center"> <div class="tb-form-row" fxLayoutAlign="space-between center">

6
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
View File

@ -17,4 +17,10 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
.server-settings {
::ng-deep .fixed-title-width {
min-width: 254px !important;
}
}
} }

Write Preview
Loading…
Cancel
Save