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-4579] Layout - RTL support (#4741)

Browse Source 
* single contentAnimation state

* fine tune contentAnimation state based on direction and position

* tets

* fix mock component inputs

* use native direction attribute

* update docs

* pass direction to calculate sidenav layout

* update test

* fix unit test

* remove dialogs directionality workaround

* set document directionality service

* remove context menu direction workaround

* remove unneeded dependencies

* remove direction style workaround

* remove permission icon direction

* remove sidenav layout direction attribute

* update docs

* update sidenav layout direction

* test

* remove document type

* update test dependencies

* clear storage before test

* test

* fix dl gap

* try to fix Uncaught QuotaExceededError

* fix QuotaExceededError

* fix tests

* fix tests
This commit is contained in:
Cilibiu Bogdan
2019-05-29 18:17:13 +03:00
committed by Eugenio Romano
parent f3e90298e6
commit 9cf6f5519c
25 changed files with 386 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,18 +15,19 @@
* limitations under the License.
*/
import { Component, Input, ViewChild, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { Component, Input, ViewChild, OnInit, OnDestroy, ViewEncapsulation, OnChanges } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { sidenavAnimation, contentAnimationLeft, contentAnimationRight } from '../../helpers/animations';
import { sidenavAnimation, contentAnimation } from '../../helpers/animations';
import { Direction } from '@angular/cdk/bidi';
@Component({
selector: 'adf-layout-container',
templateUrl: './layout-container.component.html',
styleUrls: ['./layout-container.component.scss'],
encapsulation: ViewEncapsulation.None,
animations: [sidenavAnimation, contentAnimationLeft, contentAnimationRight]
animations: [sidenavAnimation, contentAnimation]
})
export class LayoutContainerComponent implements OnInit, OnDestroy {
export class LayoutContainerComponent implements OnInit, OnDestroy, OnChanges {
@Input() sidenavMin: number;
@Input() sidenavMax: number;
@@ -39,6 +40,9 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
/** The side that the drawer is attached to 'start' | 'end' page */
@Input() position = 'start';
/** Layout text orientation 'ltr' | 'rtl' */
@Input() direction: Direction = 'ltr';
@ViewChild(MatSidenav) sidenav: MatSidenav;
sidenavAnimationState: any;
@@ -56,9 +60,7 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
this.SIDENAV_STATES.EXPANDED = { value: 'expanded', params: { width: this.sidenavMax } };
this.SIDENAV_STATES.COMPACT = { value: 'compact', params: { width: this.sidenavMin } };
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.CONTENT_STATES.MOBILE = { value: 'expanded' };
this.mediaQueryList.addListener(this.onMediaQueryChange);
@@ -67,10 +69,10 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
this.contentAnimationState = this.CONTENT_STATES.MOBILE;
} else if (this.expandedSidenav) {
this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
this.contentAnimationState = this.CONTENT_STATES.COMPACT;
this.contentAnimationState = this.toggledContentAnimation;
} else {
this.sidenavAnimationState = this.SIDENAV_STATES.COMPACT;
this.contentAnimationState = this.CONTENT_STATES.EXPANDED;
this.contentAnimationState = this.toggledContentAnimation;
}
}
@@ -78,6 +80,12 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
this.mediaQueryList.removeListener(this.onMediaQueryChange);
}
ngOnChanges(changes) {
if (changes && changes.direction) {
this.contentAnimationState = this.toggledContentAnimation;
}
}
toggleMenu(): void {
if (this.isMobileScreenSize) {
this.sidenav.toggle();
@@ -87,6 +95,14 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
}
}
get isMobileScreenSize(): boolean {
return this.mediaQueryList.matches;
}
getContentAnimationState() {
return this.contentAnimationState;
}
private get toggledSidenavAnimation() {
return this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED
? this.SIDENAV_STATES.COMPACT
@@ -99,35 +115,43 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
}
if (this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED) {
return this.CONTENT_STATES.COMPACT;
} else {
return this.CONTENT_STATES.EXPANDED;
}
}
if (this.position === 'start' && this.direction === 'ltr') {
return { value: 'compact', params: { 'margin-left': this.sidenavMax } };
}
get isMobileScreenSize(): boolean {
return this.mediaQueryList.matches;
if (this.position === 'start' && this.direction === 'rtl') {
return { value: 'compact', params: { 'margin-right': this.sidenavMax } };
}
if (this.position === 'end' && this.direction === 'ltr') {
return { value: 'compact', params: { 'margin-right': this.sidenavMax } };
}
if (this.position === 'end' && this.direction === 'rtl') {
return { value: 'compact', params: { 'margin-left': this.sidenavMax } };
}
} else {
if (this.position === 'start' && this.direction === 'ltr') {
return { value: 'expanded', params: { 'margin-left': this.sidenavMin } };
}
if (this.position === 'start' && this.direction === 'rtl') {
return { value: 'expanded', params: { 'margin-right': this.sidenavMin } };
}
if (this.position === 'end' && this.direction === 'ltr') {
return { value: 'expanded', params: { 'margin-right': this.sidenavMin } };
}
if (this.position === 'end' && this.direction === 'rtl') {
return { value: 'expanded', params: { 'margin-left': this.sidenavMin } };
}
}
}
private onMediaQueryChange() {
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 } };
}
}
}