UI: Refactoring widget header action button

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts

@@ -127,19 +127,23 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       actionSourceId: [this.action.actionSourceId, Validators.required],
       columnIndex: [{value: this.checkColumnIndex(this.action.columnIndex), disabled: true}, Validators.required],
       name: [this.action.name, [this.validateActionName(), Validators.required]],
-      buttonType: [isDefinedAndNotNull(this.action.buttonType) ? this.action.buttonType : WidgetHeaderActionButtonType.icon, []],
+      buttonType: [{ value: this.action.buttonType ?? WidgetHeaderActionButtonType.icon, disabled: true}, []],
-      showIcon: [isDefinedAndNotNull(this.action.showIcon) ? this.action.showIcon : true, []],
+      showIcon: [{ value: this.action.showIcon ?? true, disabled: true}, []],
       icon: [this.action.icon, Validators.required],
-      buttonColor: [isDefinedAndNotNull(this.action.buttonColor) ? this.action.buttonColor : 'rgba(0, 0, 0, 0.87)', []],
+      buttonColor: [{ value: this.action.buttonColor ?? 'rgba(0, 0, 0, 0.87)', disabled: true}, []],
-      buttonFillColor: [isDefinedAndNotNull(this.action.buttonFillColor) ? this.action.buttonFillColor : '#3F52DD', []],
+      buttonFillColor: [{ value: this.action.buttonFillColor ?? '#3F52DD', disabled: true}, []],
-      buttonBorderColor: [isDefinedAndNotNull(this.action.buttonBorderColor) ? this.action.buttonBorderColor : '#3F52DD', []],
+      buttonBorderColor: [{ value: this.action.buttonBorderColor ?? '#3F52DD', disabled: true}, []],
-      customButtonStyle: [isDefinedAndNotNull(this.action.customButtonStyle) ? this.action.customButtonStyle : null, []],
+      customButtonStyle: [{ value: this.action.customButtonStyle ?? {}, disabled: true}, []],
       useShowWidgetActionFunction: [this.action.useShowWidgetActionFunction],
       showWidgetActionFunction: [this.action.showWidgetActionFunction || 'return true;'],
       widgetAction: [actionDescriptorToAction(toWidgetActionDescriptor(this.action)), Validators.required]
     });
     this.updateShowWidgetActionForm();
-    this.widgetHeaderButtonValidators();
+    if (this.widgetActionFormGroup.get('actionSourceId').value === 'headerButton') {
+      this.widgetActionFormGroup.get('buttonType').enable({emitEvent: false});
+      this.widgetActionFormGroup.get('buttonColor').enable({emitEvent: false});
+      this.widgetHeaderButtonValidators();
+    }
     this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
       takeUntilDestroyed(this.destroyRef)
     ).subscribe((value) => {
@@ -151,6 +155,17 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       } else {
         this.widgetActionFormGroup.get('columnIndex').disable();
       }
+      if (value === 'headerButton') {
+        this.widgetActionFormGroup.get('buttonType').enable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonColor').enable({emitEvent: false});
+        this.widgetHeaderButtonValidators();
+      } else {
+        this.widgetActionFormGroup.get('buttonType').disable({emitEvent: false});
+        this.widgetActionFormGroup.get('showIcon').disable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonColor').disable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonFillColor').disable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonBorderColor').disable({emitEvent: false});
+      }
     });
     this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.pipe(
       takeUntilDestroyed(this.destroyRef)
@@ -185,10 +200,12 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
         this.widgetActionFormGroup.get('buttonFillColor').enable({emitEvent: false});
         break;
       case WidgetHeaderActionButtonType.stroked:
+        this.widgetActionFormGroup.get('showIcon').enable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonBorderColor').enable({emitEvent: false});
+        break;
       case WidgetHeaderActionButtonType.flat:
         this.widgetActionFormGroup.get('showIcon').enable({emitEvent: false});
         this.widgetActionFormGroup.get('buttonFillColor').enable({emitEvent: false});
-        this.widgetActionFormGroup.get('buttonBorderColor').enable({emitEvent: false});
         break;
       case WidgetHeaderActionButtonType.miniFab:
         this.widgetActionFormGroup.get('buttonFillColor').enable({emitEvent: false});

ui-ngx/src/app/modules/home/components/widget/widget-container.component.html

@@ -109,11 +109,10 @@
             [style]="action.customButtonStyle"
             [class.!hidden]="isEdit"
             [class.mr-2]="!last"
-            [style.background-color]="action.buttonFillColor"
             (click)="action.onAction($event)"
             matTooltip="{{ action.displayName }}"
             matTooltipPosition="above">
-      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <tb-icon>{{ action.icon }}</tb-icon>
     </button>
   }
   @case (widgetHeaderActionButtonType.basic) {
@@ -123,46 +122,41 @@
             (click)="action.onAction($event)"
             matTooltip="{{ action.displayName }}"
             matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <span>{{ action.displayName }}</span>
     </button>
   }
   @case (widgetHeaderActionButtonType.raised) {
     <button [class.!hidden]="isEdit" mat-raised-button
             [class.mr-2]="!last"
             [style]="action.customButtonStyle"
-            [style.background-color]="action.buttonFillColor"
             (click)="action.onAction($event)"
             matTooltip="{{ action.displayName }}"
             matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <span>{{ action.displayName }}</span>
     </button>
   }
   @case (widgetHeaderActionButtonType.stroked) {
     <button [class.!hidden]="isEdit" mat-stroked-button
             [class.mr-2]="!last"
             [style]="action.customButtonStyle"
-            [style.border-color]="action.buttonBorderColor"
-            [style.background-color]="action.buttonFillColor"
             (click)="action.onAction($event)"
             matTooltip="{{ action.displayName }}"
             matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <span>{{ action.displayName }}</span>
     </button>
   }
   @case (widgetHeaderActionButtonType.flat) {
     <button [class.!hidden]="isEdit" mat-flat-button
             [class.mr-2]="!last"
             [style]="action.customButtonStyle"
-            [style.background-color]="action.buttonFillColor"
-            [style.border-color]="action.buttonBorderColor"
             (click)="action.onAction($event)"
             matTooltip="{{ action.displayName }}"
             matTooltipPosition="above">
-      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <span>{{ action.displayName }}</span>
     </button>
   }
   @default {
@@ -172,7 +166,7 @@
             (click)="action.onAction($event)"
             matTooltip="{{ action.displayName }}"
             matTooltipPosition="above">
-      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <tb-icon>{{ action.icon }}</tb-icon>
     </button>
   }
 }

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -44,6 +44,7 @@ import {
   widgetActionSources,
   WidgetActionType,
   WidgetComparisonSettings,
+  WidgetHeaderActionButtonType,
   WidgetMobileActionDescriptor,
   WidgetMobileActionType,
   WidgetResource,
@@ -301,10 +302,13 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             buttonType: descriptor.buttonType,
             showIcon: descriptor.showIcon,
             icon: descriptor.icon,
-            buttonColor: descriptor.buttonColor,
+            customButtonStyle: this.headerButtonStyle(
-            buttonFillColor: descriptor.buttonFillColor,
+              descriptor.buttonType,
-            buttonBorderColor: descriptor.buttonBorderColor,
+              descriptor.customButtonStyle,
-            customButtonStyle: descriptor.customButtonStyle,
+              descriptor.buttonColor,
+              descriptor.buttonFillColor,
+              descriptor.buttonBorderColor
+            ),
             descriptor,
             useShowWidgetHeaderActionFunction,
             showWidgetHeaderActionFunction,
@@ -359,6 +363,39 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     }
   }
 
