简柏林 / thingskit · Commits

Commit 0b256a1d2c6b07972122ed468879069bfd5f8f4a

Authored by Igor Kulikov
1 parent 1d0755f1

Add hide dashboard toolbar settings. Improve dashboard setting dialog. Handle da… 

…shboard right layout toggle in mobile app.
Inline Side-by-side
Showing 11 changed files with 254 additions and 127 deletions
... ... @@ -231,7 +231,6 @@ export class DashboardUtilsService {
231 231 private createDefaultGridSettings(): GridSettings {
232 232 return {
233 233 backgroundColor: '#eeeeee',
234   - color: 'rgba(0,0,0,0.870588)',
235 234 columns: 24,
236 235 margin: 10,
237 236 backgroundSizeMode: '100%'
... ...
... ... @@ -27,6 +27,7 @@ import { AuthService } from '@core/auth/auth.service';
27 27
28 28 const dashboardStateNameHandler = 'tbMobileDashboardStateNameHandler';
29 29 const dashboardLoadedHandler = 'tbMobileDashboardLoadedHandler';
  30 +const dashboardLayoutHandler = 'tbMobileDashboardLayoutHandler';
30 31 const navigationHandler = 'tbMobileNavigationHandler';
31 32 const mobileHandler = 'tbMobileHandler';
32 33
... ... @@ -43,6 +44,7 @@ export class MobileService {
43 44
44 45 private reloadUserObservable: Observable<boolean>;
45 46 private lastDashboardId: string;
  47 + private toggleLayoutFunction: () => void;
46 48
47 49 constructor(@Inject(WINDOW) private window: Window,
48 50 private router: Router,
... ... @@ -65,12 +67,26 @@ export class MobileService {
65 67 }
66 68 }
67 69
68   - public onDashboardLoaded() {
  70 + public onDashboardLoaded(hasRightLayout: boolean, rightLayoutOpened: boolean) {
69 71 if (this.mobileApp) {
70   - this.mobileChannel.callHandler(dashboardLoadedHandler);
  72 + this.mobileChannel.callHandler(dashboardLoadedHandler, hasRightLayout, rightLayoutOpened);
71 73 }
72 74 }
73 75
  76 + public onDashboardRightLayoutChanged(opened: boolean) {
  77 + if (this.mobileApp) {
  78 + this.mobileChannel.callHandler(dashboardLayoutHandler, opened);
  79 + }
  80 + }
  81 +
  82 + public registerToggleLayoutFunction(toggleLayoutFunction: () => void) {
  83 + this.toggleLayoutFunction = toggleLayoutFunction;
  84 + }
  85 +
  86 + public unregisterToggleLayoutFunction() {
  87 + this.toggleLayoutFunction = null;
  88 + }
  89 +
74 90 public handleWidgetMobileAction<T extends MobileActionResult>(type: WidgetMobileActionType, ...args: any[]):
75 91 Observable<WidgetMobileActionResult<T>> {
76 92 if (this.mobileApp) {
... ... @@ -110,6 +126,11 @@ export class MobileService {
110 126 const reloadUserMessage: ReloadUserMessage = message.data;
111 127 this.reloadUser(reloadUserMessage);
112 128 break;
  129 + case 'toggleDashboardLayout':
  130 + if (this.toggleLayoutFunction) {
  131 + this.toggleLayoutFunction();
  132 + }
  133 + break;
113 134 }
114 135 }
115 136 }
... ...
... ... @@ -149,8 +149,16 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
149 149 @Input()
150 150 currentState: string;
151 151
  152 + private hideToolbarValue = false;
  153 +
152 154 @Input()
153   - hideToolbar: boolean;
  155 + set hideToolbar(hideToolbar: boolean) {
  156 + this.hideToolbarValue = hideToolbar;
  157 + }
  158 +
  159 + get hideToolbar(): boolean {
  160 + return (this.hideToolbarValue || this.hideToolbarSetting()) && !this.isEdit;
  161 + }
154 162
155 163 @Input()
156 164 syncStateWithQueryParam = true;
... ... @@ -269,6 +277,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
269 277 return !this.widgetEditMode && !this.hideToolbar &&
270 278 (this.toolbarAlwaysOpen() || this.isToolbarOpened || this.isEdit || this.showRightLayoutSwitch());
271 279 }
  280 +
272 281 set toolbarOpened(toolbarOpened: boolean) {
273 282 }
274 283
... ... @@ -329,7 +338,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
329 338 this.dashboardCtx.aliasController.updateAliases();
330 339 setTimeout(() => {
331 340 this.mobileService.handleDashboardStateName(this.dashboardCtx.stateController.getCurrentStateName());
332   - this.mobileService.onDashboardLoaded();
  341 + this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened);
333 342 });
334 343 }
335 344 }
... ... @@ -340,6 +349,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
340 349 this.isMobile = !state.matches;
341 350 }
342 351 ));
  352 + if (this.isMobileApp) {
  353 + this.mobileService.registerToggleLayoutFunction(() => {
  354 + setTimeout(() => {
  355 + this.toggleLayouts();
  356 + this.cd.detectChanges();
  357 + });
  358 + });
  359 + }
