From 495e34c33718a32b7294c99afeccd362459f011c Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 6 Feb 2024 10:18:54 +0200
Subject: [PATCH] UI: Improve command button widget loading style. Improve
 single switch widget disabled state style.

---
 .../dashboard-page.component.ts               | 22 +++++--------
 .../widget/lib/action/action-widget.scss      |  6 ++++
 .../command-button-widget.component.html      |  3 +-
 .../rpc/single-switch-widget.component.html   | 14 +++++---
 .../rpc/single-switch-widget.component.scss   |  6 ----
 .../lib/rpc/single-switch-widget.component.ts | 33 ++-----------------
 6 files changed, 27 insertions(+), 57 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index f873743340..fe6364cc09 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -1049,26 +1049,20 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
         this.onAddWidgetClosed();
         this.isAddingWidgetClosed = true;
       }
-      if (this.widgetEditMode) {
-        if (revert) {
-          this.dashboard = this.prevDashboard;
-          this.dashboardLogoCache = undefined;
-          this.dashboardConfiguration = this.dashboard.configuration;
-        }
-      } else {
-        this.resetHighlight();
-        if (revert) {
-          this.dashboard = this.prevDashboard;
-          this.dashboardLogoCache = undefined;
-          this.dashboardConfiguration = this.dashboard.configuration;
+      this.resetHighlight();
+      if (revert) {
+        this.dashboard = this.prevDashboard;
+        this.dashboardLogoCache = undefined;
+        this.dashboardConfiguration = this.dashboard.configuration;
+        if (!this.widgetEditMode) {
           this.dashboardCtx.dashboardTimewindow = this.dashboardConfiguration.timewindow;
           this.updateDashboardCss();
           this.entityAliasesUpdated();
           this.filtersUpdated();
           this.updateLayouts();
-        } else {
-          this.dashboard.configuration.timewindow = this.dashboardCtx.dashboardTimewindow;
         }
+      } else if (!this.widgetEditMode) {
+        this.dashboard.configuration.timewindow = this.dashboardCtx.dashboardTimewindow;
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss
index 276fa725b8..6641c2c32e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss
@@ -13,6 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.mdc-linear-progress.tb-action-widget-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
 .tb-action-widget-error-container {
   position: absolute;
   bottom: 0;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
index a6f01edb67..26f910fdd7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
@@ -22,10 +22,11 @@
   <tb-widget-button
     [appearance]="appearance"
     [borderRadius]="borderRadius"
-    [disabled]="disabled"
+    [disabled]="disabled || (loading$ | async)"
     [ctx]="ctx"
     (clicked)="onClick($event)">
   </tb-widget-button>
+  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
   <div *ngIf="error" class="tb-action-widget-error-container">
     <div class="tb-action-widget-error-panel">
       <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
index 879902a3ef..c1c05cf880 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
@@ -22,17 +22,21 @@
   </div>
   <div #singleSwitchContent class="tb-single-switch-content" [class]="this.layout" [class.no-label]="!showIcon && !showLabel" [class.auto-scale]="autoScale">
     <div *ngIf="showIcon || showLabel" #singleSwitchLabelRow class="tb-single-switch-label-row">
-      <tb-icon *ngIf="showIcon" [style]="iconStyle">{{ icon }}</tb-icon>
-      <div *ngIf="showLabel" class="tb-single-switch-label" [style]="labelStyle">{{ label$ | async }}</div>
+      <tb-icon *ngIf="showIcon" [style]="iconStyle"
+               [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.iconColor">{{ icon }}</tb-icon>
+      <div *ngIf="showLabel" class="tb-single-switch-label" [style]="labelStyle"
+           [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.labelColor">{{ label$ | async }}</div>
     </div>
     <div #singleSwitchToggleRow class="tb-single-switch-slide-toggle-row">
-      <div *ngIf="showOffLabel" [style]="offLabelStyle">{{ offLabel }}</div>
+      <div *ngIf="showOffLabel" [style]="offLabelStyle"
+           [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.offLabelColor">{{ offLabel }}</div>
       <mat-slide-toggle class="tb-single-switch-toggle" [disabled]="disabled || (loading$ | async)" [(ngModel)]="value" (click)="!disabled && onToggleChange($event)">
       </mat-slide-toggle>
-      <div *ngIf="showOnLabel" [style]="onLabelStyle">{{ onLabel }}</div>
+      <div *ngIf="showOnLabel" [style]="onLabelStyle"
+           [style.color]="(disabled || (loading$ | async)) ? disabledColor : settings.onLabelColor">{{ onLabel }}</div>
     </div>
   </div>
-  <mat-progress-bar class="tb-single-switch-progress" style="height: 2px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
+  <mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar>
   <div *ngIf="error" class="tb-action-widget-error-container">
     <div class="tb-action-widget-error-panel">
       <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.scss
index bb5648a16d..27207e5f9d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.scss
@@ -39,12 +39,6 @@ $switchColorDisabled: var(--tb-single-switch-color-disabled, #D5D7E5);
     position: absolute;
     inset: 12px;
   }
-  .tb-single-switch-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
   > div.tb-single-switch-title-panel {
     position: absolute;
     top: 12px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
index a767d22408..2c15634893 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
@@ -97,6 +97,8 @@ export class SingleSwitchWidgetComponent extends
   offLabel = '';
   offLabelStyle: ComponentStyle = {};
 
+  disabledColor = 'rgba(0, 0, 0, 0.38)';
+
   autoScale = false;
 
   private panelResize$: ResizeObserver;
@@ -129,22 +131,18 @@ export class SingleSwitchWidgetComponent extends
     this.showLabel = this.settings.showLabel;
     this.label$ = this.ctx.registerLabelPattern(this.settings.label, this.label$);
     this.labelStyle = textStyle(this.settings.labelFont);
-    this.labelStyle.color = this.settings.labelColor;
 
     this.showIcon = this.settings.showIcon;
     this.icon = this.settings.icon;
     this.iconStyle = iconStyle(this.settings.iconSize, this.settings.iconSizeUnit );
-    this.iconStyle.color = this.settings.iconColor;
 
     this.showOnLabel = this.settings.showOnLabel;
     this.onLabel = this.settings.onLabel;
     this.onLabelStyle = textStyle(this.settings.onLabelFont);
-    this.onLabelStyle.color = this.settings.onLabelColor;
 
     this.showOffLabel = this.settings.showOffLabel;
     this.offLabel = this.settings.offLabel;
     this.offLabelStyle = textStyle(this.settings.offLabelFont);
-    this.offLabelStyle.color = this.settings.offLabelColor;
     const switchVariablesCss = `.tb-single-switch-panel {\n`+
                                            `--tb-single-switch-tumbler-color-on: ${this.settings.tumblerColorOn};\n`+
                                            `--tb-single-switch-tumbler-color-off: ${this.settings.tumblerColorOff};\n`+
@@ -229,33 +227,6 @@ export class SingleSwitchWidgetComponent extends
 
   private onDisabled(value: boolean): void {
     this.disabled = !!value;
-    if (this.disabled) {
-      if (this.showLabel) {
-        this.labelStyle = {...this.labelStyle, color: 'rgba(0, 0, 0, 0.38)'};
-      }
-      if (this.showIcon) {
-        this.iconStyle = {...this.iconStyle, color: 'rgba(0, 0, 0, 0.38)'};
-      }
-      if (this.showOnLabel) {
-        this.onLabelStyle = {...this.onLabelStyle, color: 'rgba(0, 0, 0, 0.38)'};
-      }
-      if (this.showOffLabel) {
-        this.offLabelStyle = {...this.offLabelStyle, color: 'rgba(0, 0, 0, 0.38)'};
-      }
-    } else {
-      if (this.showLabel) {
-        this.labelStyle = {...this.labelStyle, color: this.settings.labelColor};
-      }
-      if (this.showIcon) {
-        this.iconStyle = {...this.iconStyle, color: this.settings.iconColor};
-      }
-      if (this.showOnLabel) {
-        this.onLabelStyle = {...this.onLabelStyle, color: this.settings.onLabelColor};
-      }
-      if (this.showOffLabel) {
-        this.offLabelStyle = {...this.offLabelStyle, color: this.settings.offLabelColor};
-      }
-    }
     this.cd.markForCheck();
   }