简柏林 / thingskit · Commits

Commit 9b2009a50131bfd4cb4b36551d4158ac41ace56f

Authored by Vladyslav_Prykhodko
1 parent f0413055

UI: Refactoring dashboard logo

Inline Side-by-side
Showing 11 changed files with 39 additions and 79 deletions
@@ -46,26 +46,18 @@ @@ -46,26 +46,18 @@
46 <mat-icon>view_compact</mat-icon> 46 <mat-icon>view_compact</mat-icon>
47 </button> 47 </button>
48 </div> 48 </div>
49 -  
50 - <div fxFlex.lt-md fxLayout="row"  
51 - fxLayoutAlign.gt-sm="start center"  
52 - fxLayoutAlign="end center" fxLayoutGap="12px" class="db-logo-and-title" >  
53 -  
54 - <img [fxShow]="showDashboardLogo() && isFullscreen" [src]="dashboard_logo"  
55 - aria-label="white_label_logo" class="whitelabel-logo-db"/>  
56 -  
57 - <tb-states-component fxFlex.lt-md  
58 - [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"  
59 - [dashboardCtrl]="this"  
60 - [dashboardId]="(!embedded && dashboard.id) ? dashboard.id.id : ''"  
61 - [isMobile]="isMobile"  
62 - [state]="dashboardCtx.state"  
63 - [currentState]="currentState"  
64 - [syncStateWithQueryParam]="syncStateWithQueryParam"  
65 - [states]="dashboardConfiguration.states">  
66 - </tb-states-component>  
67 -  
68 - </div> 49 + <tb-states-component fxFlex.lt-md
  50 + [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
  51 + [dashboardCtrl]="this"
  52 + [dashboardId]="(!embedded && dashboard.id) ? dashboard.id.id : ''"
  53 + [isMobile]="isMobile"
  54 + [state]="dashboardCtx.state"
  55 + [currentState]="currentState"
  56 + [syncStateWithQueryParam]="syncStateWithQueryParam"
  57 + [states]="dashboardConfiguration.states">
  58 + </tb-states-component>
  59 + <img *ngIf="showDashboardLogo() && isFullscreen" [src]="dashboardLogo"
  60 + aria-label="dashboard_logo" class="dashboard_logo"/>
69 </div> 61 </div>
70 <div class="tb-dashboard-action-panel" fxFlex="1 0 auto" fxLayout="row-reverse" 62 <div class="tb-dashboard-action-panel" fxFlex="1 0 auto" fxLayout="row-reverse"
71 fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap="12px"> 63 fxLayoutAlign.gt-sm="start center" fxLayoutAlign="space-between center" fxLayoutGap="12px">
@@ -297,4 +289,4 @@ @@ -297,4 +289,4 @@
297 </mat-drawer> 289 </mat-drawer>
298 </mat-drawer-container> 290 </mat-drawer-container>
299 </section> 291 </section>
300 -</div>  
  292 +</div>
@@ -54,12 +54,9 @@ div.tb-dashboard-page { @@ -54,12 +54,9 @@ div.tb-dashboard-page {
54 z-index: 13; 54 z-index: 13;
55 pointer-events: none; 55 pointer-events: none;
56 56
57 - .db-logo-and-title {  
58 - height: $toolbar-height;  
59 - .whitelabel-logo-db{  
60 - height: 100%;  
61 - width: auto;  
62 - } 57 + .dashboard_logo{
  58 + height: 75%;
  59 + margin-right: 16px;
63 } 60 }
64 61
65 &.tb-dashboard-toolbar-opened { 62 &.tb-dashboard-toolbar-opened {
@@ -71,9 +68,8 @@ div.tb-dashboard-page { @@ -71,9 +68,8 @@ div.tb-dashboard-page {
71 right: 18px; 68 right: 18px;
72 transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s; 69 transition: right .3s cubic-bezier(.55, 0, .55, .2) .2s;
73 } 70 }
74 - 71 + }
75 72
76 - }  
77 .tb-dashboard-container { 73 .tb-dashboard-container {
78 &.tb-dashboard-toolbar-opened { 74 &.tb-dashboard-toolbar-opened {
79 &.is-fullscreen { 75 &.is-fullscreen {
@@ -121,8 +121,6 @@ import { @@ -121,8 +121,6 @@ import {
121 DisplayWidgetTypesPanelData, 121 DisplayWidgetTypesPanelData,
122 WidgetTypes 122 WidgetTypes
123 } from '@home/components/dashboard-page/widget-types-panel.component'; 123 } from '@home/components/dashboard-page/widget-types-panel.component';
124 -import { LogoComponent } from '@app/shared/components/logo.component';  
125 -import { concat } from 'lodash';  
126 import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/dashboard-widget-select.component'; 124 import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/dashboard-widget-select.component';
127 125
128 // @dynamic 126 // @dynamic
@@ -192,9 +190,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC @@ -192,9 +190,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
192 190
193 addingLayoutCtx: DashboardPageLayoutContext; 191 addingLayoutCtx: DashboardPageLayoutContext;
194 192
195 - logo_name_local = 'example_logo.png';  
196 - dashboard_logo = 'assets/' + this.logo_name_local;  
197 - 193 + logo = 'assets/logo_title_white.svg';
  194 +
198 dashboardCtx: DashboardContext = { 195 dashboardCtx: DashboardContext = {
199 instanceId: this.utils.guid(), 196 instanceId: this.utils.guid(),
200 getDashboard: () => this.dashboard, 197 getDashboard: () => this.dashboard,
@@ -490,15 +487,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC @@ -490,15 +487,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
490 isDefined(this.dashboard.configuration.settings.showDashboardLogo)) { 487 isDefined(this.dashboard.configuration.settings.showDashboardLogo)) {
491 return this.dashboard.configuration.settings.showDashboardLogo; 488 return this.dashboard.configuration.settings.showDashboardLogo;
492 } else { 489 } else {
493 - return true; 490 + return false;
494 } 491 }
495 } 492 }
496 493
497 - public updateLogoName(): string {  
498 - this.dashboard_logo = 'assets/' + this.dashboard.configuration.settings.logoName  
499 - return this.dashboard.configuration.settings.logoName; 494 + public get dashboardLogo(): string {
  495 + return this.dashboard.configuration.settings.dashboardLogoUrl || this.logo;
500 } 496 }
501 - 497 +
502 public showRightLayoutSwitch(): boolean { 498 public showRightLayoutSwitch(): boolean {
503 return this.isMobile && this.layouts.right.show; 499 return this.isMobile && this.layouts.right.show;
504 } 500 }
@@ -621,14 +617,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC @@ -621,14 +617,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
621 settings: deepClone(this.dashboard.configuration.settings), 617 settings: deepClone(this.dashboard.configuration.settings),
622 gridSettings, 618 gridSettings,
623 } 619 }
624 - }  
625 - ).afterClosed().subscribe((data) => { 620 + }).afterClosed().subscribe((data) => {
626 if (data) { 621 if (data) {
627 this.dashboard.configuration.settings = data.settings; 622 this.dashboard.configuration.settings = data.settings;
628 - if (this.dashboard.configuration.settings)  
629 - {  
630 - this.updateLogoName();  
631 - }  
632 const newGridSettings = data.gridSettings; 623 const newGridSettings = data.gridSettings;
633 if (newGridSettings) { 624 if (newGridSettings) {
634 const layout = this.dashboard.configuration.states[layoutKeys.state].layouts[layoutKeys.layout]; 625 const layout = this.dashboard.configuration.states[layoutKeys.state].layouts[layoutKeys.layout];
@@ -51,15 +51,9 @@ @@ -51,15 +51,9 @@
51 openOnInput 51 openOnInput
52 formControlName="titleColor"> 52 formControlName="titleColor">
53 </tb-color-input> 53 </tb-color-input>
54 - <mat-form-field class="mat-block" fxFlex floatLabel="always">  
55 - <mat-label translate>dashboard.display-dashboard-enterLogoName</mat-label>  
56 - <input #searchInput matInput formControlName="logoName" placeholder="{{ 'dashboard.display-dashboard-exampleLogoName' | translate }}"/>  
57 - </mat-form-field>  
58 </div> 54 </div>
59 - <div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">  
60 - <mat-checkbox fxFlex formControlName="showDashboardLogo">  
61 - {{ 'dashboard.display-dashboard-showDashboardLogo' | translate }}  
62 - </mat-checkbox> 55 + <div fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 8px;"
  56 + fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
63 <mat-checkbox fxFlex formControlName="showDashboardsSelect"> 57 <mat-checkbox fxFlex formControlName="showDashboardsSelect">
64 {{ 'dashboard.display-dashboards-selection' | translate }} 58 {{ 'dashboard.display-dashboards-selection' | translate }}
65 </mat-checkbox> 59 </mat-checkbox>
@@ -76,6 +70,13 @@ @@ -76,6 +70,13 @@
76 {{ 'dashboard.display-dashboard-export' | translate }} 70 {{ 'dashboard.display-dashboard-export' | translate }}
77 </mat-checkbox> 71 </mat-checkbox>
78 </div> 72 </div>
  73 + <mat-checkbox formControlName="showDashboardLogo">
  74 + {{ 'dashboard.display-dashboard-toolbar-logo' | translate }}
  75 + </mat-checkbox>
  76 + <tb-image-input fxFlex *ngIf="settingsFormGroup.get('showDashboardLogo').value"
  77 + label="{{'dashboard.dashboard-logo-image' | translate}}"
  78 + formControlName="dashboardLogoUrl">
  79 + </tb-image-input>
79 </div> 80 </div>
80 <div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup"> 81 <div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup">
81 <tb-color-input fxFlex 82 <tb-color-input fxFlex
@@ -34,7 +34,6 @@ export interface DashboardSettingsDialogData { @@ -34,7 +34,6 @@ export interface DashboardSettingsDialogData {
34 gridSettings?: GridSettings; 34 gridSettings?: GridSettings;
35 } 35 }
36 36
37 -  
38 @Component({ 37 @Component({
39 selector: 'tb-dashboard-settings-dialog', 38 selector: 'tb-dashboard-settings-dialog',
40 templateUrl: './dashboard-settings-dialog.component.html', 39 templateUrl: './dashboard-settings-dialog.component.html',
@@ -46,16 +45,13 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS @@ -46,16 +45,13 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
46 45
47 settings: DashboardSettings; 46 settings: DashboardSettings;
48 gridSettings: GridSettings; 47 gridSettings: GridSettings;
49 - logo_name;  
50 48
51 -  
52 settingsFormGroup: FormGroup; 49 settingsFormGroup: FormGroup;
53 gridSettingsFormGroup: FormGroup; 50 gridSettingsFormGroup: FormGroup;
54 51
55 stateControllerIds: string[]; 52 stateControllerIds: string[];
56 53
57 submitted = false; 54 submitted = false;
58 -  
59 55
60 constructor(protected store: Store<AppState>, 56 constructor(protected store: Store<AppState>,
61 protected router: Router, 57 protected router: Router,
@@ -73,7 +69,6 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS @@ -73,7 +69,6 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
73 69
74 this.settings = this.data.settings; 70 this.settings = this.data.settings;
75 this.gridSettings = this.data.gridSettings; 71 this.gridSettings = this.data.gridSettings;
76 - this.logo_name = 'example_logo.png';  
77 72
78 if (this.settings) { 73 if (this.settings) {
79 this.settingsFormGroup = this.fb.group({ 74 this.settingsFormGroup = this.fb.group({
@@ -84,8 +79,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS @@ -84,8 +79,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
84 showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []], 79 showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []],
85 showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []], 80 showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []],
86 showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []], 81 showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []],
87 - showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? true : this.settings.showDashboardLogo, []],  
88 - logoName: [isUndefined(this.settings.logoName) ? this.logo_name : this.settings.logoName, []], 82 + showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo, []],
  83 + dashboardLogoUrl: [isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, []],
89 showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []], 84 showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
90 showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []] 85 showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []]
91 }); 86 });
@@ -76,18 +76,6 @@ tb-dashboard-toolbar { @@ -76,18 +76,6 @@ tb-dashboard-toolbar {
76 height: $mobile-toolbar-height; 76 height: $mobile-toolbar-height;
77 min-height: $mobile-toolbar-height; 77 min-height: $mobile-toolbar-height;
78 } 78 }
79 - & > div {  
80 - height: $toolbar-height;  
81 - .whitelabel-logo-db {  
82 - width: auto;  
83 - max-width: 100%;  
84 - height: 30px;  
85 - max-height: 100%;  
86 - margin-left: 20px;  
87 - margin-top: 5px;  
88 - margin-right: 30px;  
89 - }  
90 - }  
91 79
92 @media #{$mat-gt-sm} { 80 @media #{$mat-gt-sm} {
93 height: $toolbar-height; 81 height: $toolbar-height;
@@ -43,6 +43,4 @@ export class DashboardToolbarComponent implements OnInit { @@ -43,6 +43,4 @@ export class DashboardToolbarComponent implements OnInit {
43 this.triggerClick.emit(); 43 this.triggerClick.emit();
44 } 44 }
45 45
46 - white_label_logo = 'assets/white_label_logo.png';  
47 -  
48 } 46 }
@@ -86,8 +86,8 @@ export interface DashboardSettings { @@ -86,8 +86,8 @@ export interface DashboardSettings {
86 showDashboardsSelect?: boolean; 86 showDashboardsSelect?: boolean;
87 showEntitiesSelect?: boolean; 87 showEntitiesSelect?: boolean;
88 showFilters?: boolean; 88 showFilters?: boolean;
89 - showDashboardLogo?: boolean;  
90 - logoName?: string; 89 + showDashboardLogo?: boolean;
  90 + dashboardLogoUrl?: string;
91 showDashboardTimewindow?: boolean; 91 showDashboardTimewindow?: boolean;
92 showDashboardExport?: boolean; 92 showDashboardExport?: boolean;
93 toolbarAlwaysOpen?: boolean; 93 toolbarAlwaysOpen?: boolean;
@@ -725,9 +725,8 @@ @@ -725,9 +725,8 @@
725 "display-filters": "Display filters", 725 "display-filters": "Display filters",
726 "display-dashboard-timewindow": "Display timewindow", 726 "display-dashboard-timewindow": "Display timewindow",
727 "display-dashboard-export": "Display export", 727 "display-dashboard-export": "Display export",
728 - "display-dashboard-showDashboardLogo": "Display dashboard logo",  
729 - "display-dashboard-enterLogoName": "Enter logo filename (must be in assets folder)",  
730 - "display-dashboard-exampleLogoName": "example_logo.png", 728 + "display-dashboard-toolbar-logo": "Display dashboard logo in fullscreen mode",
  729 + "dashboard-logo-image": "Dashboard image logo",
731 "import": "Import dashboard", 730 "import": "Import dashboard",
732 "export": "Export dashboard", 731 "export": "Export dashboard",
733 "export-failed-error": "Unable to export dashboard: {{error}}", 732 "export-failed-error": "Unable to export dashboard: {{error}}",