343 360 }
344 361
345 362 private init(data: any) {
... ... @@ -430,6 +447,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
430 447 }
431 448
432 449 ngOnDestroy(): void {
  450 + if (this.isMobileApp) {
  451 + this.mobileService.unregisterToggleLayoutFunction();
  452 + }
433 453 this.rxSubscriptions.forEach((subscription) => {
434 454 subscription.unsubscribe();
435 455 });
... ... @@ -469,6 +489,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
469 489 }
470 490 }
471 491
  492 + private hideToolbarSetting(): boolean {
  493 + if (this.dashboard.configuration.settings &&
  494 + isDefined(this.dashboard.configuration.settings.hideToolbar)) {
  495 + return this.dashboard.configuration.settings.hideToolbar;
  496 + } else {
  497 + return false;
  498 + }
  499 + }
  500 +
472 501 public displayTitle(): boolean {
473 502 if (this.dashboard.configuration.settings &&
474 503 isDefined(this.dashboard.configuration.settings.showTitle)) {
... ... @@ -546,15 +575,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
546 575 }
547 576
548 577 public showRightLayoutSwitch(): boolean {
549   - return this.isMobile && this.layouts.right.show;
  578 + return this.isMobile && !this.isMobileApp && this.layouts.right.show;
550 579 }
551 580
552 581 public toggleLayouts() {
553 582 this.isRightLayoutOpened = !this.isRightLayoutOpened;
  583 + this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened);
554 584 }
555 585
556 586 public openRightLayout() {
557 587 this.isRightLayoutOpened = true;
  588 + this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened);
558 589 }
559 590
560 591 public mainLayoutWidth(): string {
... ... @@ -782,7 +813,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
782 813 this.updateLayouts(layoutsData);
783 814 }
784 815 setTimeout(() => {
785   - this.mobileService.onDashboardLoaded();
  816 + this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened);
786 817 });
787 818 }
788 819
... ...
... ... @@ -15,7 +15,7 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<form (ngSubmit)="save()">
  18 +<form (ngSubmit)="save()" style="width: 750px;">
19 19 <mat-toolbar color="primary">
20 20 <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
21 21 <span fxFlex></span>
... ... @@ -28,8 +28,8 @@
28 28 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
29 29 </mat-progress-bar>
30 30 <div mat-dialog-content>
31   - <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="16px">
32   - <div *ngIf="settings" [formGroup]="settingsFormGroup">
  31 + <fieldset [disabled]="isLoading$ | async">
  32 + <div *ngIf="settings" [formGroup]="settingsFormGroup" fxLayout="column">
33 33 <mat-form-field class="mat-block">
34 34 <mat-label translate>dashboard.state-controller</mat-label>
35 35 <mat-select required formControlName="stateControllerId">
... ... @@ -38,112 +38,116 @@
38 38 </mat-option>
39 39 </mat-select>
40 40 </mat-form-field>
41   - <div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
42   - <mat-checkbox fxFlex formControlName="toolbarAlwaysOpen">
43   - {{ 'dashboard.toolbar-always-open' | translate }}
44   - </mat-checkbox>
45   - <mat-checkbox fxFlex formControlName="showTitle">
  41 + <fieldset class="fields-group" fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px">
  42 + <legend class="group-title" translate>dashboard.title-settings</legend>
  43 + <mat-slide-toggle fxFlex formControlName="showTitle">
46 44 {{ 'dashboard.display-title' | translate }}
47   - </mat-checkbox>
  45 + </mat-slide-toggle>
