Browse Source

Refactor: navigate fullscreen dashboard logo via dynamic routerLink in anchor wrap.

pull/14057/head
deaflynx 1 year ago
parent
commit
e40c7bbe85
  1. 5
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
  2. 19
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

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

@ -74,8 +74,9 @@
{{'dashboard.states-short' | translate}} {{'dashboard.states-short' | translate}}
</button> </button>
</ng-container> </ng-container>
<img *ngIf="showDashboardLogo()" [src]="dashboardLogo | image | async" (click)="goHome()" <a *ngIf="showDashboardLogo()" [routerLink]="dashboardLogoLink" class="dashboard_logo pointer-events-auto">
aria-label="dashboard_logo" class="dashboard_logo pointer-events-auto cursor-pointer"/> <img [src]="dashboardLogo | image | async" aria-label="dashboard_logo" alt="Dashboard logo" class="h-full"/>
</a>
</div> </div>
<div class="tb-dashboard-action-panel"> <div class="tb-dashboard-action-panel">
<button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action" <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"

19
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 { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; 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 { UtilsService } from '@core/services/utils.service';
import { import {
BreakpointId, BreakpointId,
@ -157,6 +157,7 @@ import {
MoveWidgetsDialogResult MoveWidgetsDialogResult
} from '@home/components/dashboard-page/layout/move-widgets-dialog.component'; } from '@home/components/dashboard-page/layout/move-widgets-dialog.component';
import { HttpStatusCode } from '@angular/common/http'; import { HttpStatusCode } from '@angular/common/http';
import { AuthService } from '@core/auth/auth.service';
// @dynamic // @dynamic
@Component({ @Component({
@ -272,6 +273,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
{width: '100%', height: '100%', maxWidth: '100%', minWidth: '100%'}; {width: '100%', height: '100%', maxWidth: '100%', minWidth: '100%'};
rightLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'}; rightLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
dashboardLogoLink: string | UrlTree;
private dashboardLogoCache: SafeUrl; private dashboardLogoCache: SafeUrl;
private defaultDashboardLogo = 'assets/logo_title_white.svg'; private defaultDashboardLogo = 'assets/logo_title_white.svg';
@ -374,6 +377,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
private dialog: MatDialog, private dialog: MatDialog,
public translate: TranslateService, public translate: TranslateService,
private popoverService: TbPopoverService, private popoverService: TbPopoverService,
private authService: AuthService,
private renderer: Renderer2, private renderer: Renderer2,
private ngZone: NgZone, private ngZone: NgZone,
@Optional() @Inject('embeddedValue') private embeddedValue, @Optional() @Inject('embeddedValue') private embeddedValue,
@ -516,6 +520,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
this.layouts.right.layoutCtx.widgets = new LayoutWidgetsArray(this.dashboardCtx); this.layouts.right.layoutCtx.widgets = new LayoutWidgetsArray(this.dashboardCtx);
this.widgetEditMode = data.widgetEditMode; this.widgetEditMode = data.widgetEditMode;
this.singlePageMode = data.singlePageMode; this.singlePageMode = data.singlePageMode;
this.dashboardLogoLink = this.getDashboardLogoLink();
this.readonly = this.embedded || (this.singlePageMode && !this.widgetEditMode && !this.route.snapshot.queryParamMap.get('edit')) this.readonly = this.embedded || (this.singlePageMode && !this.widgetEditMode && !this.route.snapshot.queryParamMap.get('edit'))
|| this.forceFullscreen || this.isMobileApp || this.authUser.authority === Authority.CUSTOMER_USER || || this.forceFullscreen || this.isMobileApp || this.authUser.authority === Authority.CUSTOMER_USER ||
@ -1800,10 +1805,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
} }
goHome() {
this.router.navigate(['home']);
}
get showMainLayoutFiller(): boolean { get showMainLayoutFiller(): boolean {
const layoutMaxWidth = this.dashboardUtils.getBreakpointInfoById(this.layouts.main.layoutCtx.breakpoint)?.maxWidth || Infinity; const layoutMaxWidth = this.dashboardUtils.getBreakpointInfoById(this.layouts.main.layoutCtx.breakpoint)?.maxWidth || Infinity;
const dashboardMaxWidth = this.dashboardUtils.getBreakpointInfoById(this.dashboardCtx.breakpoint)?.maxWidth || Infinity; const dashboardMaxWidth = this.dashboardUtils.getBreakpointInfoById(this.dashboardCtx.breakpoint)?.maxWidth || Infinity;
@ -1830,4 +1831,12 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
return false; return false;
} }
private getDashboardLogoLink(): string | UrlTree {
if (this.authUser.isPublic) {
return this.dashboardService.getPublicDashboardLink(this.dashboard);
} else {
return this.authService.defaultUrl(true, this.authState);
}
}
} }

Loading…
Cancel
Save