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" matTooltipPosition="above"
(click)="openLayoutSettings('main')" (click)="openLayoutSettings('main')"
class="tb-layout-preview-element" class="tb-layout-preview-element"
aria-label="Layout settings"> aria-label="Layout settings"
[ngClass]="layoutButtonTextAndClass('main', false)">
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>
<button fxFlex <button fxFlex
@ -64,14 +65,15 @@
mat-raised-button mat-raised-button
color="primary" color="primary"
class="tb-layout-button" class="tb-layout-button"
[matTooltip]="layoutButtonTooltip('main', true)" [matTooltip]="layoutButtonTextAndClass('main', true)"
matTooltipPosition="above" matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('main')" (click)="setFixedLayout('main')"
[ngClass]="layoutButtonTooltip('main', false)" [ngClass]="layoutButtonTextAndClass('main', false)"
[ngStyle]="layoutsFormGroup.get('right').value ? [ngStyle]="layoutsFormGroup.get('right').value ?
{'border-radius': '5px 0 0 5px;'} : {'border-radius': '5px 0 0 5px;'} :
{'border-radius': '5px 5px 5px 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> </button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')"> <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')">
<input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED" <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
@ -98,7 +100,8 @@
matTooltipPosition="above" matTooltipPosition="above"
(click)="openLayoutSettings('right')" (click)="openLayoutSettings('right')"
class="tb-layout-preview-element" class="tb-layout-preview-element"
aria-label="Layout settings"> aria-label="Layout settings"
[ngClass]="layoutButtonTextAndClass('right', false)">
<mat-icon>settings</mat-icon> <mat-icon>settings</mat-icon>
</button> </button>
<button fxFlex <button fxFlex
@ -106,12 +109,13 @@
mat-raised-button mat-raised-button
color="primary" color="primary"
class="tb-layout-button" class="tb-layout-button"
[matTooltip]="layoutButtonTooltip('right', true)" [matTooltip]="layoutButtonTextAndClass('right', true)"
matTooltipPosition="above" matTooltipPosition="above"
matTooltipClass="tb-layout-button-tooltip"
(click)="setFixedLayout('right')" (click)="setFixedLayout('right')"
[ngClass]="layoutButtonTooltip('right', false)" [ngClass]="layoutButtonTextAndClass('right', false)"
style="border-radius: 0 5px 5px 0;"> style="border-radius: 0 5px 5px 0;">
<span >{{ 'layout.right' | translate }}</span> <span>{{ 'layout.right' | translate }}</span>
</button> </button>
<div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')"> <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')">
<input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED" <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
@ -133,30 +137,28 @@
</div> </div>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 100%"> <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 80%">
<div style="width: 80%"> <mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
<mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE" min="10"
min="10" step="1"
step="1" max="90"
max="90" style="width: 100%;"
style="width: 100%;" formControlName="sliderPercentage"
formControlName="sliderPercentage" thumbLabel
thumbLabel [displayWith]="formatSliderTooltipLabel.bind(this)">
[displayWith]="formatSliderTooltipLabel.bind(this)"> </mat-slider>
</mat-slider> <mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
<mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE" min="150"
min="150" step="1"
step="1" max="1700"
max="1700" style="width: 100%;"
style="width: 100%;" formControlName="sliderFixed"
formControlName="sliderFixed" thumbLabel
thumbLabel [displayWith]="formatSliderTooltipLabel.bind(this)">
[displayWith]="formatSliderTooltipLabel.bind(this)"> </mat-slider>
</mat-slider> <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
<div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group"> <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '10 %' : '150px'}}</label>
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '0 %' : '150px'}}</label> <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '90 %' : '1700px'}}</label>
<label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '100 %' : '1700px'}}</label>
</div>
</div> </div>
</div> </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 { button.tb-fixed-layout-button {
background-color: transparent; background-color: transparent;
color: black; color: #000000;
cursor: pointer; cursor: pointer;
.mat-icon {
color: rgba(0, 0, 0, 0.38);
}
&:hover { &:hover {
background-color: lightgrey; background-color: #d3d3d3;
} }
} }
@ -64,7 +68,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
color: rgba(0, 0, 0, 0.38); color: rgba(255, 255, 255, 0.76);
&:hover { &:hover {
transform: rotate(180deg); transform: rotate(180deg);
@ -94,7 +98,7 @@
color: white; color: white;
input { input {
border: 1px solid lightslategray; border: 1px solid #778899;
background-color: transparent; background-color: transparent;
color: white; color: white;
border-radius: 4px; border-radius: 4px;
@ -105,7 +109,7 @@
font-size: 14px; font-size: 14px;
&:invalid { &:invalid {
outline: 2px solid red; outline: 2px solid #b71c1c;
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(255, 5, 5, 0.2); background-color: rgba(255, 5, 5, 0.2);
} }
@ -169,4 +173,8 @@
width: 160px; width: 160px;
text-align: center; 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. /// 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 { 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';
@ -77,7 +77,8 @@ 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;
@ -281,6 +282,21 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
} }
setFixedLayout(layout: string): void { 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('fixedLayout').setValue(layout); 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; const formValues = this.layoutsFormGroup.value;
if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) { if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
if (isText) { if (isText) {
if (side === 'main') { if (side === 'main') {
return this.translate.instant('layout.right-side');
} else {
return this.translate.instant('layout.left-side'); return this.translate.instant('layout.left-side');
} else {
return this.translate.instant('layout.right-side');
} }
} else { } else {
return 'tb-fixed-layout-button'; return 'tb-fixed-layout-button';