[ADF-3358][ADF-3359][ADF-3360] Logo link and tooltip and hex colors (#3648)

* [ADF-3358] link on logo

* [ADF-3358] test link on logo

* [ADF-3360] tooltip on logo

* [ADF-3360] update logo docs

* [ADF-3359] allow hex color codes for the background color

* [ADF-3358] better name for property
This commit is contained in:
Suzana Dirla
2018-08-03 17:02:39 +03:00
committed by Eugenio Romano
parent 70605c8982
commit 8d8ab1e682
6 changed files with 34 additions and 8 deletions

View File

@@ -1,9 +1,11 @@
<mat-toolbar color="{{color}}">
<mat-toolbar color="{{color}}" [style.background-color]="color">
<button *ngIf="showSidenavToggle" data-automation-id="adf-menu-icon" class="mat-icon-button adf-menu-icon" mat-icon-button (click)="toggleMenu()">
<mat-icon class="mat-icon material-icon" role="img" aria-hidden="true">menu</mat-icon>
</button>
<img src="{{logo}}" class="adf-app-logo">
<a [routerLink]="redirectUrl" title="{{ tooltip }}">
<img src="{{logo}}" class="adf-app-logo" />
</a>
<span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true" class="adf-app-title">{{title}}</span>
<ng-content></ng-content>

View File

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

View File

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