+  headerButtonStyle(buttonType: WidgetHeaderActionButtonType = WidgetHeaderActionButtonType.icon,
+                    customButtonStyle:{[key: string]: string},
+                    buttonColor: string = 'rgba(0,0,0,0.87)',
+                    backgroundColor: string,
+                    borderColor: string) {
+    const buttonStyle = {};
+    switch (buttonType) {
+      case WidgetHeaderActionButtonType.basic:
+        buttonStyle['--mdc-text-button-label-text-color'] = buttonColor;
+        break;
+      case WidgetHeaderActionButtonType.raised:
+        buttonStyle['--mdc-protected-button-label-text-color'] = buttonColor;
+        buttonStyle['--mdc-protected-button-container-color'] = backgroundColor;
+        break;
+      case WidgetHeaderActionButtonType.stroked:
+        buttonStyle['--mdc-outlined-button-label-text-color'] = buttonColor;
+        buttonStyle['--mdc-outlined-button-outline-color'] = borderColor;
+        break;
+      case WidgetHeaderActionButtonType.flat:
+        buttonStyle['--mdc-filled-button-label-text-color'] = buttonColor;
+        buttonStyle['--mdc-filled-button-container-color'] = backgroundColor;
+        break;
+      case WidgetHeaderActionButtonType.miniFab:
+        buttonStyle['--mat-fab-small-foreground-color'] = buttonColor;
+        buttonStyle['--mdc-fab-small-container-color'] = backgroundColor;
+        break;
+      default:
+        buttonStyle['--mat-icon-color'] = buttonColor;
+        break;
+    }
+    return {...buttonStyle, ...customButtonStyle};
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     for (const propName of Object.keys(changes)) {
       const change = changes[propName];

ui-ngx/src/app/modules/home/models/widget-component.models.ts

@@ -132,7 +132,7 @@ export interface WidgetHeaderAction extends IWidgetAction {
   buttonColor?: string;
   buttonFillColor?: string;
   buttonBorderColor?: string;
-  customButtonStyle?: string;
+  customButtonStyle?: {[key: string]: string};
   useShowWidgetHeaderActionFunction: boolean;
   showWidgetHeaderActionFunction: CompiledTbFunction<ShowWidgetHeaderActionFunction>;
 }

ui-ngx/src/app/shared/models/widget.models.ts

@@ -780,7 +780,7 @@ export interface WidgetActionDescriptor extends WidgetAction {
   buttonColor?: string;
   buttonFillColor?: string;
   buttonBorderColor?: string;
-  customButtonStyle?: string;
+  customButtonStyle?: {[key: string]: string};
   displayName?: string;
   useShowWidgetActionFunction?: boolean;
   showWidgetActionFunction?: TbFunction;