Merge pull request #4284 from TTvanWillegen/master

UI: Added show logo option in dashboard settings [Issue #3544]

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

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

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

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

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

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

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

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

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

@@ -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, []]
       });

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

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

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

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

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

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