diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html index 763ea35d09..60b2879dc1 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.html +++ b/demo-shell/src/app/components/app-layout/app-layout.component.html @@ -2,7 +2,7 @@ - +
diff --git a/docs/core/header.component.md b/docs/core/header.component.md index d3203299d6..fbd8a5ef55 100644 --- a/docs/core/header.component.md +++ b/docs/core/header.component.md @@ -5,7 +5,7 @@ Status: Experimental ## Header component -Reuseble header for Alfresco applications +Reusable header for Alfresco applications ## Basic usage @@ -13,6 +13,7 @@ Reuseble header for Alfresco applications @@ -27,8 +28,10 @@ Reuseble header for Alfresco applications | Name | Type | Description | | -- | -- | -- | | title | string | Title of the application -| logo | string| Path to an image file for the application logo. -| color | string | Primary color for the header +| logo | string | Path to an image file for the application logo. +| redirectUrl | string\|any[] | The router link for the application logo. +| tooltip | string | The tooltip text for the application logo. +| color | string | Background color for the header. It can be any hex color code or the Material theme colors: 'primary', 'accent' or 'warn'. | showSidenavToggle | boolean | Signals if the sidenav button will be displayed in the header or not. By default is true. ### Events diff --git a/lib/core/layout/components/header/header.component.html b/lib/core/layout/components/header/header.component.html index dec7d6b5dd..1f45245519 100644 --- a/lib/core/layout/components/header/header.component.html +++ b/lib/core/layout/components/header/header.component.html @@ -1,9 +1,11 @@ - + - + + + {{title}} diff --git a/lib/core/layout/components/header/header.component.spec.ts b/lib/core/layout/components/header/header.component.spec.ts index 1fa859cbda..daf94bb3d0 100644 --- a/lib/core/layout/components/header/header.component.spec.ts +++ b/lib/core/layout/components/header/header.component.spec.ts @@ -22,6 +22,7 @@ import { CoreTestingModule } from '../../../testing/core.testing.module'; import { By } from '@angular/platform-browser'; import { LayoutModule } from '../..'; import { Component } from '@angular/core'; +import { RouterTestingModule } from '@angular/router/testing'; import { MaterialModule } from './../../../material.module'; describe('HeaderLayoutComponent', () => { @@ -78,6 +79,22 @@ describe('HeaderLayoutComponent', () => { expect(src).toEqual('logo.png'); }); + it('should have custom url link set on logo when the redirectUrl is set', () => { + component.redirectUrl = '/customHomePage'; + fixture.detectChanges(); + + const logoAnchor = fixture.nativeElement.querySelector('mat-toolbar>a'); + expect(/\/customHomePage$/.test(logoAnchor.href)).toEqual(true); + }); + + it('should have custom tooltip text set on logo when the tooltip parameter is set', () => { + component.tooltip = 'logo title'; + fixture.detectChanges(); + + const logoAnchor = fixture.nativeElement.querySelector('mat-toolbar>a'); + expect(logoAnchor.title).toEqual('logo title'); + }); + it('test click on sidenav button', () => { component.showSidenavToggle = true; fixture.detectChanges(); @@ -117,7 +134,7 @@ describe('HeaderLayoutComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [HeaderLayoutTesterComponent], - imports: [ LayoutModule, MaterialModule ] + imports: [ LayoutModule, MaterialModule, RouterTestingModule ] }) .compileComponents(); })); diff --git a/lib/core/layout/components/header/header.component.ts b/lib/core/layout/components/header/header.component.ts index 701052603f..32a9bd44c1 100644 --- a/lib/core/layout/components/header/header.component.ts +++ b/lib/core/layout/components/header/header.component.ts @@ -26,6 +26,8 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } fro export class HeaderLayoutComponent implements OnInit { @Input() title: string; @Input() logo: string; + @Input() redirectUrl: string | any[] = '/'; + @Input() tooltip: string; @Input() color: string; @Input() showSidenavToggle: boolean = true; @Output() clicked = new EventEmitter(); diff --git a/lib/core/layout/layout.module.ts b/lib/core/layout/layout.module.ts index 22a696f809..5a66f0546b 100644 --- a/lib/core/layout/layout.module.ts +++ b/lib/core/layout/layout.module.ts @@ -17,6 +17,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { MaterialModule } from '../material.module'; import { SidenavLayoutContentDirective } from './directives/sidenav-layout-content.directive'; import { SidenavLayoutHeaderDirective } from './directives/sidenav-layout-header.directive'; @@ -29,7 +30,8 @@ import { HeaderLayoutComponent } from './components/header/header.component'; @NgModule({ imports: [ CommonModule, - MaterialModule + MaterialModule, + RouterModule ], exports: [ SidenavLayoutHeaderDirective,