From 29372983b12f4471eb28c31229525d104f5ef986 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 20 May 2020 09:52:07 +0300
Subject: [PATCH] Update style

---
 .../entity-view/entity-view.component.html    | 92 ++++++++++---------
 .../entity-view/entity-view.component.scss    | 11 +--
 .../home/pages/tenant/tenant.component.scss   | 12 ++-
 ui-ngx/src/styles.scss                        |  3 +-
 4 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 847fe4e670..538c09feea 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -85,51 +85,53 @@
                           formControlName="entityId">
         </tb-entity-select>
       </section>
-      <div formGroupName="keys">
-        <mat-expansion-panel formGroupName="attributes" [expanded]="true">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-panel-title" translate>entity-view.attributes-propagation</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
-          <label translate class="tb-title no-padding">entity-view.client-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="cs"
-            keysText="entity-view.client-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-          <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="sh"
-            keysText="entity-view.shared-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-          <label translate class="tb-title no-padding">entity-view.server-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="ss"
-            keysText="entity-view.server-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-        </mat-expansion-panel>
-        <mat-expansion-panel [expanded]="true">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-panel-title" translate>entity-view.timeseries-data</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
-          <label translate class="tb-title no-padding">entity-view.timeseries</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="timeseries"
-            keysText="entity-view.timeseries-placeholder"
-            [dataKeyType]="dataKeyType.timeseries">
-          </tb-entity-keys-list>
-        </mat-expansion-panel>
+      <div class="mat-accordion-container" formGroupName="keys">
+        <mat-accordion [multi]="true">
+          <mat-expansion-panel formGroupName="attributes" [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-panel-title" translate>entity-view.attributes-propagation</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
+            <label translate class="tb-title no-padding">entity-view.client-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="cs"
+              keysText="entity-view.client-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+            <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="sh"
+              keysText="entity-view.shared-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+            <label translate class="tb-title no-padding">entity-view.server-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="ss"
+              keysText="entity-view.server-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+          </mat-expansion-panel>
+          <mat-expansion-panel [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-panel-title" translate>entity-view.timeseries-data</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
+            <label translate class="tb-title no-padding">entity-view.timeseries</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="timeseries"
+              keysText="entity-view.timeseries-placeholder"
+              [dataKeyType]="dataKeyType.timeseries">
+            </tb-entity-keys-list>
+          </mat-expansion-panel>
+        </mat-accordion>
       </div>
       <tb-datetime
         dateText="entity-view.start-date"
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.scss b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.scss
index 37e98ac274..9356738028 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.scss
@@ -14,16 +14,7 @@
  * limitations under the License.
  */
 :host {
-  mat-expansion-panel {
+  .mat-accordion-container {
     margin-bottom: 16px;
   }
 }
-
-.tb-dialog {
-  :host {
-    mat-expansion-panel {
-      margin-left: 6px;
-      margin-right: 6px;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss
index b05c6324fa..ff6264cda0 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss
@@ -14,9 +14,15 @@
  * limitations under the License.
  */
 :host ::ng-deep {
-  .mat-checkbox.hinted-checkbox {
-    .mat-checkbox-inner-container {
-      margin-top: 4px;
+  .mat-checkbox{
+    &.hinted-checkbox {
+      .mat-checkbox-inner-container {
+        margin-top: 4px;
+      }
+    }
+
+    .mat-checkbox-layout{
+      white-space: normal;
     }
   }
 }
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index ba963eb075..cd882d2dc3 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -812,7 +812,6 @@ mat-label {
         min-width: 100%;
         display: flex;
         flex-direction: column;
-        overflow: auto;
       }
       .mat-dialog-content {
         margin: 0;
@@ -862,7 +861,7 @@ mat-label {
       .mat-dialog-container {
         > *:first-child, form {
           min-width: 100% !important;
-          height: 100vh;
+          height: 100%;
         }
         .mat-dialog-content {
           max-height: 100%;