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

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