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

UI: Refactoring dashboard logo

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2021-04-16 14:59:35 +03:00
parent f0413055b0
commit 9b2009a501
11 changed files with 39 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,14 +46,6 @@
<mat-icon>view_compact</mat-icon>
</button>
</div>
<div fxFlex.lt-md fxLayout="row"
fxLayoutAlign.gt-sm="start center"
fxLayoutAlign="end center" fxLayoutGap="12px" class="db-logo-and-title" >
<img [fxShow]="showDashboardLogo() && isFullscreen" [src]="dashboard_logo"
aria-label="white_label_logo" class="whitelabel-logo-db"/>
<tb-states-component fxFlex.lt-md
[statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
[dashboardCtrl]="this"
@ -64,8 +56,8 @@
[syncStateWithQueryParam]="syncStateWithQueryParam"
[states]="dashboardConfiguration.states">
</tb-states-component>
</div>
<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">

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

@ -54,12 +54,9 @@ div.tb-dashboard-page {
z-index: 13;
pointer-events: none;
.db-logo-and-title {
height: $toolbar-height;
.whitelabel-logo-db{
height: 100%;
width: auto;
}
.dashboard_logo{
height: 75%;
margin-right: 16px;
}
&.tb-dashboard-toolbar-opened {
@ -71,9 +68,8 @@ div.tb-dashboard-page {
right: 18px;
transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
}
}
.tb-dashboard-container {
&.tb-dashboard-toolbar-opened {
&.is-fullscreen {

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

@ -121,8 +121,6 @@ import {
DisplayWidgetTypesPanelData,
WidgetTypes
} from '@home/components/dashboard-page/widget-types-panel.component';
import { LogoComponent } from '@app/shared/components/logo.component';
import { concat } from 'lodash';
import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/dashboard-widget-select.component';
// @dynamic
@ -192,8 +190,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
addingLayoutCtx: DashboardPageLayoutContext;
logo_name_local = 'example_logo.png';
dashboard_logo = 'assets/' + this.logo_name_local;
logo = 'assets/logo_title_white.svg';
dashboardCtx: DashboardContext = {
instanceId: this.utils.guid(),
@ -490,13 +487,12 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
isDefined(this.dashboard.configuration.settings.showDashboardLogo)) {
return this.dashboard.configuration.settings.showDashboardLogo;
} else {
return true;
return false;
}
}
public updateLogoName(): string {
this.dashboard_logo = 'assets/' + this.dashboard.configuration.settings.logoName
return this.dashboard.configuration.settings.logoName;
public get dashboardLogo(): string {
return this.dashboard.configuration.settings.dashboardLogoUrl || this.logo;
}
public showRightLayoutSwitch(): boolean {
@ -621,14 +617,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
settings: deepClone(this.dashboard.configuration.settings),
gridSettings,
}
}
).afterClosed().subscribe((data) => {
}).afterClosed().subscribe((data) => {
if (data) {
this.dashboard.configuration.settings = data.settings;
if (this.dashboard.configuration.settings)
{
this.updateLogoName();
}
const newGridSettings = data.gridSettings;
if (newGridSettings) {
const layout = this.dashboard.configuration.states[layoutKeys.state].layouts[layoutKeys.layout];

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

@ -51,15 +51,9 @@
openOnInput
formControlName="titleColor">
</tb-color-input>
<mat-form-field class="mat-block" fxFlex floatLabel="always">
<mat-label translate>dashboard.display-dashboard-enterLogoName</mat-label>
<input #searchInput matInput formControlName="logoName" placeholder="{{ 'dashboard.display-dashboard-exampleLogoName' | translate }}"/>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
<mat-checkbox fxFlex formControlName="showDashboardLogo">
{{ 'dashboard.display-dashboard-showDashboardLogo' | translate }}
</mat-checkbox>
<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>
@ -76,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

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

@ -34,7 +34,6 @@ export interface DashboardSettingsDialogData {
gridSettings?: GridSettings;
}
@Component({
selector: 'tb-dashboard-settings-dialog',
templateUrl: './dashboard-settings-dialog.component.html',
@ -46,8 +45,6 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
settings: DashboardSettings;
gridSettings: GridSettings;
logo_name;
settingsFormGroup: FormGroup;
gridSettingsFormGroup: FormGroup;
@ -56,7 +53,6 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
submitted = false;
constructor(protected store: Store<AppState>,
protected router: Router,
@Inject(MAT_DIALOG_DATA) public data: DashboardSettingsDialogData,
@ -73,7 +69,6 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
this.settings = this.data.settings;
this.gridSettings = this.data.gridSettings;
this.logo_name = 'example_logo.png';
if (this.settings) {
this.settingsFormGroup = this.fb.group({
@ -84,8 +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) ? true : this.settings.showDashboardLogo, []],
logoName: [isUndefined(this.settings.logoName) ? this.logo_name : this.settings.logoName, []],
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, []]
});

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

@ -76,18 +76,6 @@ tb-dashboard-toolbar {
height: $mobile-toolbar-height;
min-height: $mobile-toolbar-height;
}
& > div {
height: $toolbar-height;
.whitelabel-logo-db {
width: auto;
max-width: 100%;
height: 30px;
max-height: 100%;
margin-left: 20px;
margin-top: 5px;
margin-right: 30px;
}
}
@media #{$mat-gt-sm} {
height: $toolbar-height;

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

@ -43,6 +43,4 @@ export class DashboardToolbarComponent implements OnInit {
this.triggerClick.emit();
}
white_label_logo = 'assets/white_label_logo.png';
}

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

@ -87,7 +87,7 @@ export interface DashboardSettings {
showEntitiesSelect?: boolean;
showFilters?: boolean;
showDashboardLogo?: boolean;
logoName?: string;
dashboardLogoUrl?: string;
showDashboardTimewindow?: boolean;
showDashboardExport?: boolean;
toolbarAlwaysOpen?: boolean;

BIN
ui-ngx/src/assets/example_logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

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

@ -725,9 +725,8 @@
"display-filters": "Display filters",
"display-dashboard-timewindow": "Display timewindow",
"display-dashboard-export": "Display export",
"display-dashboard-showDashboardLogo": "Display dashboard logo",
"display-dashboard-enterLogoName": "Enter logo filename (must be in assets folder)",
"display-dashboard-exampleLogoName": "example_logo.png",
"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}}",

BIN
ui-ngx/src/assets/nasa.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 98 KiB