UI: Refactoring dashboard logo

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

@@ -46,26 +46,18 @@
               <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"
-                                 [dashboardId]="(!embedded && dashboard.id) ? dashboard.id.id : ''"
-                                 [isMobile]="isMobile"
-                                 [state]="dashboardCtx.state"
-                                 [currentState]="currentState"
-                                 [syncStateWithQueryParam]="syncStateWithQueryParam"
-                                 [states]="dashboardConfiguration.states">
-            </tb-states-component>
-
-          </div>
+          <tb-states-component fxFlex.lt-md
+                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
+                               [dashboardCtrl]="this"
+                               [dashboardId]="(!embedded && dashboard.id) ? dashboard.id.id : ''"
+                               [isMobile]="isMobile"
+                               [state]="dashboardCtx.state"
+                               [currentState]="currentState"
+                               [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">
@@ -297,4 +289,4 @@
       </mat-drawer>
     </mat-drawer-container>
   </section>
-</div>
+</div>

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

@@ -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 {

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

@@ -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,9 +190,8 @@ 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(),
     getDashboard: () => this.dashboard,
@@ -490,15 +487,14 @@ 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 {
     return this.isMobile && this.layouts.right.show;
   }
@@ -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];

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

@@ -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

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

@@ -34,7 +34,6 @@ export interface DashboardSettingsDialogData {
   gridSettings?: GridSettings;
 }
 
-
 @Component({
   selector: 'tb-dashboard-settings-dialog',
   templateUrl: './dashboard-settings-dialog.component.html',
@@ -46,16 +45,13 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
 
   settings: DashboardSettings;
   gridSettings: GridSettings;
-  logo_name;
 
-  
   settingsFormGroup: FormGroup;
   gridSettingsFormGroup: FormGroup;
 
   stateControllerIds: string[];
 
   submitted = false;
-  
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -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, []]
       });

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

@@ -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;

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

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

ui-ngx/src/app/shared/models/dashboard.models.ts

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

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -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}}",