tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: layout preview improvements

pull/6374/head
Dmitriymush 4 years ago
parent
eb70aa43b3
commit
a840615564
3 changed files with 68 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
  2. 18
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
  3. 26
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

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

Write Preview
Loading…
Cancel
Save