From 2ca3ce47f40256b56d15434bc6fc99823fa778a8 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 3 Dec 2020 16:27:27 +0200
Subject: [PATCH] UI: Fixed show in Safari browser profile; Fixed show
 ui-rule-node

---
 .../filter-predicate-value.component.html     | 16 ++--
 .../filter/key-filter-list.component.html     |  2 +-
 .../alarm/create-alarm-rules.component.html   |  2 +-
 .../alarm/device-profile-alarm.component.html |  7 +-
 .../device-profile-alarms.component.html      |  3 +-
 .../profile/device-profile.component.html     |  2 +-
 .../rule-node-details.component.html          | 86 +++++++++----------
 7 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index 524285ea3f..01106137b9 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -17,28 +17,28 @@
 -->
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateValueFormGroup">
   <div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
-    <div fxFlex fxLayout="column" [ngSwitch]="valueType">
+    <div fxLayout="column" [ngSwitch]="valueType">
       <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
-        <mat-form-field floatLabel="always" hideRequiredMarker fxFlex class="mat-block">
+        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
           <mat-label></mat-label>
           <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
         </mat-form-field>
       </ng-template>
       <ng-template [ngSwitchCase]="valueTypeEnum.NUMERIC">
-        <mat-form-field floatLabel="always" hideRequiredMarker fxFlex class="mat-block">
+        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
           <mat-label></mat-label>
           <input required type="number" matInput formControlName="defaultValue"
                  placeholder="{{'filter.value' | translate}}">
         </mat-form-field>
       </ng-template>
       <ng-template [ngSwitchCase]="valueTypeEnum.DATE_TIME">
-        <tb-datetime fxFlex formControlName="defaultValue"
+        <tb-datetime formControlName="defaultValue"
                      dateText="filter.date"
                      timeText="filter.time"
                      required [showLabel]="false"></tb-datetime>
       </ng-template>
       <ng-template [ngSwitchCase]="valueTypeEnum.BOOLEAN">
-        <mat-checkbox fxFlex formControlName="defaultValue">
+        <mat-checkbox formControlName="defaultValue">
           {{ (filterPredicateValueFormGroup.get('defaultValue').value ? 'value.true' : 'value.false') | translate }}
         </mat-checkbox>
       </ng-template>
@@ -46,9 +46,9 @@
     <div class="tb-hint" translate>filter.default-value</div>
   </div>
   <div fxFlex fxLayout="column" [fxShow]="dynamicMode">
-    <div fxFlex formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
       <div fxFlex fxLayout="column">
-        <mat-form-field floatLabel="always" hideRequiredMarker fxFlex class="mat-block">
+        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
           <mat-label></mat-label>
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -62,7 +62,7 @@
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
       </div>
       <div fxFlex fxLayout="column">
-        <mat-form-field floatLabel="always" hideRequiredMarker fxFlex class="mat-block">
+        <mat-form-field floatLabel="always" hideRequiredMarker class="mat-block">
           <mat-label></mat-label>
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
index 26dbaaec4a..cf670d7b27 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@@ -41,7 +41,7 @@
             <span *ngIf="$index > 0" translate>filter.operation.and</span>
           </div>
           <div fxLayout="column" fxFlex="92">
-            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+            <div fxLayout="row" fxLayoutAlign="start center">
               <div fxFlex>{{ keyFilterControl.value.key.key }}</div>
               <div fxFlex translate>{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) }}</div>
               <button mat-icon-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
index 5c992d9e04..5fa0733905 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
@@ -51,7 +51,7 @@
       <span translate fxLayoutAlign="center center" style="margin: 16px 0"
             class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
   </div>
-  <div fxLayout="row" *ngIf="!disabled">
+  <div *ngIf="!disabled">
     <button mat-stroked-button color="primary"
             type="button"
             (click)="addCreateAlarmRule()"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index a803f4ad53..2225467498 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -83,9 +83,9 @@
     <tb-create-alarm-rules formControlName="createRules" style="padding-bottom: 16px;">
     </tb-create-alarm-rules>
     <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
-    <div fxFlex fxLayout="row"
+    <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
          [fxShow]="alarmFormGroup.get('clearRule').value"
-         fxLayoutGap="8px;" fxLayoutAlign="start center" style="padding-bottom: 8px;">
+         style="padding-bottom: 8px;">
       <div class="clear-alarm-rule" fxFlex fxLayout="row">
         <tb-alarm-rule formControlName="clearRule" fxFlex>
         </tb-alarm-rule>
@@ -103,8 +103,7 @@
       <span translate fxLayoutAlign="center center" style="margin: 16px 0"
             class="tb-prompt">device-profile.no-clear-alarm-rule</span>
     </div>
