UI: Refactoring widget header action button

2025-03-18 07:51:08 +02:00 · 2025-03-18 07:51:08 +02:00 · c8e2564041
commit c8e2564041
parent 60e188a47b
5 changed files with 78 additions and 30 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/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, []],
-      showIcon: [isDefinedAndNotNull(this.action.showIcon) ? this.action.showIcon : true, []],
+      buttonType: [{ value: this.action.buttonType ?? WidgetHeaderActionButtonType.icon, disabled: 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)', []],
-      buttonFillColor: [isDefinedAndNotNull(this.action.buttonFillColor) ? this.action.buttonFillColor : '#3F52DD', []],
-      buttonBorderColor: [isDefinedAndNotNull(this.action.buttonBorderColor) ? this.action.buttonBorderColor : '#3F52DD', []],
-      customButtonStyle: [isDefinedAndNotNull(this.action.customButtonStyle) ? this.action.customButtonStyle : null, []],
+      buttonColor: [{ value: this.action.buttonColor ?? 'rgba(0, 0, 0, 0.87)', disabled: true}, []],
+      buttonFillColor: [{ value: this.action.buttonFillColor ?? '#3F52DD', disabled: true}, []],
+      buttonBorderColor: [{ value: this.action.buttonBorderColor ?? '#3F52DD', disabled: true}, []],
+      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});
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/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>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
+      <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>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
+      <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>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
+      <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>
-      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+      <tb-icon matButtonIcon *ngIf="action.showIcon">{{ action.icon }}</tb-icon>
+      <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>
  }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/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,
-            buttonFillColor: descriptor.buttonFillColor,
-            buttonBorderColor: descriptor.buttonBorderColor,
-            customButtonStyle: descriptor.customButtonStyle,
+            customButtonStyle: this.headerButtonStyle(
+              descriptor.buttonType,
+              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];
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/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>;
 }
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/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;