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

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

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
[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>

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

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

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;
inset: 12px;
}
.tb-single-switch-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
> div.tb-single-switch-title-panel {
position: absolute;
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 = '';
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();
}