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

Merge pull request #4284 from TTvanWillegen/master

Browse Source 
UI: Added show logo option in dashboard settings [Issue #3544]
This commit is contained in:
Igor Kulikov 2021-04-16 15:31:29 +03:00 committed by GitHub
commit 5d9ea35fd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,6 +56,8 @@
[syncStateWithQueryParam]="syncStateWithQueryParam"
[states]="dashboardConfiguration.states">
</tb-states-component>
<img *ngIf="showDashboardLogo() && isFullscreen" [src]="dashboardLogo"
aria-label="dashboard_logo" class="dashboard_logo"/>
</div>
<div class="tb-dashboard-action-panel" fxFlex="1 0 auto" fxLayout="row-reverse"
fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap="12px">

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

@ -54,6 +54,11 @@ div.tb-dashboard-page {
z-index: 13;
pointer-events: none;
.dashboard_logo{
height: 75%;
margin-right: 16px;
}
&.tb-dashboard-toolbar-opened {
right: 0;
// transition: right .3s cubic-bezier(.55, 0, .55, .2);

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

@ -191,6 +191,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
addingLayoutCtx: DashboardPageLayoutContext;
logo = 'assets/logo_title_white.svg';
dashboardCtx: DashboardContext = {
instanceId: this.utils.guid(),
@ -484,6 +485,19 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
public showDashboardLogo(): boolean {
if (this.dashboard.configuration.settings &&
isDefined(this.dashboard.configuration.settings.showDashboardLogo)) {
return this.dashboard.configuration.settings.showDashboardLogo;
} else {
return false;
}
}
public get dashboardLogo(): string {
return this.dashboard.configuration.settings.dashboardLogoUrl || this.logo;
}
public showRightLayoutSwitch(): boolean {
return this.isMobile && this.layouts.right.show;
}
@ -605,7 +619,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
settings: deepClone(this.dashboard.configuration.settings),
gridSettings
gridSettings,
}
}).afterClosed().subscribe((data) => {
if (data) {

10
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
View File

@ -52,7 +52,8 @@
formControlName="titleColor">
</tb-color-input>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 8px;"
fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
<mat-checkbox fxFlex formControlName="showDashboardsSelect">
{{ 'dashboard.display-dashboards-selection' | translate }}
</mat-checkbox>
@ -69,6 +70,13 @@
{{ 'dashboard.display-dashboard-export' | translate }}
</mat-checkbox>
</div>
<mat-checkbox formControlName="showDashboardLogo">
{{ 'dashboard.display-dashboard-toolbar-logo' | translate }}
</mat-checkbox>
<tb-image-input fxFlex *ngIf="settingsFormGroup.get('showDashboardLogo').value"
label="{{'dashboard.dashboard-logo-image' | translate}}"
formControlName="dashboardLogoUrl">
</tb-image-input>
</div>
<div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup">
<tb-color-input fxFlex

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

@ -79,6 +79,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []],
showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []],
showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []],
showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo, []],
dashboardLogoUrl: [isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, []],
showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []]
});

3
ui-ngx/src/app/modules/home/pages/api-usage/api_usage_json.raw
View File

@ -4413,7 +4413,8 @@
"showDashboardExport": false,
"toolbarAlwaysOpen": true,
"titleColor": "rgba(0,0,0,0.870588)",
"showFilters": false
"showFilters": false,
"showDashboardLogo": false
}
},
"name": "Api Usage"

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

@ -86,6 +86,8 @@ export interface DashboardSettings {
showDashboardsSelect?: boolean;
showEntitiesSelect?: boolean;
showFilters?: boolean;
showDashboardLogo?: boolean;
dashboardLogoUrl?: string;
showDashboardTimewindow?: boolean;
showDashboardExport?: boolean;
toolbarAlwaysOpen?: boolean;

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

@ -746,6 +746,8 @@
"display-filters": "Display filters",
"display-dashboard-timewindow": "Display timewindow",
"display-dashboard-export": "Display export",
"display-dashboard-toolbar-logo": "Display dashboard logo in fullscreen mode",
"dashboard-logo-image": "Dashboard image logo",
"import": "Import dashboard",
"export": "Export dashboard",
"export-failed-error": "Unable to export dashboard: {{error}}",