48 46 <tb-color-input fxFlex
49 47 label="{{'dashboard.title-color' | translate}}"
50 48 icon="format_color_fill"
51 49 openOnInput
52 50 formControlName="titleColor">
53 51 </tb-color-input>
54   - </div>
55   - <div fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 8px;"
56   - fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
57   - <mat-checkbox fxFlex formControlName="showDashboardsSelect">
  52 + </fieldset>
  53 + <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
  54 + <legend class="group-title" translate>dashboard.dashboard-logo-settings</legend>
  55 + <mat-slide-toggle formControlName="showDashboardLogo">
  56 + {{ 'dashboard.display-dashboard-logo' | translate }}
  57 + </mat-slide-toggle>
  58 + <tb-image-input fxFlex
  59 + label="{{'dashboard.dashboard-logo-image' | translate}}"
  60 + formControlName="dashboardLogoUrl">
  61 + </tb-image-input>
  62 + </fieldset>
  63 + <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
  64 + <legend class="group-title" translate>dashboard.toolbar-settings</legend>
  65 + <mat-slide-toggle formControlName="hideToolbar">
  66 + {{ 'dashboard.hide-toolbar' | translate }}
  67 + </mat-slide-toggle>
  68 + <mat-slide-toggle formControlName="toolbarAlwaysOpen">
  69 + {{ 'dashboard.toolbar-always-open' | translate }}
  70 + </mat-slide-toggle>
  71 + <mat-slide-toggle formControlName="showDashboardsSelect">
58 72 {{ 'dashboard.display-dashboards-selection' | translate }}
59   - </mat-checkbox>
60   - <mat-checkbox fxFlex formControlName="showEntitiesSelect">
  73 + </mat-slide-toggle>
  74 + <mat-slide-toggle formControlName="showEntitiesSelect">
61 75 {{ 'dashboard.display-entities-selection' | translate }}
62   - </mat-checkbox>
63   - <mat-checkbox fxFlex formControlName="showFilters">
  76 + </mat-slide-toggle>
  77 + <mat-slide-toggle formControlName="showFilters">
64 78 {{ 'dashboard.display-filters' | translate }}
65   - </mat-checkbox>
66   - <mat-checkbox fxFlex formControlName="showDashboardTimewindow">
  79 + </mat-slide-toggle>
  80 + <mat-slide-toggle formControlName="showDashboardTimewindow">
67 81 {{ 'dashboard.display-dashboard-timewindow' | translate }}
68   - </mat-checkbox>
69   - <mat-checkbox fxFlex formControlName="showDashboardExport">
  82 + </mat-slide-toggle>
  83 + <mat-slide-toggle formControlName="showDashboardExport">
70 84 {{ 'dashboard.display-dashboard-export' | translate }}
71   - </mat-checkbox>
72   - <mat-checkbox fxFlex formControlName="showUpdateDashboardImage">
  85 + </mat-slide-toggle>
  86 + <mat-slide-toggle formControlName="showUpdateDashboardImage">
73 87 {{ 'dashboard.display-update-dashboard-image' | translate }}
74   - </mat-checkbox>
75   - </div>
76   - <mat-checkbox formControlName="showDashboardLogo">
77   - {{ 'dashboard.display-dashboard-logo' | translate }}
78   - </mat-checkbox>
79   - <tb-image-input fxFlex *ngIf="settingsFormGroup.get('showDashboardLogo').value"
80   - label="{{'dashboard.dashboard-logo-image' | translate}}"
81   - formControlName="dashboardLogoUrl">
82   - </tb-image-input>
  88 + </mat-slide-toggle>
  89 + </fieldset>
