dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring widget header action button

Browse Source
This commit is contained in:
Artem Dzhereleiko 2025-03-18 07:51:08 +02:00
parent 60e188a47b
commit c8e2564041
5 changed files with 78 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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();
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});

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

@ -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>
}
}

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

@ -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];

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

@ -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>;
}

2
ui-ngx/src/app/shared/models/widget.models.ts
View File

@ -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;