-    <div fxLayout="row" *ngIf="!disabled"
-         [fxShow]="!alarmFormGroup.get('clearRule').value">
+    <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
       <button mat-stroked-button color="primary"
               type="button"
               (click)="addClearAlarmRule()"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index e1b446c65a..55a907076e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -30,8 +30,7 @@
       <span translate fxLayoutAlign="center center"
             class="tb-prompt">device-profile.no-alarm-rules</span>
   </div>
-  <div *ngIf="!disabled" fxFlex fxLayout="row" fxLayoutAlign="start center"
-       style="padding-top: 16px;">
+  <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
             type="button"
             (click)="addAlarm()"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
index 468e946a74..13dcc8b7fb 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
@@ -39,7 +39,7 @@
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index fd4efddf5a..880e7586df 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -21,48 +21,46 @@
     {{'rulechain.open-rulechain' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
-  <form [formGroup]="ruleNodeFormGroup">
-    <fieldset [disabled]="(isLoading$ | async) || !isEdit || isReadOnly">
-      <section *ngIf="ruleNode.component.type !== ruleNodeType.RULE_CHAIN">
-        <section fxLayout="column" fxLayout.gt-sm="row">
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>rulenode.name</mat-label>
-            <input matInput formControlName="name" required>
-            <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')
-                           || ruleNodeFormGroup.get('name').hasError('pattern')">
-              {{ 'rulenode.name-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-checkbox formControlName="debugMode">
-            {{ 'rulenode.debug-mode' | translate }}
-          </mat-checkbox>
-        </section>
-        <tb-rule-node-config #ruleNodeConfigComponent
-          formControlName="configuration"
-          [ruleNodeId]="ruleNode.ruleNodeId?.id"
-          [nodeDefinition]="ruleNode.component.configurationDescriptor.nodeDefinition">
-        </tb-rule-node-config>
-        <div formGroupName="additionalInfo" fxLayout="column">
-          <mat-form-field class="mat-block">
-            <mat-label translate>rulenode.description</mat-label>
-            <textarea matInput formControlName="description" rows="2"></textarea>
-          </mat-form-field>
-        </div>
+<form [formGroup]="ruleNodeFormGroup" class="mat-padding">
+  <fieldset [disabled]="(isLoading$ | async) || !isEdit || isReadOnly">
+    <section *ngIf="ruleNode.component.type !== ruleNodeType.RULE_CHAIN">
+      <section fxLayout="column" fxLayout.gt-sm="row">
+        <mat-form-field fxFlex class="mat-block">
+          <mat-label translate>rulenode.name</mat-label>
+          <input matInput formControlName="name" required>
+          <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')
+                         || ruleNodeFormGroup.get('name').hasError('pattern')">
+            {{ 'rulenode.name-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+        <mat-checkbox formControlName="debugMode">
+          {{ 'rulenode.debug-mode' | translate }}
+        </mat-checkbox>
       </section>
-      <section *ngIf="ruleNode.component.type === ruleNodeType.RULE_CHAIN">
-        <tb-entity-autocomplete required
-                                [excludeEntityIds]="[ruleChainId]"
-                                [entityType]="entityType.RULE_CHAIN"
-                                formControlName="targetRuleChainId">
-        </tb-entity-autocomplete>
-        <div formGroupName="additionalInfo" fxLayout="column">
-          <mat-form-field class="mat-block">
-            <mat-label translate>rulenode.description</mat-label>
-            <textarea matInput formControlName="description" rows="2"></textarea>
-          </mat-form-field>
-        </div>
-      </section>
-    </fieldset>
-  </form>
-</div>
+      <tb-rule-node-config #ruleNodeConfigComponent
+        formControlName="configuration"
+        [ruleNodeId]="ruleNode.ruleNodeId?.id"
+        [nodeDefinition]="ruleNode.component.configurationDescriptor.nodeDefinition">
+      </tb-rule-node-config>
+      <div formGroupName="additionalInfo" fxLayout="column">
+        <mat-form-field class="mat-block">
+          <mat-label translate>rulenode.description</mat-label>
+          <textarea matInput formControlName="description" rows="2"></textarea>
+        </mat-form-field>
+      </div>
+    </section>
+    <section *ngIf="ruleNode.component.type === ruleNodeType.RULE_CHAIN">
+      <tb-entity-autocomplete required
+                              [excludeEntityIds]="[ruleChainId]"
+                              [entityType]="entityType.RULE_CHAIN"
+                              formControlName="targetRuleChainId">
+      </tb-entity-autocomplete>
+      <div formGroupName="additionalInfo" fxLayout="column">
+        <mat-form-field class="mat-block">
+          <mat-label translate>rulenode.description</mat-label>
+          <textarea matInput formControlName="description" rows="2"></textarea>
+        </mat-form-field>
+      </div>
+    </section>
+  </fieldset>
+</form>