83 90 </div>
84   - <div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup">
85   - <tb-color-input fxFlex
86   - label="{{'layout.color' | translate}}"
87   - icon="format_color_fill"
88   - openOnInput
89   - formControlName="color">
90   - </tb-color-input>
91   - <mat-form-field class="mat-block">
92   - <mat-label translate>dashboard.columns-count</mat-label>
93   - <input matInput formControlName="columns" type="number" step="any" min="10"
94   - max="1000" required>
95   - <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('required')">
96   - {{ 'dashboard.columns-count-required' | translate }}
97   - </mat-error>
98   - <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('min')">
99   - {{ 'dashboard.min-columns-count-message' | translate }}
100   - </mat-error>
101   - <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('max')">
102   - {{ 'dashboard.max-columns-count-message' | translate }}
103   - </mat-error>
104   - </mat-form-field>
105   - <mat-form-field fxFlex class="mat-block">
106   - <mat-label translate>dashboard.widgets-margins</mat-label>
107   - <input matInput formControlName="margin" type="number" step="any" min="0"
108   - max="50" required>
109   - <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('required')">
110   - {{ 'dashboard.margin-required' | translate }}
111   - </mat-error>
112   - <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('min')">
113   - {{ 'dashboard.min-margin-message' | translate }}
114   - </mat-error>
115   - <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('max')">
116   - {{ 'dashboard.max-margin-message' | translate }}
117   - </mat-error>
118   - </mat-form-field>
119   - <mat-checkbox fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;">
120   - {{ 'dashboard.autofill-height' | translate }}
121   - </mat-checkbox>
122   - <tb-color-input fxFlex
123   - label="{{'dashboard.background-color' | translate}}"
124   - icon="format_color_fill"
125   - openOnInput
126   - formControlName="backgroundColor">
127   - </tb-color-input>
128   - <tb-image-input fxFlex
129   - label="{{'dashboard.background-image' | translate}}"
130   - formControlName="backgroundImageUrl">
131   - </tb-image-input>
132   - <mat-form-field class="mat-block">
133   - <mat-label translate>dashboard.background-size-mode</mat-label>
134   - <mat-select formControlName="backgroundSizeMode">
135   - <mat-option value="100%">Fit width</mat-option>
136   - <mat-option value="auto 100%">Fit height</mat-option>
137   - <mat-option value="cover">Cover</mat-option>
138   - <mat-option value="contain">Contain</mat-option>
139   - <mat-option value="auto">Original size</mat-option>
140   - </mat-select>
141   - </mat-form-field>
142   - <small translate>dashboard.mobile-layout</small>
143   - <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs fxLayoutGap="8px" style="margin-top: 8px">
144   - <mat-checkbox fxFlex formControlName="mobileAutoFillHeight">
  91 + <div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup" fxLayout="column">
  92 + <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
  93 + <legend class="group-title" translate>dashboard.layout-settings</legend>
  94 + <mat-form-field class="mat-block">
  95 + <mat-label translate>dashboard.columns-count</mat-label>
  96 + <input matInput formControlName="columns" type="number" step="any" min="10"
  97 + max="1000" required>
  98 + <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('required')">
  99 + {{ 'dashboard.columns-count-required' | translate }}
  100 + </mat-error>
  101 + <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('min')">
  102 + {{ 'dashboard.min-columns-count-message' | translate }}
  103 + </mat-error>
  104 + <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('max')">
  105 + {{ 'dashboard.max-columns-count-message' | translate }}
  106 + </mat-error>
  107 + </mat-form-field>
  108 + <mat-form-field fxFlex class="mat-block">
  109 + <mat-label translate>dashboard.widgets-margins</mat-label>
  110 + <input matInput formControlName="margin" type="number" step="any" min="0"
  111 + max="50" required>
  112 + <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('required')">
  113 + {{ 'dashboard.margin-required' | translate }}
  114 + </mat-error>
  115 + <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('min')">
  116 + {{ 'dashboard.min-margin-message' | translate }}
  117 + </mat-error>
  118 + <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('max')">
  119 + {{ 'dashboard.max-margin-message' | translate }}
  120 + </mat-error>
  121 + </mat-form-field>
  122 + <mat-slide-toggle fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;">
  123 + {{ 'dashboard.autofill-height' | translate }}
  124 + </mat-slide-toggle>
  125 + <tb-color-input fxFlex
  126 + label="{{'dashboard.background-color' | translate}}"
  127 + icon="format_color_fill"
  128 + openOnInput
  129 + formControlName="backgroundColor">
  130 + </tb-color-input>
  131 + <tb-image-input fxFlex
  132 + label="{{'dashboard.background-image' | translate}}"
  133 + formControlName="backgroundImageUrl">
  134 + </tb-image-input>
  135 + <mat-form-field class="mat-block">
  136 + <mat-label translate>dashboard.background-size-mode</mat-label>
  137 + <mat-select formControlName="backgroundSizeMode">
  138 + <mat-option value="100%">Fit width</mat-option>
  139 + <mat-option value="auto 100%">Fit height</mat-option>
  140 + <mat-option value="cover">Cover</mat-option>
  141 + <mat-option value="contain">Contain</mat-option>
  142 + <mat-option value="auto">Original size</mat-option>
  143 + </mat-select>
  144 + </mat-form-field>
  145 + </fieldset>
  146 + <fieldset class="fields-group" fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px">
  147 + <legend class="group-title" translate>dashboard.mobile-layout</legend>
  148 + <mat-slide-toggle fxFlex formControlName="mobileAutoFillHeight">
