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

UI: Fixed rule node config style

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-05-07 11:44:54 +03:00
parent e7dae87e77
commit dd76f2d823
17 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
View File

@ -116,7 +116,7 @@
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-label translate>rule-node-config.polygon-definition</mat-label>
<input matInput formControlName="polygonsDefinition" required>
<mat-icon matSuffix class="margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.polygon-definition-hint' | translate }}">
help

2
ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
View File

@ -77,7 +77,7 @@
<mat-form-field floatLabel="always" class="mat-block flex-1">
<mat-label translate>rule-node-config.key-field-input</mat-label>
<input matInput formControlName="key" required/>
<mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
<mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
color="primary"
matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">help</mat-icon>
<mat-error *ngIf="mathFunctionConfigForm.get('result.key').hasError('required')" translate>

2
ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
View File

@ -19,7 +19,7 @@
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-label translate>rule-node-config.custom-table-name</mat-label>
<input required matInput formControlName="tableName">
<mat-icon class="help-icon margin-8 cursor-pointer"
<mat-icon class="help-icon m-2 cursor-pointer"
aria-hidden="false"
aria-label="help-icon"
matSuffix

2
ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
View File

@ -64,7 +64,7 @@
*ngIf="argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT">
<mat-label translate>rule-node-config.argument-key-field-input</mat-label>
<input [formControl]="argumentControl.get('key')" matInput required/>
<mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
<mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
color="primary"
matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">
help

2
ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
View File

@ -60,7 +60,7 @@
[emptyInputPlaceholder]="'rule-node-config.add-device-profile' | translate"
[filledInputPlaceholder]="'rule-node-config.add-device-profile' | translate"
formControlName="deviceTypes">
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.device-profile' | translate } }}">help</mat-icon>
</tb-entity-subtype-list>
</section>

2
ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
View File

@ -62,7 +62,7 @@
</div>
</mat-option>
</mat-autocomplete>
<mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
<mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
color="primary"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.message-type' | translate } }}">help</mat-icon>
<mat-error *ngIf="chipList.errorState">

2
ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
View File

@ -53,7 +53,7 @@
</div>
<ng-template #helpIcon>
<mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
</ng-template>

2
ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html
View File

@ -22,7 +22,7 @@
[placeholder]="'rule-node-config.add-detail' | translate"
[requiredText]="'rule-node-config.entity-details-list-empty' | translate"
formControlName="detailsList">
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.detail' | translate } }}">
help

4
ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html vendored
View File

@ -85,7 +85,7 @@
<mat-error *ngIf="lambdaConfigForm.get('connectionTimeout').hasError('min')">
{{ 'rule-node-config.connection-timeout-min' | translate }}
</mat-error>
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.connection-timeout-hint' | translate }}">help</mat-icon>
</mat-form-field>
@ -98,7 +98,7 @@
<mat-error *ngIf="lambdaConfigForm.get('requestTimeout').hasError('min')">
{{ 'rule-node-config.request-timeout-min' | translate }}
</mat-error>
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.request-timeout-hint' | translate }}">help</mat-icon>
</mat-form-field>

4
ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html
View File

@ -26,14 +26,14 @@
[label]="'rule-node-config.data-keys' | translate"
[placeholder]="'rule-node-config.add-message-field' | translate"
formControlName="messageNames">
<mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix color="primary" class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
</tb-string-items-list>
<tb-string-items-list editable subscriptSizing="dynamic"
[label]="'rule-node-config.metadata-keys' | translate"
[placeholder]="'rule-node-config.add-metadata-field' | translate"
formControlName="metadataNames">
<mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix color="primary" class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
</tb-string-items-list>
<div tb-hint-tooltip-icon="{{ 'rule-node-config.check-all-keys-tooltip' | translate }}"

2
ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html
View File

@ -24,7 +24,7 @@
[filledInputPlaceholder]="'rule-node-config.add-entity-type' | translate"
[label]="'rule-node-config.select-entity-types' | translate"
required>
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.entity-type' | translate } }}">help</mat-icon>
</tb-entity-type-list>

