dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

min width for server inputs fix

Browse Source
This commit is contained in:
mpetrov 2024-07-05 17:53:34 +03:00
parent d6043f4d74
commit 6773eb0b8d
2 changed files with 91 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 class="tb-flex no-gap">
<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 }}"/>
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
*ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
serverConfigFormGroup.get('timeoutInMillis').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</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" translate>gateway.security</div>
<input matInput type="number" min="0" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/> <div class="tb-flex no-gap">
<mat-icon matSuffix <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
matTooltipPosition="above" <mat-select formControlName="security">
matTooltipClass="tb-error-tooltip" <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
[matTooltip]="'gateway.timeout-error' | translate: {min: 1000}" </mat-select>
*ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') || </mat-form-field>
serverConfigFormGroup.get('timeoutInMillis').hasError('min')) && </div>
serverConfigFormGroup.get('timeoutInMillis').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</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" translate>gateway.security</div> gateway.scan-period
<div class="tb-flex no-gap"> </div>
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> <div class="tb-flex no-gap">
<mat-select formControlName="security"> <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option> <input matInput type="number" min="0" name="value"
</mat-select> formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
</mat-form-field> <mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
*ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
serverConfigFormGroup.get('scanPeriodInMillis').touched"
class="tb-error">
warning
</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.sub-check-period' | translate }}" translate>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate> gateway.sub-check-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="subCheckPeriodInMillis" 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.sub-check-period-error' | translate: {min: 10}"
[matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}" *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
*ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') || serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) && serverConfigFormGroup.get('subCheckPeriodInMillis').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 class="tb-flex no-gap">
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<input matInput type="number" min="0" name="value"
formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'gateway.sub-check-period-error' | translate: {min: 10}"
*ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</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;
}
}
} }