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
color="primary"
class="tb-layout-button"
[matTooltip]="layoutButtonText('main')"
matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(mouseover)="mainLayoutTooltip.show()"
(mouseleave)="mainLayoutTooltip.hide()"
(click)="setFixedLayout('main')"
[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>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
<input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
@ -106,12 +109,15 @@
mat-raised-button
color="primary"
class="tb-layout-button tb-layout-button-right"
[matTooltip]="layoutButtonText('right')"
matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(mouseover)="rightLayoutTooltip.show()"
(mouseleave)="rightLayoutTooltip.hide()"
(click)="setFixedLayout('right')"
[ngClass]="layoutButtonClass('right')">
<span>{{ 'layout.right' | translate }}</span>
<span [matTooltip]="layoutButtonText('right')"
#rightLayoutTooltip="matTooltip"
matTooltipPosition="above">
{{ 'layout.right' | translate }}
</span>
</button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
<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;
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.
///
import { Component, ElementRef, Inject, SkipSelf, ViewChild } from '@angular/core';
import { Component, Inject, SkipSelf, ViewChild } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
@ -85,8 +85,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private utils: UtilsService,
private dashboardUtils: DashboardUtilsService,
private translate: TranslateService,
private dialog: MatDialog,
private elementRef: ElementRef) {
private dialog: MatDialog) {
super(store, router, dialogRef);
this.layouts = this.data.layouts;
@ -96,10 +95,13 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
right: [isDefined(this.layouts.right)],
sliderPercentage: [50],
sliderFixed: [this.layoutFixedSize.MIN],
leftWidthPercentage: [50, [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]],
leftWidthPercentage: [50,
[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],
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', []]
}
);
@ -293,22 +295,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
}
setFixedLayout(layout: string): void {
const layoutButtons = this.elementRef.nativeElement.querySelectorAll('.tb-layout-button');
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) {
if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED && this.layoutsFormGroup.get('right').value) {
this.layoutsFormGroup.get('fixedLayout').setValue(layout);
}
}