inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3512] SidenavLayoutComponent option to show the sidebar on the right (#3768)

Browse Source 
* add sidebar end start property

* add demo and test

* fix test

* fix failing test
This commit is contained in:
Eugenio Romano
2018-09-12 10:02:24 +01:00
committed by GitHub
parent 3d5da1e622
commit cc396e2a11
16 changed files with 186 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/core/layout/components/header/header.component.html
View File

@@ -1,13 +1,20 @@
<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()">
<button *ngIf="showSidenavToggle && position === 'start'" id="adf-sidebar-toggle-start" 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>
<a [routerLink]="redirectUrl" title="{{ tooltip }}">
<img src="{{logo}}" class="adf-app-logo" />
<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>
<button *ngIf="showSidenavToggle && position === 'end'" id="adf-sidebar-toggle-end" 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>
</mat-toolbar>

22
lib/core/layout/components/header/header.component.spec.ts
View File

@@ -114,13 +114,33 @@ describe('HeaderLayoutComponent', () => {
expect(button === null).toBeFalsy();
});
it('if showSidenavToggle is false the button menu should not be displayed', () => {
it('if showSidenavToggle is false the button menu should not be displayed', () => {
component.showSidenavToggle = false;
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('.adf-menu-icon');
expect(button === null).toBeTruthy();
});
it('if position is end the button menu should be at the end', () => {
component.position = 'end';
fixture.detectChanges();
const buttonStart = fixture.nativeElement.querySelector('#adf-sidebar-toggle-start');
const buttonEnd = fixture.nativeElement.querySelector('#adf-sidebar-toggle-end');
expect(buttonStart === null).toBeTruthy();
expect(buttonEnd === null).toBeFalsy();
});
it('if position is start the button menu should be at the start', () => {
component.position = 'start';
fixture.detectChanges();
const buttonStart = fixture.nativeElement.querySelector('#adf-sidebar-toggle-start');
const buttonEnd = fixture.nativeElement.querySelector('#adf-sidebar-toggle-end');
expect(buttonStart === null).toBeFalsy();
expect(buttonEnd === null).toBeTruthy();
});
});
describe('Template tranclusion', () => {

3
lib/core/layout/components/header/header.component.ts
View File

@@ -32,6 +32,9 @@ export class HeaderLayoutComponent implements OnInit {
@Input() showSidenavToggle: boolean = true;
@Output() clicked = new EventEmitter<any>();
/** The side that the drawer is attached to 'start' | 'end' page */
@Input() position = 'start';
toggleMenu() {
this.clicked.emit(true);
}