From 3c9ab8c91f99a2b2a894c7048ba7b15007a40118 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 15 Jun 2023 13:02:06 +0300
Subject: [PATCH 1/2] UI: Fixed table row style

---
 .../widget/lib/alarms-table-widget.component.html |  4 ++--
 .../lib/entities-table-widget.component.html      |  2 +-
 .../components/widget/lib/table-widget.models.ts  |  2 +-
 .../lib/timeseries-table-widget.component.html    | 12 ++++++------
 ui-ngx/src/styles.scss                            | 15 +++++++++++++++
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
index 9a23e86bf8..8cba9e8e8c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
@@ -70,7 +70,7 @@
                           [indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)">
             </mat-checkbox>
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm">
+          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
             <mat-checkbox (click)="$event.stopPropagation();"
                           (change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
                           [checked]="alarmsDatasource.isSelected(alarm)">
@@ -122,7 +122,7 @@
                                                                 maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
+          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
                                                                maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
                                                                width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
             <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
index d89eaeda27..eac3f8710c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
@@ -52,7 +52,7 @@
                                                                 maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
           </mat-header-cell>
-          <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
+          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
                                                                 width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
             <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 2a29776e7e..62236f01b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -451,7 +451,7 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
     '.mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky, .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky {\n' +
     'background-color: ' + origBackgroundColor + ';\n' +
     '}\n' +
-    '.mat-mdc-table .mat-mdc-cell {\n' +
+    '.mat-mdc-table .mat-mdc-row {\n' +
     'color: ' + mdDark + ';\n' +
     'background-color: rgba(0, 0, 0, 0);\n' +
     '}\n' +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index d0ca2f23d1..65f873b586 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -64,32 +64,32 @@
                                                                       maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                       width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
                 </mat-header-cell>
-                <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
+                <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(source, entity, row)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                    maxWidth: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px',
                                                                    width: (source.timeseriesDatasource.countCellButtonAction * 48) + 'px' }">
                   <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                    <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                       <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
                       <button *ngIf="actionDescriptor.icon"
                               mat-icon-button [disabled]="isLoading$ | async"
                               matTooltip="{{ actionDescriptor.displayName }}"
                               matTooltipPosition="above"
-                              (click)="onActionButtonClick($event, row, actionDescriptor)">
+                              (click)="onActionButtonClick($event, entity, actionDescriptor)">
                         <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                       </button>
                     </ng-container>
                   </div>
-                  <div fxHide fxShow.lt-lg *ngIf="row.hasActions">
+                  <div fxHide fxShow.lt-lg *ngIf="entity.hasActions">
                     <button mat-icon-button
                             (click)="$event.stopPropagation(); ctx.detectChanges();"
                             [matMenuTriggerFor]="cellActionsMenu">
                       <mat-icon class="material-icons">more_vert</mat-icon>
                     </button>
                     <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                      <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                      <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
                         <button mat-menu-item *ngIf="actionDescriptor.icon"
                                 [disabled]="isLoading$ | async"
-                                (click)="onActionButtonClick($event, row, actionDescriptor)">
+                                (click)="onActionButtonClick($event, entity, actionDescriptor)">
                           <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                           <span>{{ actionDescriptor.displayName }}</span>
                         </button>
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 760ffe88c6..b9ad237eac 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -664,6 +664,21 @@ mat-label {
     table-layout: auto;
     border-collapse: separate;
     margin: 0;
+
+    .mat-mdc-row {
+      font-size: 13px;
+    }
+
+    .mat-mdc-cell {
+      background: inherit;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+    }
   }
 
   .mat-mdc-footer-row::after, .mat-mdc-header-row::after, .mat-mdc-row::after {

From 62da933c2e89dba6a30263732e6758e46f2a7ee1 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 16 Aug 2023 15:23:05 +0300
Subject: [PATCH 2/2] UI: Add style only for table widget

---
 ui-ngx/src/styles.scss | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 4879f1894e..a584985924 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -690,20 +690,24 @@ mat-label {
     table-layout: auto;
     border-collapse: separate;
     margin: 0;
+  }
 
-    .mat-mdc-row {
-      font-size: 13px;
-    }
+  .tb-table-widget {
+    .mat-mdc-table {
+      .mat-mdc-row {
+        font-size: 13px;
+      }
 
-    .mat-mdc-cell {
-      background: inherit;
-      color: inherit;
-      font-size: inherit;
-      font-family: inherit;
-      font-weight: inherit;
-      line-height: inherit;
-      letter-spacing: inherit;
-      text-transform: inherit;
+      .mat-mdc-cell {
+        background: inherit;
+        color: inherit;
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        text-transform: inherit;
+      }
     }
   }