145 149 {{ 'dashboard.autofill-height' | translate }}
146   - </mat-checkbox>
  150 + </mat-slide-toggle>
147 151 <mat-form-field fxFlex class="mat-block">
148 152 <mat-label translate>dashboard.mobile-row-height</mat-label>
149 153 <input matInput formControlName="mobileRowHeight" type="number" step="any" min="5"
... ... @@ -158,7 +162,7 @@
158 162 {{ 'dashboard.max-mobile-row-height-message' | translate }}
159 163 </mat-error>
160 164 </mat-form-field>
161   - </div>
  165 + </fieldset>
162 166 </div>
163 167 </fieldset>
164 168 </div>
... ...
... ... @@ -14,13 +14,19 @@
14 14 * limitations under the License.
15 15 */
16 16 :host {
17   - small {
18   - white-space: normal;
  17 + .fields-group {
  18 + padding: 0 8px 8px;
  19 + margin: 10px 0;
  20 + border: 1px groove rgba(0, 0, 0, .25);
  21 + border-radius: 4px;
  22 + legend {
  23 + color: rgba(0, 0, 0, .7);
  24 + }
19 25 }
20 26 }
21 27
22 28 :host ::ng-deep {
23   - .mat-checkbox-label {
  29 + .mat-slide-toggle-content {
24 30 white-space: normal;
25 31 }
26 32 }
... ...
... ... @@ -71,19 +71,33 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
71 71 this.gridSettings = this.data.gridSettings;
72 72
73 73 if (this.settings) {
  74 + const showTitle = isUndefined(this.settings.showTitle) ? true : this.settings.showTitle;
  75 + const showDashboardLogo = isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo;
  76 + const hideToolbar = isUndefined(this.settings.hideToolbar) ? false : this.settings.hideToolbar;
74 77 this.settingsFormGroup = this.fb.group({
75 78 stateControllerId: [isUndefined(this.settings.stateControllerId) ? 'entity' : this.settings.stateControllerId, []],
76   - toolbarAlwaysOpen: [isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen, []],
77   - showTitle: [isUndefined(this.settings.showTitle) ? true : this.settings.showTitle, []],
78   - titleColor: [isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor, []],
79   - showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []],
80   - showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []],
81   - showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []],
82   - showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo, []],
83   - dashboardLogoUrl: [isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, []],
84   - showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
85   - showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []],
86   - showUpdateDashboardImage: [isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage, []]
  79 + showTitle: [showTitle, []],
  80 + titleColor: [{value: isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor,
  81 + disabled: !showTitle}, []],
  82 + showDashboardLogo: [showDashboardLogo, []],
  83 + dashboardLogoUrl: [{value: isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl,
  84 + disabled: !showDashboardLogo}, []],
  85 + hideToolbar: [hideToolbar, []],
  86 + toolbarAlwaysOpen: [{value: isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen,
  87 + disabled: hideToolbar}, []],
  88 + showDashboardsSelect: [{value: isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect,
  89 + disabled: hideToolbar}, []],
  90 + showEntitiesSelect: [{value: isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect,
  91 + disabled: hideToolbar}, []],
  92 + showFilters: [{value: isUndefined(this.settings.showFilters) ? true : this.settings.showFilters,
  93 + disabled: hideToolbar}, []],
  94 + showDashboardTimewindow: [{value: isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow,
  95 + disabled: hideToolbar}, []],
  96 + showDashboardExport: [{value: isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport,
  97 + disabled: hideToolbar}, []],
  98 + showUpdateDashboardImage: [
  99 + {value: isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage,
  100 + disabled: hideToolbar}, []]
