mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4579] Layout - RTL support (#4741)
* 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
committed by
Eugenio Romano
Eugenio Romano
parent
f3e90298e6
commit
9cf6f5519c
@@ -0,0 +1,210 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { LayoutContainerComponent } from './layout-container.component';
|
||||
import { SimpleChange } from '@angular/core';
|
||||
|
||||
describe('LayoutContainerComponent', () => {
|
||||
let layoutContainerComponent: LayoutContainerComponent;
|
||||
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent = new LayoutContainerComponent();
|
||||
layoutContainerComponent.sidenavMin = 70;
|
||||
layoutContainerComponent.sidenavMax = 200;
|
||||
layoutContainerComponent.mediaQueryList = {
|
||||
matches: false,
|
||||
addListener: () => {},
|
||||
removeListener: () => {}
|
||||
};
|
||||
});
|
||||
|
||||
describe('OnInit', () => {
|
||||
describe('Sidenav expanded', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.expandedSidenav = true;
|
||||
});
|
||||
|
||||
describe('Sidenav [start] position', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.position = 'start';
|
||||
});
|
||||
|
||||
it('should set `margin-left` equal to sidenavMax when direction is `ltr`', () => {
|
||||
layoutContainerComponent.direction = 'ltr';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'compact', params: { 'margin-left': layoutContainerComponent.sidenavMax}
|
||||
});
|
||||
});
|
||||
|
||||
it('should set `margin-right` equal to sidenavMax when direction is `rtl`', () => {
|
||||
layoutContainerComponent.direction = 'rtl';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'compact', params: { 'margin-right': layoutContainerComponent.sidenavMax}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Sidenav [end] position', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.position = 'end';
|
||||
});
|
||||
|
||||
it('should set `margin-right` equal to sidenavMax when direction is `ltr`', () => {
|
||||
layoutContainerComponent.direction = 'ltr';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'compact', params: { 'margin-right': layoutContainerComponent.sidenavMax}
|
||||
});
|
||||
});
|
||||
|
||||
it('should set `margin-left` equal to sidenavMax when direction is `rtl`', () => {
|
||||
layoutContainerComponent.direction = 'rtl';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'compact', params: { 'margin-left': layoutContainerComponent.sidenavMax}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Sidenav compact', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.expandedSidenav = false;
|
||||
});
|
||||
|
||||
describe('Sidenav [start] position', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.position = 'start';
|
||||
});
|
||||
|
||||
it('should set `margin-left` equal to sidenavMin when direction is `ltr`', () => {
|
||||
layoutContainerComponent.direction = 'ltr';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'expanded', params: { 'margin-left': layoutContainerComponent.sidenavMin}
|
||||
});
|
||||
});
|
||||
|
||||
it('should set `margin-right` equal to sidenavMin when direction is `rtl`', () => {
|
||||
layoutContainerComponent.direction = 'rtl';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'expanded', params: { 'margin-right': layoutContainerComponent.sidenavMin}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Sidenav [end] position', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.position = 'end';
|
||||
});
|
||||
|
||||
it('should set `margin-right` equal to sidenavMin when direction is `ltr`', () => {
|
||||
layoutContainerComponent.direction = 'ltr';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'expanded', params: { 'margin-right': layoutContainerComponent.sidenavMin}
|
||||
});
|
||||
});
|
||||
|
||||
it('should set `margin-left` equal to sidenavMin when direction is `rtl`', () => {
|
||||
layoutContainerComponent.direction = 'rtl';
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState).toEqual({
|
||||
value: 'expanded', params: { 'margin-left': layoutContainerComponent.sidenavMin}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('OnChange direction', () => {
|
||||
describe('Sidenav [start] position', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.position = 'start';
|
||||
});
|
||||
|
||||
it('should set `margin-left` when current direction is `ltr`', () => {
|
||||
layoutContainerComponent.direction = 'ltr';
|
||||
layoutContainerComponent.ngOnChanges({ direction: new SimpleChange('', '', false) });
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState.params['margin-left']).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should set `margin-right` when current direction is `rtl`', () => {
|
||||
layoutContainerComponent.direction = 'rtl';
|
||||
layoutContainerComponent.ngOnChanges({ direction: new SimpleChange('', '', false) });
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState.params['margin-right']).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Sidenav [end] position', () => {
|
||||
beforeEach(() => {
|
||||
layoutContainerComponent.position = 'end';
|
||||
});
|
||||
|
||||
it('should set `margin-right` when current direction is `ltr`', () => {
|
||||
layoutContainerComponent.direction = 'ltr';
|
||||
layoutContainerComponent.ngOnChanges({ direction: new SimpleChange('', '', false) });
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState.params['margin-right']).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should set `margin-left` when current direction is `rtl`', () => {
|
||||
layoutContainerComponent.direction = 'rtl';
|
||||
layoutContainerComponent.ngOnChanges({ direction: new SimpleChange('', '', false) });
|
||||
|
||||
expect(layoutContainerComponent.contentAnimationState.params['margin-left']).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleMenu()', () => {
|
||||
it('should switch to sidenav to compact state', () => {
|
||||
layoutContainerComponent.expandedSidenav = true;
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
layoutContainerComponent.toggleMenu();
|
||||
|
||||
expect(layoutContainerComponent.sidenavAnimationState).toEqual({
|
||||
value: 'compact', params: { width: layoutContainerComponent.sidenavMin }
|
||||
});
|
||||
});
|
||||
|
||||
it('should switch to sidenav to expanded state', () => {
|
||||
layoutContainerComponent.expandedSidenav = false;
|
||||
layoutContainerComponent.ngOnInit();
|
||||
|
||||
layoutContainerComponent.toggleMenu();
|
||||
|
||||
expect(layoutContainerComponent.sidenavAnimationState).toEqual({
|
||||
value: 'expanded', params: { width: layoutContainerComponent.sidenavMax }
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user