2
ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html
View File

@ -27,7 +27,7 @@
[placeholder]="'rule-node-config.add-key' | translate"
[requiredText]="'rule-node-config.key-val.at-least-one-key-error' | translate"
formControlName="keys">
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.use-regular-expression-hint' | translate }}">
help

6
ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
View File

@ -25,7 +25,7 @@
<mat-error *ngIf="deduplicationConfigForm.get('interval').hasError('min')">
{{'rule-node-config.interval-min-error' | translate}}
</mat-error>
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.interval-hint' | translate }}">help</mat-icon>
</mat-form-field>
@ -73,7 +73,7 @@
<mat-error *ngIf="deduplicationConfigForm.get('maxPendingMsgs').hasError('min')">
{{'rule-node-config.max-pending-msgs-min-error' | translate}}
</mat-error>
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.max-pending-msgs-hint' | translate }}">help</mat-icon>
</mat-form-field>
@ -89,7 +89,7 @@
<mat-error *ngIf="deduplicationConfigForm.get('maxRetries').hasError('min')">
{{'rule-node-config.max-retries-min-error' | translate}}
</mat-error>
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.max-retries-hint' | translate }}">help</mat-icon>
</mat-form-field>

2
ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html
View File

@ -26,7 +26,7 @@
[placeholder]="'rule-node-config.add-key' | translate"
[requiredText]="'rule-node-config.key-val.at-least-one-key-error' | translate"
formControlName="keys">
<mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
<mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
color="primary"
matTooltip="{{ 'rule-node-config.use-regular-expression-delete-hint' | translate }}">
help

2
ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div [formGroup]="ruleNodeConfigFormGroup">
<div [formGroup]="ruleNodeConfigFormGroup" class="rule-node-config">
<ng-container #definedConfigContent></ng-container>
<div class="tb-rulenode-directive-error" *ngIf="definedDirectiveError">{{definedDirectiveError}}</div>
<tb-json-object-edit *ngIf="!useDefinedDirective()" #jsonObjectEditComponent

53
ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
View File

@ -13,9 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
:host {
display: block;
@import './../scss/constants';
.rule-node-config {
tb-json-object-edit.tb-rule-node-configuration-json {
display: block;
height: 300px;
@ -26,4 +26,53 @@
font-weight: 400;
color: rgb(221, 44, 0);
}
.tb-error {
letter-spacing: 0.25px;
color: var(--mdc-theme-error, #f44336);
}
.tb-required::after {
content: "*";
font-size: 16px;
color: #000000de;
}
.help-icon {
color: #000000;
opacity: .38;
padding: unset;
&:hover {
color: $tb-primary-color;
opacity: unset;
}
}
.same-width-component-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
@media #{$mat-xs} {
flex-direction: column;
flex-wrap: wrap;
gap: 8px;
}
> * {
flex: 1;
}
.flex-2 {
flex: 2;
}
.third-width {
max-width: 32%;
@media #{$mat-xs} {
max-width: 100%;
}
}
}
}

10
ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
View File

@ -19,11 +19,13 @@ import {
ComponentRef,
EventEmitter,
forwardRef,
HostBinding,
Input,
OnDestroy,
Output,
ViewChild,
ViewContainerRef
ViewContainerRef,
ViewEncapsulation
} from '@angular/core';
import {
ControlValueAccessor,
@ -52,14 +54,16 @@ import { RuleChainType } from '@shared/models/rule-chain.models';
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RuleNodeConfigComponent),
multi: true
}]
}],
encapsulation: ViewEncapsulation.None
})
export class RuleNodeConfigComponent implements ControlValueAccessor, OnDestroy {
@ViewChild('definedConfigContent', {read: ViewContainerRef, static: true}) definedConfigContainer: ViewContainerRef;
@ViewChild('jsonObjectEditComponent') jsonObjectEditComponent: JsonObjectEditComponent;
@HostBinding('style.display') readonly styleDisplay = 'block';
private requiredValue: boolean;
get required(): boolean {
return this.requiredValue;