Merge pull request #14057 from deaflynx/feature/dashboard-tb-logo-as-navigate-home

Refactor tb-logo as a link in login, fullscreen dashboard, menu

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

@@ -73,9 +73,8 @@
               <mat-icon>layers</mat-icon>
               {{'dashboard.states-short' | translate}}
             </button>
-        </ng-container>
+          </ng-container>
-          <img *ngIf="showDashboardLogo()" [src]="dashboardLogo | image | async"
+          <tb-logo *ngIf="showDashboardLogo()" [link]="dashboardLogoLink" [src]="dashboardLogo | image | async" class="dashboard_logo"></tb-logo>
-               aria-label="dashboard_logo" class="dashboard_logo"/>
         </div>
         <div class="tb-dashboard-action-panel">
           <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"

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

@@ -38,7 +38,7 @@ import {
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, UrlTree } from '@angular/router';
 import { UtilsService } from '@core/services/utils.service';
 import {
   BreakpointId,
@@ -272,6 +272,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     {width: '100%', height: '100%', maxWidth: '100%', minWidth: '100%'};
   rightLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
 
+  dashboardLogoLink = this.getDashboardLogoLink();
+
   private dashboardLogoCache: SafeUrl;
   private defaultDashboardLogo = 'assets/logo_title_white.svg';
 
@@ -1826,4 +1828,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
     return false;
   }
+
+  private getDashboardLogoLink(): UrlTree {
+    return this.forceFullscreen ? null : this.router.createUrlTree([], {relativeTo: this.route});
+  }
 }

ui-ngx/src/app/modules/home/home.component.html

@@ -24,8 +24,7 @@
     <header class="tb-nav-header">
       <mat-toolbar color="primary" class="tb-nav-header-toolbar">
         <div class="flex flex-auto">
-          <img [src]="logo"
+          <tb-logo [src]="logo" class="tb-logo-title"></tb-logo>
-               aria-label="logo" class="tb-logo-title"/>
         </div>
       </mat-toolbar>
     </header>

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -21,7 +21,7 @@
       <form class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
         <fieldset class="flex flex-col">
           <div class="flex flex-col items-center justify-start" style="padding: 15px 0;">
-            <tb-logo class="login-logo"></tb-logo>
+            <tb-logo link="https://thingsboard.io" target="_blank" class="login-logo"></tb-logo>
           </div>
           <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
           </mat-progress-bar>

ui-ngx/src/app/shared/components/logo.component.html

@@ -15,5 +15,17 @@
     limitations under the License.
 
 -->
-<img (click)="gotoThingsboard()" [src]="logo"
+@if (isExternal) {
-         aria-label="logo" class="tb-logo-title flex-1"/>
+  <a [href]="link" [target]="target">
+    <ng-container *ngTemplateOutlet="logo"></ng-container>
+  </a>
+} @else {
+  <a [routerLink]="link" [target]="target">
+    <ng-container *ngTemplateOutlet="logo"></ng-container>
+  </a>
+}
+
+<ng-template #logo>
+  <img [src]="src" aria-label="logo" alt="Logo"/>
+</ng-template>
+

ui-ngx/src/app/shared/components/logo.component.scss

@@ -13,12 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+:host {
+  pointer-events: auto;
+  a {
+    border: none;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 :host-context(.login-logo) {
-  img.tb-logo-title {
+  width: 280px;
-    width: 280px;
+  height: 60px;
-    height: 60px;
+  a {
     text-decoration: none;
-    cursor: pointer;
     border: none;
     transform: none;
 

ui-ngx/src/app/shared/components/logo.component.ts

@@ -14,19 +14,43 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { AuthService } from '@core/auth/auth.service';
+import { AppState } from '@core/core.state';
+import { Store } from '@ngrx/store';
+import { UrlTree } from '@angular/router';
+import { getCurrentAuthState } from '@core/auth/auth.selectors';
+import { UrlHolder } from '@shared/pipe/image.pipe';
 
 @Component({
   selector: 'tb-logo',
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.scss']
 })
-export class LogoComponent {
+export class LogoComponent implements OnInit {
 
-  logo = 'assets/logo_title_white.svg';
+  @Input()
+  src: string | UrlHolder = 'assets/logo_title_white.svg';
 
-  gotoThingsboard(): void {
+  @Input()
-    window.open('https://thingsboard.io', '_blank');
+  link: string | UrlTree;
+
+  @Input()
+  target: string = null;
+
+  isExternal = false;
+
+  constructor(private authService: AuthService,
+              private store: Store<AppState>) {
   }
 
+  ngOnInit() {
+    if (!this.link) {
+      const authState = getCurrentAuthState(this.store);
+      this.link = this.authService.defaultUrl(true, authState);
+    }
+    if (typeof this.link === 'string' && this.link.startsWith('http')) {
+      this.isExternal = true;
+    }
+  }
 }