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

UI: Improvement manage layout dialog style

pull/11430/head
Vladyslav_Prykhodko 2 years ago
parent
51dfba02f7
commit
fa388dd48d
3 changed files with 47 additions and 36 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. 6
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
  2. 1
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
  3. 76
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

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

@ -76,7 +76,7 @@
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="table-container" style="width: 700px">
<div class="table-container" style="width: 600px">
<table mat-table [dataSource]="dataSource">
<ng-container [matColumnDef]="'icon'">
<mat-header-cell *matHeaderCellDef [style]="{ minWidth: '48px', maxWidth: '48px', width: '48px', textAlign: 'center'}">
@ -158,7 +158,7 @@
<div>Add breakpoint</div>
<mat-form-field fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="new">
<mat-option *ngFor="let breakpoint of allowLayoutBreakpoints" [value]="breakpoint">
<mat-option *ngFor="let breakpoint of allowBreakpointIds" [value]="breakpoint">
{{ breakpoint }}
</mat-option>
</mat-select>
@ -168,7 +168,7 @@
<div>Copy from</div>
<mat-form-field fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="copyFrom">
<mat-option *ngFor="let breakpoint of selectedLayoutBreakpoints" [value]="breakpoint">
<mat-option *ngFor="let breakpoint of selectedBreakpointIds" [value]="breakpoint">
{{ breakpoint }}
</mat-option>
</mat-select>

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

@ -154,6 +154,7 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
padding: 8px;
border: 2px dashed rgba(0, 0, 0, 0.08);
border-radius: 10px;
min-height: 56px;
}
}

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

@ -76,7 +76,7 @@ export interface DashboardLayoutSettings {
export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
implements ErrorStateMatcher, OnDestroy {
@ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
@ViewChild('tooltip') tooltip: MatTooltip;
layoutsFormGroup: UntypedFormGroup;
addBreakpointFormGroup: UntypedFormGroup;
@ -110,8 +110,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
xl: 'xl'
};
allowLayoutBreakpoints = Object.keys(this.layoutBreakpoint);
selectedLayoutBreakpoints = ['default'];
allowBreakpointIds = Object.keys(this.layoutBreakpoint);
selectedBreakpointIds = ['default'];
constructor(protected store: Store<AppState>,
protected router: Router,
@ -122,7 +122,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private utils: UtilsService,
private dashboardUtils: DashboardUtilsService,
private translate: TranslateService,
private dialog: MatDialog) {
private dialog: MatDialog,) {
super(store, router, dialogRef);
this.layouts = this.data.layouts;
@ -208,28 +208,17 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
}
this.layoutBreakpoints.push({
icon: 'mdi:monitor',
name: 'Default',
layout: this.layouts.main,
breakpoint: 'default'
});
this.addLayoutConfiguration('default');
if (!this.isDividerLayout && this.layouts.main.breakpoints) {
for (const breakpoint of Object.keys(this.layouts.main.breakpoints)) {
this.layoutBreakpoints.push({
icon: 'mdi:monitor',
name: breakpoint,
layout: this.layouts.main.breakpoints[breakpoint],
descriptionSize: MediaBreakpoints[breakpoint],
breakpoint
});
this.selectedLayoutBreakpoints.push(breakpoint);
this.addLayoutConfiguration(breakpoint);
this.selectedBreakpointIds.push(breakpoint);
}
}
this.allowLayoutBreakpoints = Object.keys(this.layoutBreakpoint)
.filter((item) => !this.selectedLayoutBreakpoints.includes(item));
this.allowBreakpointIds = Object.keys(this.layoutBreakpoint)
.filter((item) => !this.selectedBreakpointIds.includes(item));
this.dataSource.loadData(this.layoutBreakpoints);
@ -270,6 +259,15 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false});
}
));
this.subscriptions.push(
this.layoutsFormGroup.get('layoutType').valueChanges
.subscribe(
() => {
this.dataSource = new DashboardLayoutDatasource();
this.dataSource.loadData(this.layoutBreakpoints);
}
));
}
ngOnDestroy(): void {
@ -450,12 +448,14 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
return this.layoutsFormGroup.get('layoutType').value === LayoutType.divider;
}
deleteBreakpoint(breakpoint: string): void {
delete this.layouts.main.breakpoints[breakpoint];
deleteBreakpoint(breakpointId: string): void {
delete this.layouts.main.breakpoints[breakpointId];
if (isEqual(this.layouts.main.breakpoints, {})) {
delete this.layouts.main.breakpoints;
}
this.layoutBreakpoints = this.layoutBreakpoints.filter((item) => item.breakpoint !== breakpoint);
this.layoutBreakpoints = this.layoutBreakpoints.filter((item) => item.breakpoint !== breakpointId);
this.allowBreakpointIds.push(breakpointId);
this.selectedBreakpointIds = this.selectedBreakpointIds.filter((item) => item !== breakpointId);
this.dataSource.loadData(this.layoutBreakpoints);
this.layoutsFormGroup.markAsDirty();
}
@ -464,7 +464,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.addBreakpointMode = !this.addBreakpointMode;
if (this.addBreakpointMode) {
this.addBreakpointFormGroup.reset({
new: this.allowLayoutBreakpoints[0],
new: this.allowBreakpointIds[0],
copyFrom: 'default'
});
}
@ -484,20 +484,30 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
gridSettings: deepClone(sourceLayout.gridSettings),
widgets: deepClone(sourceLayout.widgets),
};
this.selectedLayoutBreakpoints.push(newBreakpoint);
this.allowLayoutBreakpoints = this.allowLayoutBreakpoints.filter((item) => item !== newBreakpoint);
this.selectedBreakpointIds.push(newBreakpoint);
this.allowBreakpointIds = this.allowBreakpointIds.filter((item) => item !== newBreakpoint);
this.addLayoutConfiguration(newBreakpoint);
this.dataSource.loadData(this.layoutBreakpoints);
this.addBreakpointMode = false;
}
private addLayoutConfiguration(breakpointId: string) {
const layout = breakpointId === 'default' ? this.layouts.main : this.layouts.main.breakpoints[breakpointId];
const size = breakpointId === 'default' ? '' : this.parseCssQuery(MediaBreakpoints[breakpointId]);
this.layoutBreakpoints.push({
icon: 'mdi:monitor',
name: newBreakpoint,
layout: this.layouts.main.breakpoints[newBreakpoint],
descriptionSize: MediaBreakpoints[newBreakpoint],
breakpoint: newBreakpoint
name: breakpointId,
layout,
descriptionSize: size,
breakpoint: breakpointId
});
}
this.dataSource.loadData(this.layoutBreakpoints);
this.addBreakpointMode = false;
private parseCssQuery(query: string): string {
const value = Array.from(query.matchAll(/\([^:]+:\s+([^()]+)\)/g));
return `min-width: ${value[0][1]} and max-width: ${value[1][1]}`;
}
}

Write Preview
Loading…
Cancel
Save