Merge pull request #8897 from vvlladd28/improvement/move-form-table-style

Move form table style from data key to form.scss

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="keyRowFormGroup" class="tb-data-key-row">
+<div [formGroup]="keyRowFormGroup" class="tb-form-table-row tb-data-key-row">
   <mat-form-field *ngIf="hasAdditionalLatestDataKeys" class="tb-inline-field tb-source-field" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="latest">
       <mat-option [value]="false">{{ 'datakey.timeseries' | translate }}</mat-option>
@@ -157,7 +157,7 @@
       <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
     </mat-form-field>
   </div>
-  <div class="tb-data-keys-table-row-buttons">
+  <div class="tb-form-table-row-cell-buttons">
     <button type="button"
             mat-icon-button
             (click)="editKey(true)"

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.scss

@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 .tb-data-key-row {
-  height: 38px;
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  padding-left: 12px;
-
   .mat-mdc-form-field.tb-inline-field.tb-key-field {
     .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) {
       .mat-mdc-form-field-infix {
@@ -62,19 +56,3 @@
     width: 60px;
   }
 }
-
-.tb-data-keys-table-row-buttons {
-  display: flex;
-  flex-direction: row;
-  button.mat-mdc-icon-button.mat-mdc-button-base {
-    padding: 7px;
-    width: 38px;
-    height: 38px;
-    .mat-icon {
-      color: rgba(0, 0, 0, 0.38);
-    }
-    &.tb-hidden {
-      visibility: hidden;
-    }
-  }
-}

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html

@@ -17,22 +17,22 @@
 -->
 <div class="tb-form-panel">
   <div class="tb-form-panel-title">{{ panelTitle }}</div>
-  <div class="tb-data-keys-table">
+  <div class="tb-form-table">
-    <div class="tb-data-keys-header">
+    <div class="tb-form-table-header">
-      <div *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys-header-cell tb-source-header" translate>datakey.source</div>
+      <div *ngIf="hasAdditionalLatestDataKeys" class="tb-form-table-header-cell tb-source-header" translate>datakey.source</div>
-      <div class="tb-data-keys-header-cell" fxFlex translate>datakey.key</div>
+      <div class="tb-form-table-header-cell" fxFlex translate>datakey.key</div>
-      <div class="tb-data-keys-header-cell" fxFlex translate>datakey.label</div>
+      <div class="tb-form-table-header-cell" fxFlex translate>datakey.label</div>
-      <div *ngIf="!hideDataKeyColor" class="tb-data-keys-header-cell tb-color-header" translate>datakey.color</div>
+      <div *ngIf="!hideDataKeyColor" class="tb-form-table-header-cell tb-color-header" translate>datakey.color</div>
-      <div *ngIf="!hideUnits" class="tb-data-keys-header-cell tb-units-header" translate>widget-config.units-short</div>
+      <div *ngIf="!hideUnits" class="tb-form-table-header-cell tb-units-header" translate>widget-config.units-short</div>
-      <div *ngIf="!hideDecimals" class="tb-data-keys-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
+      <div *ngIf="!hideDecimals" class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
-      <div class="tb-data-keys-header-cell tb-actions-header"></div>
+      <div class="tb-form-table-header-cell tb-actions-header"></div>
     </div>
-    <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-data-keys-body tb-drop-list"
+    <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body tb-drop-list"
          cdkDropList cdkDropListOrientation="vertical"
          [cdkDropListDisabled]="!dragEnabled"
          (cdkDropListDropped)="keyDrop($event)">
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
-           class="tb-data-keys-table-row tb-draggable"
+           class="tb-form-table-row tb-draggable"
            *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
         <tb-data-key-row fxFlex
                          [formControl]="keyControl"
@@ -41,7 +41,7 @@
                          [entityAliasId]="entityAliasId"
                          (keyRemoved)="removeKey($index)">
         </tb-data-key-row>
-        <div class="tb-data-keys-table-row-buttons">
+        <div class="tb-form-table-row-cell-buttons">
           <button mat-icon-button
                   type="button"
                   cdkDragHandle

ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.scss

@@ -13,55 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.tb-data-keys-table {
+.tb-form-table-header-cell {
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  &.tb-source-header {
-  border-radius: 6px;
+    width: 140px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-bottom: 12px;
-  .tb-data-keys-header {
-    height: 48px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    display: flex;
-    flex-direction: row;
-    place-content: center flex-start;
-    align-items: center;
-    gap: 12px;
-    padding-left: 12px;
-    .tb-data-keys-header-cell {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.2px;
-      color: rgba(0, 0, 0, 0.54);
-      &.tb-source-header {
-        width: 140px;
-      }
-      &.tb-units-header {
-        width: 80px;
-      }
-      &.tb-color-header, &.tb-decimals-header {
-        width: 60px;
-      }
-      &.tb-actions-header {
-        width: 114px;
-      }
-    }
   }
-  .tb-data-keys-body {
+  &.tb-units-header {
-    display: flex;
+    width: 80px;
-    flex-direction: column;
-    gap: 12px;
   }
-  .tb-prompt {
+  &.tb-color-header, &.tb-decimals-header {
-    height: 38px;
+    width: 60px;
+  }
+  &.tb-actions-header {
+    width: 114px;
   }
 }
-
-.tb-data-keys-table-row {
-  height: 38px;
-  display: flex;
-  flex-direction: row;
-  background: #fff;
-}

ui-ngx/src/form.scss

@@ -269,4 +269,71 @@
       }
     }
   }
+
+  .tb-form-table {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+
+    .tb-form-table-header {
+      height: 48px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      display: flex;
+      flex-direction: row;
+      place-content: center flex-start;
+      align-items: center;
+      gap: 12px;
+      padding-left: 12px;
+      &-cell {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        color: rgba(0, 0, 0, 0.54);
+      }
+    }
+
+    .tb-form-table-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .tb-prompt {
+      height: 38px;
+    }
+
+    .tb-form-table-row {
+      height: 38px;
+      display: flex;
+      flex-direction: row;
+      gap: 12px;
+      padding-left: 12px;
+
+      &.tb-draggable {
+        gap: 0;
+        padding-left: 0;
+        background: #fff;
+      }
+
+      &-cell-buttons {
+        display: flex;
+        flex-direction: row;
+        button.mat-mdc-icon-button.mat-mdc-button-base {
+          padding: 7px;
+          width: 38px;
+          height: 38px;
+          .mat-icon {
+            color: rgba(0, 0, 0, 0.38);
+          }
+          &.tb-hidden {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+  }
 }