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

UI: layout preview improvements

Browse Source
This commit is contained in:
Dmitriymush 2022-08-19 13:57:49 +03:00
parent eb70aa43b3
commit a840615564
3 changed files with 68 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,7 +56,8 @@
matTooltipPosition="above"
(click)="openLayoutSettings('main')"
class="tb-layout-preview-element"
aria-label="Layout settings">
aria-label="Layout settings"
[ngClass]="layoutButtonTextAndClass('main', false)">
<mat-icon>settings</mat-icon>
</button>
<button fxFlex
@ -64,14 +65,15 @@
mat-raised-button
color="primary"
class="tb-layout-button"
[matTooltip]="layoutButtonTooltip('main', true)"
[matTooltip]="layoutButtonTextAndClass('main', true)"
matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('main')"
[ngClass]="layoutButtonTooltip('main', false)"
[ngClass]="layoutButtonTextAndClass('main', false)"
[ngStyle]="layoutsFormGroup.get('right').value ?
{'border-radius': '5px 0 0 5px;'} :
{'border-radius': '5px 5px 5px 5px;'}">
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
<span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}</span>
</button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')">
<input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
@ -98,7 +100,8 @@
matTooltipPosition="above"
(click)="openLayoutSettings('right')"
class="tb-layout-preview-element"
aria-label="Layout settings">
aria-label="Layout settings"
[ngClass]="layoutButtonTextAndClass('right', false)">
<mat-icon>settings</mat-icon>
</button>
<button fxFlex
@ -106,12 +109,13 @@
mat-raised-button
color="primary"
class="tb-layout-button"
[matTooltip]="layoutButtonTooltip('right', true)"
[matTooltip]="layoutButtonTextAndClass('right', true)"
matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('right')"
[ngClass]="layoutButtonTooltip('right', false)"
[ngClass]="layoutButtonTextAndClass('right', false)"
style="border-radius: 0 5px 5px 0;">
<span >{{ 'layout.right' | translate }}</span>
<span>{{ 'layout.right' | translate }}</span>
</button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')">
<input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
@ -133,30 +137,28 @@
</div>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 100%">
<div style="width: 80%">
<mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
min="10"
step="1"
max="90"
style="width: 100%;"
formControlName="sliderPercentage"
thumbLabel
[displayWith]="formatSliderTooltipLabel.bind(this)">
</mat-slider>
<mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
min="150"
step="1"
max="1700"
style="width: 100%;"
formControlName="sliderFixed"
thumbLabel
[displayWith]="formatSliderTooltipLabel.bind(this)">
</mat-slider>
<div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group">
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '0 %' : '150px'}}</label>
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '100 %' : '1700px'}}</label>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 80%">
<mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
min="10"
step="1"
max="90"
style="width: 100%;"
formControlName="sliderPercentage"
thumbLabel
[displayWith]="formatSliderTooltipLabel.bind(this)">
</mat-slider>
<mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
min="150"
step="1"
max="1700"
style="width: 100%;"
formControlName="sliderFixed"
thumbLabel
[displayWith]="formatSliderTooltipLabel.bind(this)">
</mat-slider>
<div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '10 %' : '150px'}}</label>
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '90 %' : '1700px'}}</label>
</div>
</div>
</div>

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

@ -37,11 +37,15 @@
button.tb-fixed-layout-button {
background-color: transparent;
color: black;
color: #000000;
cursor: pointer;
.mat-icon {
color: rgba(0, 0, 0, 0.38);
}
&:hover {
background-color: lightgrey;
background-color: #d3d3d3;
}
}
@ -64,7 +68,7 @@
width: 20px;
height: 20px;
line-height: 20px;
color: rgba(0, 0, 0, 0.38);
color: rgba(255, 255, 255, 0.76);
&:hover {
transform: rotate(180deg);
@ -94,7 +98,7 @@
color: white;
input {
border: 1px solid lightslategray;
border: 1px solid #778899;
background-color: transparent;
color: white;
border-radius: 4px;
@ -105,7 +109,7 @@
font-size: 14px;
&:invalid {
outline: 2px solid red;
outline: 2px solid #b71c1c;
border: 1px solid transparent;
background-color: rgba(255, 5, 5, 0.2);
}
@ -169,4 +173,8 @@
width: 160px;
text-align: center;
}
.tb-layout-button-tooltip {
margin: 30px 40px -35px -50px;
}
}

26
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, Inject, SkipSelf, ViewChild } from '@angular/core';
import { Component, ElementRef, 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';
@ -77,7 +77,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private utils: UtilsService,
private dashboardUtils: DashboardUtilsService,
private translate: TranslateService,
private dialog: MatDialog) {
private dialog: MatDialog,
private elementRef: ElementRef) {
super(store, router, dialogRef);
this.layouts = this.data.layouts;
@ -281,6 +282,21 @@ 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) {
this.layoutsFormGroup.get('fixedLayout').setValue(layout);
}
@ -321,14 +337,14 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
}
}
layoutButtonTooltip(side: string, isText: boolean): string {
layoutButtonTextAndClass(side: string, isText: boolean): string {
const formValues = this.layoutsFormGroup.value;
if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
if (isText) {
if (side === 'main') {
return this.translate.instant('layout.right-side');
} else {
return this.translate.instant('layout.left-side');
} else {
return this.translate.instant('layout.right-side');
}
} else {
return 'tb-fixed-layout-button';