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

UI: Fixed form style and enhancement hint tooltip component

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-09-13 13:42:22 +03:00
parent 0ac9723cc4
commit cb546e7bd5
8 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
View File

@ -34,7 +34,7 @@
{{ 'gateway.remote-shell' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row no-border no-padding tb-not-inline-field">
<div class="tb-form-row no-border no-padding tb-standard-fields">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.thingsboard-host</mat-label>
<input matInput formControlName="host"/>
@ -84,7 +84,7 @@
matTooltip="{{ 'gateway.hints.token' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<div class="tb-form-row no-border no-padding tb-not-inline-field"
<div class="tb-form-row no-border no-padding tb-standard-fields"
*ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
<mat-form-field appearance="outline" class="flex" subscriptSizing="dynamic">
<mat-label translate>security.clientId</mat-label>
@ -181,7 +181,7 @@
class="first-capital">{{ localLogsConfigTranslateMap.get(logConfig) }}</tb-toggle-option>
</tb-toggle-select>
<ng-container [formGroup]="getLogFormGroup(logSelector.value)">
<div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.logs.level</mat-label>
<mat-select formControlName="logLevel">
@ -196,8 +196,8 @@
</mat-error>
</mat-form-field>
</div>
<div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<div class="tb-form-row no-border no-padding tb-not-inline-field saving-period">
<div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<div class="tb-form-row no-border no-padding tb-standard-fields saving-period">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.logs.saving-period</mat-label>
<input matInput formControlName="savingTime" type="number" min="0"/>
@ -250,7 +250,7 @@
</tb-toggle-select>
<div class="tb-form-panel-hint">{{ 'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate }}</div>
<ng-container [ngSwitch]="gatewayConfigGroup.get('storage.type').value">
<section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.storage-read-record-count</mat-label>
<input type="number" matInput formControlName="read_records_count"/>
@ -285,7 +285,7 @@
</mat-form-field>
</section>
<section *ngSwitchCase="StorageTypes.FILE">
<div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.storage-data-folder-path</mat-label>
<input matInput formControlName="data_folder_path"/>
@ -315,7 +315,7 @@
</mat-icon>
</mat-form-field>
</div>
<div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.storage-max-read-record-count</mat-label>
<input matInput type="number" formControlName="max_read_records_count"/>
@ -351,7 +351,7 @@
</div>
</section>
<section *ngSwitchCase="StorageTypes.SQLITE">
<div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.storage-path</mat-label>
<input matInput formControlName="data_file_path"/>
@ -413,7 +413,7 @@
</mat-slide-toggle>
</div>
<section>
<section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.server-port</mat-label>
<input matInput formControlName="serverPort" type="number" min="0"/>
@ -450,7 +450,7 @@
</mat-error>
</mat-form-field>
</section>
<section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.grpc-keep-alive</mat-label>
<input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
@ -484,7 +484,7 @@
</mat-error>
</mat-form-field>
</section>
<section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
<input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
@ -552,7 +552,7 @@
<div fxLayout="row" formArrayName="commands" class="statistics-container"
*ngFor="let commandControl of commandFormArray().controls; let $index = index">
<section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">
<section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.statistics.attribute-name</mat-label>
<input matInput formControlName="attributeOnGateway"/>
@ -619,7 +619,7 @@
{{ 'gateway.checking-device-activity' | translate }}
</mat-slide-toggle>
</div>
<section class="tb-form-row no-border no-padding tb-not-inline-field column-xs"
<section class="tb-form-row no-border no-padding tb-standard-fields column-xs"
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
@ -655,7 +655,7 @@
</div>
<div class="tb-form-panel no-padding-bottom">
<div class="tb-form-panel-title" translate>gateway.advanced</div>
<section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
<section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
<mat-form-field appearance="outline" class="flex">
<mat-label translate>gateway.min-pack-send-delay</mat-label>
<input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>

2
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
View File

@ -143,7 +143,7 @@
</section>
<section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex">
<section class="tb-form-panel input-container section-container">
<section class="tb-form-row tb-not-inline-field no-padding no-border column-lt-md input-container">
<section class="tb-form-row tb-standard-fields no-padding no-border column-lt-md input-container">
<mat-form-field class="flex" subscriptSizing="dynamic">
<mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
<input matInput formControlName="name" #nameInput/>

13
ui-ngx/src/app/shared/components/file-input.component.html
View File

@ -16,14 +16,11 @@
-->
<div class="tb-container">
<ng-container *ngIf="hint; else title">
<label class="tb-title pointer-event" [class.tb-required]="!disabled && required"
tb-hint-tooltip-icon="{{ hint }}">{{ label }}
</label>
</ng-container>
<ng-template #title>
<label class="tb-title" [class.tb-required]="!disabled && required">{{ label }}</label>
</ng-template>
<label class="tb-title"
[class.tb-required]="!disabled && required"
[class.pointer-event]="hint"
tb-hint-tooltip-icon="{{ hint }}">{{ label }}
</label>
<ng-container #flow="flow"
[flowConfig]="{allowDuplicateUploads: true}">
<div class="tb-file-select-container">

4
ui-ngx/src/app/shared/components/file-input.component.scss
View File

@ -22,10 +22,8 @@ $previewSize: 100px !default;
.tb-container {
margin-top: 0;
label.tb-title {
display: flex;
padding-bottom: 8px;
&:not(.pointer-event) {
display: block;
}
}
}

5
ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
View File

@ -17,5 +17,6 @@
-->
<ng-content></ng-content>
<tb-icon class="tb-hint-tooltip-icon tb-mat-18"
matTooltip="{{ tooltipText }}"
[matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
*ngIf="tooltipText"
matTooltip="{{ tooltipText }}"
[matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>

4
ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
View File

@ -13,12 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
:host {
:host(.tb-hint-tooltip) {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
:host {
.tb-hint-tooltip-icon {
color: #E0E0E0;
overflow: visible;

3
ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, Input } from '@angular/core';
import { Component, HostBinding, Input } from '@angular/core';
import { TooltipPosition } from '@angular/material/tooltip';
@Component({
@ -24,6 +24,7 @@ import { TooltipPosition } from '@angular/material/tooltip';
})
export class HintTooltipIconComponent {
@HostBinding('class.tb-hint-tooltip')
@Input('tb-hint-tooltip-icon') tooltipText: string;
@Input()

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

@ -221,7 +221,7 @@
}
}
.tb-form-row:not(.tb-not-inline-field) .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field {
.tb-form-row:not(.tb-standard-fields) .mat-mdc-form-field:not(.tb-not-inline-field), .mat-mdc-form-field.tb-inline-field {
&.mat-form-field-appearance-fill {
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
&:before {