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

6371:dashboard_layouts_width_sizing

Browse Source
This commit is contained in:
Dmitriymush 2022-04-05 13:56:44 +03:00
parent 9a83a4ae47
commit dae8704c8d
13 changed files with 347 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/core/services/dashboard-utils.service.ts
View File

@ -287,12 +287,12 @@ export class DashboardUtilsService {
let addedCount = 0;
let removedCount = 0;
for (const l of Object.keys(state.layouts)) {
if (!newLayouts[l]) {
if (!newLayouts[l] && l !== 'layoutDimension') {
removedCount++;
}
}
for (const l of Object.keys(newLayouts) ) {
if (!state.layouts[l]) {
if (!state.layouts[l] && l !== 'layoutDimension') {
addedCount++;
}
}
@ -301,20 +301,24 @@ export class DashboardUtilsService {
let newColumns;
if (addedCount) {
for (const l of Object.keys(state.layouts)) {
if(l !== 'layoutDimension') {
newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
if (newColumns > 0) {
state.layouts[l].gridSettings.columns = newColumns;
}
}
}
}
if (removedCount) {
for (const l of Object.keys(state.layouts)) {
if(l !== 'layoutDimension') {
newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
if (newColumns > 0) {
state.layouts[l].gridSettings.columns = newColumns;
}
}
}
}
this.removeUnusedWidgets(dashboard);
}
@ -335,6 +339,7 @@ export class DashboardUtilsService {
if (state) {
const result: DashboardLayoutsInfo = {};
for (const l of Object.keys(state.layouts)) {
if(l !== 'layoutDimension') {
const layout: DashboardLayout = state.layouts[l];
if (layout) {
result[l] = {
@ -349,6 +354,7 @@ export class DashboardUtilsService {
result[l].gridSettings = layout.gridSettings;
}
}
}
return result;
} else {
return null;

33
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

@ -266,7 +266,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
ctrl: null,
dashboardCtrl: this
}
}
},
layoutDimension: null
};
addWidgetFabButtons: FooterFabButtons = {
@ -654,7 +655,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
return '100%';
} else {
return this.layouts.right.show && !this.isMobile ? '50%' : '100%';
return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%';
}
}
@ -670,7 +671,29 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') {
return '100%';
} else {
return this.isMobile ? '100%' : '50%';
return this.isMobile ? '100%' : this.calculateWidth('right');
}
}
private calculateWidth(layout: string): string {
const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension;
if (layoutDimension) {
if (layoutDimension.type === 'percentage') {
if(layout === 'right') {
return (100 - layoutDimension.leftWidthPercentage) + '%';
} else {
return layoutDimension.leftWidthPercentage + '%';
}
} else {
if (layoutDimension.fixedLayout === layout) {
return layoutDimension.fixedWidth + 'px';
} else {
const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
return layoutWidth + 'px';
}
}
} else {
return '50%';
}
}
@ -887,6 +910,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
for (const l of Object.keys(this.layouts)) {
const layout: DashboardPageLayout = this.layouts[l];
if(l !== 'layoutDimension') {
if (layoutsData[l]) {
layout.show = true;
const layoutInfo: DashboardLayoutInfo = layoutsData[l];
@ -897,6 +921,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
}
}
private updateLayout(layout: DashboardPageLayout, layoutInfo: DashboardLayoutInfo) {
if (layoutInfo.gridSettings) {
@ -942,6 +967,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
private resetHighlight() {
for (const l of Object.keys(this.layouts)) {
if(l !== 'layoutDimension' ) {
if (this.layouts[l].layoutCtx) {
if (this.layouts[l].layoutCtx.ctrl) {
this.layouts[l].layoutCtx.ctrl.resetHighlight();
@ -949,6 +975,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
}
}
private entityAliasesUpdated() {
this.dashboardCtx.aliasController.updateEntityAliases(this.dashboard.configuration.entityAliases);

10
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
View File

@ -14,7 +14,13 @@
/// limitations under the License.
///
import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models';
import {
Dashboard,
DashboardLayoutId,
GridSettings,
LayoutDimension,
WidgetLayouts
} from '@app/shared/models/dashboard.models';
import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
import { Timewindow } from '@shared/models/time/time.models';
import { IAliasController, IStateController } from '@core/api/widget-api.models';
@ -68,7 +74,7 @@ export interface DashboardPageLayout {
layoutCtx: DashboardPageLayoutContext;
}
export declare type DashboardPageLayouts = {[key in DashboardLayoutId]: DashboardPageLayout};
export declare type DashboardPageLayouts = {[key in DashboardLayoutId | 'layoutDimension']: DashboardPageLayout & LayoutDimension};
export class LayoutWidgetsArray implements Iterable<Widget> {

2
ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
View File

@ -34,7 +34,7 @@
<button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget"
(click)="addWidget($event)">
<mat-icon class="tb-mat-96">add</mat-icon>
{{ 'dashboard.add-widget' | translate }}
<span>{{ 'dashboard.add-widget' | translate }}</span>
</button>
</section>
<tb-dashboard #dashboard [dashboardStyle]="dashboardStyle"

9
ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss
View File

@ -16,8 +16,15 @@
:host {
button.tb-add-new-widget {
padding-right: 12px;
font-size: 24px;
font-size: 20px;
border-style: dashed;
border-width: 2px;
::ng-deep .mat-button-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
}

11
ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
View File

@ -22,3 +22,14 @@ export interface ILayoutController {
pasteWidget($event: MouseEvent);
pasteWidgetReference($event: MouseEvent);
}
export enum LayoutWidthType {
PERCENTAGE = "percentage",
FIXED = "fixed"
}
export enum LaouytType {
MAIN = "main",
RIGHT = "right",
LEFT = "left"
}

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

@ -27,30 +27,127 @@
</mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div mat-dialog-content>
<div mat-dialog-content style="min-width: 300px;">
<fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-checkbox fxFlex formControlName="main">
{{ 'layout.main' | translate }}
{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }}
</mat-checkbox>
<mat-checkbox fxFlex formControlName="right">
{{ 'layout.right' | translate }}
</mat-checkbox>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
<button fxFlex
type="button" mat-raised-button color="primary"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('main')">
<span translate>layout.main</span>
(click)="openLayoutSettings('main')"
[ngStyle]="buttonStyle('main')">
<span >{{ (layoutsFormGroup.value.right ? 'layout.left' :'layout.main') | translate }}</span>
</button>
<button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
type="button" mat-raised-button color="primary"
type="button"
mat-raised-button
color="primary"
class="tb-layout-button"
(click)="openLayoutSettings('right')">
<span translate>layout.right</span>
(click)="openLayoutSettings('right')"
[ngStyle]="buttonStyle('right')">
<span >{{ 'layout.right' | translate }}</span>
</button>
</div>
<div fxLayout="column"
fxLayoutAlign="start center"
fxLayoutGap="8px"
[fxShow]="layoutsFormGroup.get('right').value">
<mat-button-toggle-group aria-label="Select width value type"
formControlName="type"
style="width: 100%;">
<mat-button-toggle style="width: 50%;" value="percentage">
{{ 'layout.percentage-width' | translate }}
</mat-button-toggle>
<mat-button-toggle style="width: 50%;" value="fixed">
{{ 'layout.fixed-width' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
<div [fxShow]="layoutsFormGroup.get('type').value === 'percentage'">
<div
fxLayoutAlign="start center"
fxLayoutGap="8px"
style="width: 100%;">
<mat-slider min="10"
step="1"
style="width: 100%;"
max="90"
(input)="sliderChange($event)"
formControlName="leftWidthPercentage"
thumbLabel
[displayWith]="formatSliderTooltipLabel"
></mat-slider>
</div>
<div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
<mat-form-field class="mat-block">
<mat-label>{{ 'layout.left-width' | translate }}</mat-label>
<input matInput
[value]="layoutValue('main')"
(input)="layoutValueChange($event, 'main')"
type="number"
step="any"
min="10"
max="90">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label>{{ 'layout.right-width' | translate }}</mat-label>
<input matInput
[value]="layoutValue('right')"
(input)="layoutValueChange($event, 'right')"
type="number"
step="any"
min="10"
max="90">
</mat-form-field>
</div>
<mat-hint class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90 } }}</mat-hint>
</div>
</div>
<div [fxShow]="layoutsFormGroup.get('type').value === 'fixed'"
style="width: 100%;"
fxLayout="column"
fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
<label>{{ 'layout.pick-fixed-side' | translate }}</label>
<mat-radio-group aria-label="Select side"
formControlName="fixedLayout"
fxLayout="row"
fxLayoutAlign="start center"
fxLayoutGap="8px">
<mat-radio-button value="main">
{{ 'layout.left' | translate }}
</mat-radio-button>
<mat-radio-button value="right">
{{ 'layout.right' | translate }}
</mat-radio-button>
</mat-radio-group>
</div>
<div fxLayout="column" style="width: 100%; min-width: 368px;">
<mat-form-field class="mat-block" style="width: 100%;">
<mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
<input matInput
formControlName="fixedWidth"
type="number"
step="any"
min="150"
max="1700"
required>
</mat-form-field>
<mat-hint class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700 } }}</mat-hint>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">

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

@ -0,0 +1,33 @@
/**
* Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
:host {
::ng-deep .mat-slider-wrapper {
.mat-slider-thumb-container {
.mat-slider-thumb-label {
width: 35px;
height: 35px;
}
}
}
.tb-layout-fixed-container {
width: 100%;
min-width: 368px;
padding: 8px 8px 8px 0;
min-height: 48px;
}
}

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

@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { DialogComponent } from '@app/shared/components/dialog.component';
import { UtilsService } from '@core/services/utils.service';
@ -31,6 +31,8 @@ import {
DashboardSettingsDialogComponent,
DashboardSettingsDialogData
} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
import { MatSliderChange } from "@angular/material/slider";
import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
export interface ManageDashboardLayoutsDialogData {
layouts: DashboardStateLayouts;
@ -40,7 +42,7 @@ export interface ManageDashboardLayoutsDialogData {
selector: 'tb-manage-dashboard-layouts-dialog',
templateUrl: './manage-dashboard-layouts-dialog.component.html',
providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardLayoutsDialogComponent}],
styleUrls: ['../../../components/dashboard/layout-button.scss']
styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss']
})
export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
implements OnInit, ErrorStateMatcher {
@ -67,14 +69,29 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layoutsFormGroup = this.fb.group({
main: [{value: isDefined(this.layouts.main), disabled: true}, []],
right: [isDefined(this.layouts.right), []],
leftWidthPercentage: [50, [Validators.min(10), Validators.max(90)]],
type: [LayoutWidthType.PERCENTAGE, []],
fixedWidth: [150, [Validators.min(150), Validators.max(1700)]],
fixedLayout: [LaouytType.MAIN, []]
}
);
for (const l of Object.keys(this.layoutsFormGroup.controls)) {
const control = this.layoutsFormGroup.controls[l];
if (!this.layouts[l]) {
this.layouts[l] = this.dashboardUtils.createDefaultLayoutData();
if(this.layouts.layoutDimension) {
this.layoutsFormGroup.get('type').setValue(this.layouts.layoutDimension.type);
if(this.layouts.layoutDimension.type === LayoutWidthType.FIXED) {
this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.layoutDimension.fixedWidth);
this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.layoutDimension.fixedLayout);
} else {
this.layoutsFormGroup.get('leftWidthPercentage').setValue(this.layouts.layoutDimension.leftWidthPercentage);
}
}
if(!this.layouts[LaouytType.MAIN]) {
this.layouts[LaouytType.MAIN] = this.dashboardUtils.createDefaultLayoutData();
}
if(!this.layouts[LaouytType.RIGHT]) {
this.layouts[LaouytType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
}
}
ngOnInit(): void {
@ -116,6 +133,66 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
delete this.layouts[l];
}
}
if(this.layoutsFormGroup.value.right) {
const formValues = this.layoutsFormGroup.value;
const widthType = formValues.type;
(this.layouts.layoutDimension as any) = {
type: widthType
}
if(widthType === LayoutWidthType.PERCENTAGE) {
this.layouts.layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
} else {
this.layouts.layoutDimension.fixedWidth = formValues.fixedWidth;
this.layouts.layoutDimension.fixedLayout = formValues.fixedLayout;
}
}
this.dialogRef.close(this.layouts);
}
buttonStyle(layout: DashboardLayoutId): { maxWidth: string } {
if(this.layoutsFormGroup.value.type && this.layoutsFormGroup.value.right) {
if (this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
if (layout === LaouytType.MAIN) {
return { maxWidth: this.layoutsFormGroup.value.leftWidthPercentage + "%" };
} else {
return { maxWidth: (100 - this.layoutsFormGroup.value.leftWidthPercentage) + "%" };
}
} else {
return { maxWidth: '100%' };
}
}
}
layoutValue(layout:DashboardLayoutId): number {
if(layout === LaouytType.MAIN) {
return this.layoutsFormGroup.value.leftWidthPercentage;
} else {
return (100 - this.layoutsFormGroup.value.leftWidthPercentage);
}
}
layoutValueChange($event: Event, layout:DashboardLayoutId): void {
let widthValue: number;
if(Number(($event.target as any).value) > 90) {
widthValue = 90;
} else if (Number(($event.target as any).value) < 10) {
widthValue = 10;
} else {
widthValue = Number(($event.target as any).value);
}
if(layout === LaouytType.MAIN) {
this.layoutsFormGroup.get('leftWidthPercentage').setValue(widthValue);
} else {
this.layoutsFormGroup.get('leftWidthPercentage').setValue(100 - widthValue);
}
this.layoutsFormGroup.markAsDirty();
}
formatSliderTooltipLabel(value: number):string {
return `${value}|${100 - value}`;
}
sliderChange($event: MatSliderChange) {
this.layoutsFormGroup.get('leftWidthPercentage').setValue($event.value);
}
}

4
ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
View File

@ -17,7 +17,9 @@
button.tb-layout-button {
width: 100%;
height: 100%;
padding: 40px 20px;
padding: 40px 10px;
transition-duration: 0.5s;
transition-property: max-width;
}
&::ng-deep {

4
ui-ngx/src/app/modules/home/components/home-components.module.ts
View File

@ -17,6 +17,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@app/shared/shared.module';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { AddEntityDialogComponent } from '@home/components/entity/add-entity-dialog.component';
import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
import { DetailsPanelComponent } from '@home/components/details-panel.component';
@ -277,7 +278,8 @@ import { EntityDetailsPageComponent } from '@home/components/entity/entity-detai
SnmpDeviceProfileTransportModule,
StatesControllerModule,
DeviceCredentialsModule,
DeviceProfileCommonModule
DeviceProfileCommonModule,
MatButtonToggleModule
],
exports: [
EntitiesTableComponent,

11
ui-ngx/src/app/shared/models/dashboard.models.ts
View File

@ -69,9 +69,18 @@ export interface DashboardLayoutInfo {
gridSettings?: GridSettings;
}
export interface LayoutDimension {
type?: LayoutType,
fixedWidth?: number,
fixedLayout?: DashboardLayoutId,
leftWidthPercentage?: number
}
export declare type DashboardLayoutId = 'main' | 'right';
export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout};
export declare type LayoutType = 'percentage' | 'fixed';
export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension };
export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo};

10
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -2344,7 +2344,15 @@
"color": "Color",
"main": "Main",
"right": "Right",
"select": "Select target layout"
"left": "Left",
"select": "Select target layout",
"percentage-width": "Percentage width (%)",
"fixed-width": "Fixed width (px)",
"left-width": "Left width (%)",
"right-width": "Right width (%)",
"pick-fixed-side": "Fixed side: ",
"layout-fixed-width": "Fixed width (px)",
"layout-min-max": "Width should not be lower then {{min}} and higher then {{max}}"
},
"legend": {
"direction": "Legend direction",