87 101 });
88 102 this.settingsFormGroup.get('stateControllerId').valueChanges.subscribe(
89 103 (stateControllerId: StateControllerId) => {
... ... @@ -92,13 +106,52 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
92 106 }
93 107 }
94 108 );
  109 + this.settingsFormGroup.get('showTitle').valueChanges.subscribe(
  110 + (showTitleValue: boolean) => {
  111 + if (showTitleValue) {
  112 + this.settingsFormGroup.get('titleColor').enable();
  113 + } else {
  114 + this.settingsFormGroup.get('titleColor').disable();
  115 + }
  116 + }
  117 + );
  118 + this.settingsFormGroup.get('showDashboardLogo').valueChanges.subscribe(
  119 + (showDashboardLogoValue: boolean) => {
  120 + if (showDashboardLogoValue) {
  121 + this.settingsFormGroup.get('dashboardLogoUrl').enable();
  122 + } else {
  123 + this.settingsFormGroup.get('dashboardLogoUrl').disable();
  124 + }
  125 + }
  126 + );
  127 + this.settingsFormGroup.get('hideToolbar').valueChanges.subscribe(
  128 + (hideToolbarValue: boolean) => {
  129 + if (hideToolbarValue) {
  130 + this.settingsFormGroup.get('toolbarAlwaysOpen').disable();
  131 + this.settingsFormGroup.get('showDashboardsSelect').disable();
  132 + this.settingsFormGroup.get('showEntitiesSelect').disable();
  133 + this.settingsFormGroup.get('showFilters').disable();
  134 + this.settingsFormGroup.get('showDashboardTimewindow').disable();
  135 + this.settingsFormGroup.get('showDashboardExport').disable();
  136 + this.settingsFormGroup.get('showUpdateDashboardImage').disable();
  137 + } else {
  138 + this.settingsFormGroup.get('toolbarAlwaysOpen').enable();
  139 + this.settingsFormGroup.get('showDashboardsSelect').enable();
  140 + this.settingsFormGroup.get('showEntitiesSelect').enable();
  141 + this.settingsFormGroup.get('showFilters').enable();
  142 + this.settingsFormGroup.get('showDashboardTimewindow').enable();
  143 + this.settingsFormGroup.get('showDashboardExport').enable();
  144 + this.settingsFormGroup.get('showUpdateDashboardImage').enable();
  145 + }
  146 + }
  147 + );
95 148 } else {
96 149 this.settingsFormGroup = this.fb.group({});
97 150 }
98 151
99 152 if (this.gridSettings) {
  153 + const mobileAutoFillHeight = isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight;
100 154 this.gridSettingsFormGroup = this.fb.group({
101   - color: [this.gridSettings.color || 'rgba(0,0,0,0.870588)', []],
102 155 columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]],
103 156 margin: [isDefined(this.gridSettings.margin) ? this.gridSettings.margin : 10,
104 157 [Validators.required, Validators.min(0), Validators.max(50)]],
... ... @@ -106,10 +159,19 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
106 159 backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []],
107 160 backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []],
108 161 backgroundSizeMode: [this.gridSettings.backgroundSizeMode || '100%', []],
109   - mobileAutoFillHeight: [isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight, []],
110   - mobileRowHeight: [isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight,
111   - [Validators.required, Validators.min(5), Validators.max(200)]]
  162 + mobileAutoFillHeight: [mobileAutoFillHeight, []],
  163 + mobileRowHeight: [{ value: isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight,
  164 + disabled: mobileAutoFillHeight}, [Validators.required, Validators.min(5), Validators.max(200)]]
112 165 });
  166 + this.gridSettingsFormGroup.get('mobileAutoFillHeight').valueChanges.subscribe(
  167 + (mobileAutoFillHeightValue: boolean) => {
  168 + if (mobileAutoFillHeightValue) {
  169 + this.gridSettingsFormGroup.get('mobileRowHeight').disable();
  170 + } else {
  171 + this.gridSettingsFormGroup.get('mobileRowHeight').enable();
  172 + }
  173 + }
  174 + );
113 175 } else {
114 176 this.gridSettingsFormGroup = this.fb.group({});
115 177 }
... ... @@ -133,10 +195,10 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
133 195 let settings: DashboardSettings = null;
134 196 let gridSettings: GridSettings = null;
135 197 if (this.settings) {
136   - settings = {...this.settings, ...this.settingsFormGroup.value};
  198 + settings = {...this.settings, ...this.settingsFormGroup.getRawValue()};
137 199 }
138 200 if (this.gridSettings) {
139   - gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.value};
  201 + gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.getRawValue()};
