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

3
lib/core/layout/components/layout-container/layout-container.component.html
View File

@@ -1,5 +1,6 @@
<mat-sidenav-container>
<mat-sidenav
[position]="position"
[disableClose]="!isMobileScreenSize"
[ngClass]="{ 'sidenav--hidden': hideSidenav }"
[@sidenavAnimation]="sidenavAnimationState"
@@ -9,7 +10,7 @@
</mat-sidenav>
<div>
<div [@contentAnimation]="contentAnimationState">
<div [@contentAnimationLeft]="getContentAnimationStateLeft()" [@contentAnimationRight]="getContentAnimationStateRight()">
<ng-content select="[app-layout-content]"></ng-content>
</div>
</div>

32
lib/core/layout/components/layout-container/layout-container.component.ts
View File

@@ -17,14 +17,14 @@
import { Component, Input, ViewChild, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { sidenavAnimation, contentAnimation } from '../../helpers/animations';
import { sidenavAnimation, contentAnimationLeft, contentAnimationRight } from '../../helpers/animations';
@Component({
selector: 'adf-layout-container',
templateUrl: './layout-container.component.html',
styleUrls: ['./layout-container.component.scss'],
encapsulation: ViewEncapsulation.None,
animations: [ sidenavAnimation, contentAnimation ]
animations: [sidenavAnimation, contentAnimationLeft, contentAnimationRight]
})
export class LayoutContainerComponent implements OnInit, OnDestroy {
@Input() sidenavMin: number;
@@ -36,6 +36,9 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
@Input() hideSidenav = false;
@Input() expandedSidenav = true;
/** The side that the drawer is attached to 'start' | 'end' page */
@Input() position = 'start';
@ViewChild(MatSidenav) sidenav: MatSidenav;
sidenavAnimationState: any;
@@ -51,11 +54,11 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
ngOnInit() {
this.SIDENAV_STATES.MOBILE = { value: 'expanded', params: { width: this.sidenavMax } };
this.SIDENAV_STATES.EXPANDED = { value: 'expanded', params: { width: this.sidenavMax } };
this.SIDENAV_STATES.COMPACT = { value: 'compact', params: {width: this.sidenavMin } };
this.SIDENAV_STATES.COMPACT = { value: 'compact', params: { width: this.sidenavMin } };
this.CONTENT_STATES.MOBILE = { value: 'expanded', params: { marginLeft: 0 } };
this.CONTENT_STATES.EXPANDED = { value: 'expanded', params: { marginLeft: this.sidenavMin } };
this.CONTENT_STATES.COMPACT = { value: 'compact', params: { marginLeft: this.sidenavMax } };
this.CONTENT_STATES.MOBILE = { value: 'expanded', params: { margin: 0 } };
this.CONTENT_STATES.EXPANDED = { value: 'expanded', params: { margin: this.sidenavMin } };
this.CONTENT_STATES.COMPACT = { value: 'compact', params: { margin: this.sidenavMax } };
this.mediaQueryList.addListener(this.onMediaQueryChange);
@@ -110,4 +113,21 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
this.contentAnimationState = this.toggledContentAnimation;
}
getContentAnimationStateLeft() {
if (this.position === 'start') {
return this.contentAnimationState;
} else {
return { value: 'compact', params: { width: this.sidenavMin } };
}
}
getContentAnimationStateRight() {
if (this.position === 'end') {
return this.contentAnimationState;
} else {
return { value: 'compact', params: { width: this.sidenavMin } };
}
}
}

21
lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
View File

@@ -1,18 +1,21 @@
<div class="sidenav-layout">
<ng-container *ngIf="!isHeaderInside">
<ng-container class="adf-sidenav-layout-outer-header" *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
<ng-container class="adf-sidenav-layout-outer-header"
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
</ng-container>
<adf-layout-container #container
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
[mediaQueryList]="mediaQueryList"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
data-automation-id="adf-layout-container"
class="layout__content">
[position]="position"
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
[mediaQueryList]="mediaQueryList"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
data-automation-id="adf-layout-container"
class="layout__content">
<ng-container app-layout-navigation *ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
<ng-container app-layout-navigation
*ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
<ng-container app-layout-content>
<ng-container *ngIf="isHeaderInside">

1
lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
View File

@@ -38,6 +38,7 @@ import { CommonModule } from '@angular/common';
export class DummyLayoutContainerComponent {
@Input() sidenavMin: number;
@Input() sidenavMax: number;
@Input() position: string;
@Input() mediaQueryList: MediaQueryList;
@Input() hideSidenav: boolean;
@Input() expandedSidenav: boolean;

3
lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
View File

@@ -31,6 +31,9 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
static STEP_OVER = 600;
/** The side that the drawer is attached to 'start' | 'end' page */
@Input() position = 'start';
@Input() sidenavMin: number;
@Input() sidenavMax: number;
@Input() stepOver: number;