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

UI: Improve command button widget loading style. Improve single switch widget disabled state style.

Browse Source
This commit is contained in:
Igor Kulikov 2024-02-06 10:18:54 +02:00
parent fd8f6c2763
commit 495e34c337
6 changed files with 27 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

@ -1049,26 +1049,20 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
this.onAddWidgetClosed(); this.onAddWidgetClosed();
this.isAddingWidgetClosed = true; this.isAddingWidgetClosed = true;
} }
if (this.widgetEditMode) { this.resetHighlight();
if (revert) { if (revert) {
this.dashboard = this.prevDashboard; this.dashboard = this.prevDashboard;
this.dashboardLogoCache = undefined; this.dashboardLogoCache = undefined;
this.dashboardConfiguration = this.dashboard.configuration; this.dashboardConfiguration = this.dashboard.configuration;
} if (!this.widgetEditMode) {
} else {
this.resetHighlight();
if (revert) {
this.dashboard = this.prevDashboard;
this.dashboardLogoCache = undefined;
this.dashboardConfiguration = this.dashboard.configuration;
this.dashboardCtx.dashboardTimewindow = this.dashboardConfiguration.timewindow; this.dashboardCtx.dashboardTimewindow = this.dashboardConfiguration.timewindow;
this.updateDashboardCss(); this.updateDashboardCss();
this.entityAliasesUpdated(); this.entityAliasesUpdated();
this.filtersUpdated(); this.filtersUpdated();
this.updateLayouts(); this.updateLayouts();
} else {
this.dashboard.configuration.timewindow = this.dashboardCtx.dashboardTimewindow;
} }
} else if (!this.widgetEditMode) {
this.dashboard.configuration.timewindow = this.dashboardCtx.dashboardTimewindow;
} }
} }
} }

6
ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.scss
View File

@ -13,6 +13,12 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
.mdc-linear-progress.tb-action-widget-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.tb-action-widget-error-container { .tb-action-widget-error-container {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

3
ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html
View File

@ -22,10 +22,11 @@
<tb-widget-button <tb-widget-button
[appearance]="appearance" [appearance]="appearance"
[borderRadius]="borderRadius" [borderRadius]="borderRadius"
[disabled]="disabled" [disabled]="disabled || (loading$ | async)"
[ctx]="ctx" [ctx]="ctx"
(clicked)="onClick($event)"> (clicked)="onClick($event)">
</tb-widget-button> </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 *ngIf="error" class="tb-action-widget-error-container">
<div class="tb-action-widget-error-panel"> <div class="tb-action-widget-error-panel">
<div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div> <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>

14
ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
View File

@ -22,17 +22,21 @@
</div> </div>
<div #singleSwitchContent class="tb-single-switch-content" [class]="this.layout" [class.no-label]="!showIcon && !showLabel" [class.auto-scale]="autoScale"> <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"> <div *ngIf="showIcon || showLabel" #singleSwitchLabelRow class="tb-single-switch-label-row">
<tb-icon *ngIf="showIcon" [style]="iconStyle">{{ icon }}</tb-icon> <tb-icon *ngIf="showIcon" [style]="iconStyle"
<div *ngIf="showLabel" class="tb-single-switch-label" [style]="labelStyle">{{ label$ | async }}</div> [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>
<div #singleSwitchToggleRow class="tb-single-switch-slide-toggle-row"> <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 class="tb-single-switch-toggle" [disabled]="disabled || (loading$ | async)" [(ngModel)]="value" (click)="!disabled && onToggleChange($event)">
</mat-slide-toggle> </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>
</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 *ngIf="error" class="tb-action-widget-error-container">
<div class="tb-action-widget-error-panel"> <div class="tb-action-widget-error-panel">
<div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div> <div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div>

6
ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.scss
View File

@ -39,12 +39,6 @@ $switchColorDisabled: var(--tb-single-switch-color-disabled, #D5D7E5);
position: absolute; position: absolute;
inset: 12px; inset: 12px;
} }
.tb-single-switch-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
> div.tb-single-switch-title-panel { > div.tb-single-switch-title-panel {
position: absolute; position: absolute;
top: 12px; top: 12px;

33
ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
View File

@ -97,6 +97,8 @@ export class SingleSwitchWidgetComponent extends
offLabel = ''; offLabel = '';
offLabelStyle: ComponentStyle = {}; offLabelStyle: ComponentStyle = {};
disabledColor = 'rgba(0, 0, 0, 0.38)';
autoScale = false; autoScale = false;
private panelResize$: ResizeObserver; private panelResize$: ResizeObserver;
@ -129,22 +131,18 @@ export class SingleSwitchWidgetComponent extends
this.showLabel = this.settings.showLabel; this.showLabel = this.settings.showLabel;
this.label$ = this.ctx.registerLabelPattern(this.settings.label, this.label$); this.label$ = this.ctx.registerLabelPattern(this.settings.label, this.label$);
this.labelStyle = textStyle(this.settings.labelFont); this.labelStyle = textStyle(this.settings.labelFont);
this.labelStyle.color = this.settings.labelColor;
this.showIcon = this.settings.showIcon; this.showIcon = this.settings.showIcon;
this.icon = this.settings.icon; this.icon = this.settings.icon;
this.iconStyle = iconStyle(this.settings.iconSize, this.settings.iconSizeUnit ); this.iconStyle = iconStyle(this.settings.iconSize, this.settings.iconSizeUnit );
this.iconStyle.color = this.settings.iconColor;
this.showOnLabel = this.settings.showOnLabel; this.showOnLabel = this.settings.showOnLabel;
this.onLabel = this.settings.onLabel; this.onLabel = this.settings.onLabel;
this.onLabelStyle = textStyle(this.settings.onLabelFont); this.onLabelStyle = textStyle(this.settings.onLabelFont);
this.onLabelStyle.color = this.settings.onLabelColor;
this.showOffLabel = this.settings.showOffLabel; this.showOffLabel = this.settings.showOffLabel;
this.offLabel = this.settings.offLabel; this.offLabel = this.settings.offLabel;
this.offLabelStyle = textStyle(this.settings.offLabelFont); this.offLabelStyle = textStyle(this.settings.offLabelFont);
this.offLabelStyle.color = this.settings.offLabelColor;
const switchVariablesCss = `.tb-single-switch-panel {\n`+ const switchVariablesCss = `.tb-single-switch-panel {\n`+
`--tb-single-switch-tumbler-color-on: ${this.settings.tumblerColorOn};\n`+ `--tb-single-switch-tumbler-color-on: ${this.settings.tumblerColorOn};\n`+
`--tb-single-switch-tumbler-color-off: ${this.settings.tumblerColorOff};\n`+ `--tb-single-switch-tumbler-color-off: ${this.settings.tumblerColorOff};\n`+
@ -229,33 +227,6 @@ export class SingleSwitchWidgetComponent extends
private onDisabled(value: boolean): void { private onDisabled(value: boolean): void {
this.disabled = !!value; 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(); this.cd.markForCheck();
} }