140 202 }
141 203 this.dialogRef.close({settings, gridSettings});
142 204 }
... ...
... ... @@ -26,7 +26,6 @@
26 26 [style.backgroundImage]="backgroundImage"
27 27 [ngStyle]="dashboardStyle">
28 28 <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
29   - [ngStyle]="{'color': layoutCtx.gridSettings.color}"
30 29 style="display: flex; z-index: 1; pointer-events: none;"
31 30 class="mat-headline tb-absolute-fill">
32 31 <span *ngIf="!isEdit">
... ...
... ... @@ -20,7 +20,7 @@
20 20 <mat-icon *ngIf="icon">{{icon}}</mat-icon>
21 21 <span *ngIf="label">{{label}}</span>
22 22 </mat-label>
23   - <div matPrefix class="tb-color-preview" (click)="showColorPicker()" style="margin-right: 5px;">
  23 + <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker()" style="margin-right: 5px;">
24 24 <div class="tb-color-result" [ngStyle]="{background: colorFormGroup.get('color').value}"></div>
25 25 </div>
26 26 <input matInput formControlName="color" (mousedown)="openOnInput && showColorPicker()" [required]="required">
... ...
... ... @@ -45,7 +45,6 @@ export interface WidgetLayouts {
45 45
46 46 export interface GridSettings {
47 47 backgroundColor?: string;
48   - color?: string;
49 48 columns?: number;
50 49 margin?: number;
51 50 backgroundSizeMode?: string;
... ... @@ -93,6 +92,7 @@ export interface DashboardSettings {
93 92 showDashboardExport?: boolean;
94 93 showUpdateDashboardImage?: boolean;
95 94 toolbarAlwaysOpen?: boolean;
  95 + hideToolbar?: boolean;
96 96 titleColor?: string;
97 97 }
98 98
... ...
... ... @@ -14,7 +14,7 @@
14 14 /// limitations under the License.
15 15 ///
16 16
17   -export type WindowMessageType = 'widgetException' | 'widgetEditModeInited' | 'widgetEditUpdated' | 'openDashboardMessage' | 'reloadUserMessage';
  17 +export type WindowMessageType = 'widgetException' | 'widgetEditModeInited' | 'widgetEditUpdated' | 'openDashboardMessage' | 'reloadUserMessage' | 'toggleDashboardLayout';
18 18
19 19 export interface WindowMessage {
20 20 type: WindowMessageType;
... ...
... ... @@ -721,6 +721,7 @@
721 721 "maximum-upload-file-size": "Maximum upload file size: {{ size }}",
722 722 "cannot-upload-file": "Cannot upload file",
723 723 "settings": "Settings",
  724 + "layout-settings": "Layout settings",
724 725 "columns-count": "Columns count",
725 726 "columns-count-required": "Columns count is required.",
726 727 "min-columns-count-message": "Only 10 minimum column count is allowed.",
... ... @@ -743,15 +744,19 @@
743 744 "mobile-row-height-required": "Mobile row height value is required.",
744 745 "min-mobile-row-height-message": "Only 5 pixels is allowed as minimum mobile row height value.",
745 746 "max-mobile-row-height-message": "Only 200 pixels is allowed as maximum mobile row height value.",
  747 + "title-settings": "Title settings",
746 748 "display-title": "Display dashboard title",
747   - "toolbar-always-open": "Keep toolbar opened",
748 749 "title-color": "Title color",
  750 + "toolbar-settings": "Toolbar settings",
  751 + "hide-toolbar": "Hide toolbar",
  752 + "toolbar-always-open": "Keep toolbar opened",
749 753 "display-dashboards-selection": "Display dashboards selection",
750 754 "display-entities-selection": "Display entities selection",
751 755 "display-filters": "Display filters",
752 756 "display-dashboard-timewindow": "Display timewindow",
753 757 "display-dashboard-export": "Display export",
754 758 "display-update-dashboard-image": "Display update dashboard image",
  759 + "dashboard-logo-settings": "Dashboard logo settings",
755 760 "display-dashboard-logo": "Display logo in dashboard fullscreen mode",
756 761 "dashboard-logo-image": "Dashboard logo image",
757 762 "import": "Import dashboard",
... ...