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

UI: Fixed dashboard layout function setFixedLayout

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-11-09 17:56:38 +02:00
parent 0d626c5c88
commit 385c3acaee
3 changed files with 23 additions and 34 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/layout/manage-dashboard-layouts-dialog.component.html
View File

@ -65,12 +65,15 @@
mat-raised-button mat-raised-button
color="primary" color="primary"
class="tb-layout-button" class="tb-layout-button"
[matTooltip]="layoutButtonText('main')" (mouseover)="mainLayoutTooltip.show()"
matTooltipPosition="above" (mouseleave)="mainLayoutTooltip.hide()"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('main')" (click)="setFixedLayout('main')"
[ngClass]="layoutButtonClass('main', true)"> [ngClass]="layoutButtonClass('main', true)">
<span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span> <span [matTooltip]="layoutButtonText('main')"
#mainLayoutTooltip="matTooltip"
matTooltipPosition="above">
{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}
</span>
</button> </button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')"> <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
<input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED" <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
@ -106,12 +109,15 @@
mat-raised-button mat-raised-button
color="primary" color="primary"
class="tb-layout-button tb-layout-button-right" class="tb-layout-button tb-layout-button-right"
[matTooltip]="layoutButtonText('right')" (mouseover)="rightLayoutTooltip.show()"
matTooltipPosition="above" (mouseleave)="rightLayoutTooltip.hide()"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('right')" (click)="setFixedLayout('right')"
[ngClass]="layoutButtonClass('right')"> [ngClass]="layoutButtonClass('right')">
<span>{{ 'layout.right' | translate }}</span> <span [matTooltip]="layoutButtonText('right')"
#rightLayoutTooltip="matTooltip"
matTooltipPosition="above">
{{ 'layout.right' | translate }}
</span>
</button> </button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')"> <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
<input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED" <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"

4
ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
View File

@ -178,8 +178,4 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
width: 160px; width: 160px;
text-align: center; text-align: center;
} }
.tb-layout-button-tooltip {
margin: 30px 40px -35px -50px;
}
} }

31
ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, ElementRef, Inject, SkipSelf, ViewChild } from '@angular/core'; import { Component, Inject, SkipSelf, ViewChild } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core'; import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@ -85,8 +85,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private utils: UtilsService, private utils: UtilsService,
private dashboardUtils: DashboardUtilsService, private dashboardUtils: DashboardUtilsService,
private translate: TranslateService, private translate: TranslateService,
private dialog: MatDialog, private dialog: MatDialog) {
private elementRef: ElementRef) {
super(store, router, dialogRef); super(store, router, dialogRef);
this.layouts = this.data.layouts; this.layouts = this.data.layouts;
@ -96,10 +95,13 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
right: [isDefined(this.layouts.right)], right: [isDefined(this.layouts.right)],
sliderPercentage: [50], sliderPercentage: [50],
sliderFixed: [this.layoutFixedSize.MIN], sliderFixed: [this.layoutFixedSize.MIN],
leftWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]], leftWidthPercentage: [50,
rightWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]], [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
rightWidthPercentage: [50,
[Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
type: [LayoutWidthType.PERCENTAGE], type: [LayoutWidthType.PERCENTAGE],
fixedWidth: [this.layoutFixedSize.MIN, [Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]], fixedWidth: [this.layoutFixedSize.MIN,
[Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]],
fixedLayout: ['main', []] fixedLayout: ['main', []]
} }
); );
@ -293,22 +295,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
} }
setFixedLayout(layout: string): void { setFixedLayout(layout: string): void {
const layoutButtons = this.elementRef.nativeElement.querySelectorAll('.tb-layout-button'); if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED && this.layoutsFormGroup.get('right').value) {
if (layoutButtons?.length) {
let elementToDisable: HTMLButtonElement;
if (layout === 'right') {
elementToDisable = layoutButtons[0];
} else {
elementToDisable = layoutButtons[1];
}
elementToDisable.disabled = true;
setTimeout(() => {
elementToDisable.disabled = false;
}, 250);
}
if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED) {
this.layoutsFormGroup.get('fixedLayout').setValue(layout); this.layoutsFormGroup.get('fixedLayout').setValue(layout);
} }
} }