UI: Fixed rule node config style

1 year ago · dd76f2d823
17 changed files with 77 additions and 24 deletions
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
@ -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>
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
@ -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>
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
@ -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">
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
@ -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>
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
@ -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>
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html
@ -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 }}"
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html
@ -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>
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
@ -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>
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
@ -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
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
@ -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%;
+      }
+    }
+  }
 }
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
@ -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;