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-4227] Sidenav Layout - support direction (#4583)

Browse Source 
* basic ui direction service

* direction property

* demo shell integration

* move the direction in up sidenav layout to allow also the header to reorganize
use the configuration editor to change rtl ltr
add documenation

* Update app.component.html

* fix unit tests

* fix overlay viewer e2e

* fix e2e
This commit is contained in:
Cilibiu Bogdan
2019-04-25 02:48:41 +03:00
committed by Eugenio Romano
parent 83cb98f435
commit 3b83539b13
13 changed files with 124 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

11
lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

@@ -2,6 +2,17 @@
$adf-sidenav-max: 300px !default;
.adf-sidenav-layout {
&-full-space {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
width: 100%;
}
@include flex-column;
width: 100%;

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

@@ -144,8 +144,8 @@ describe('SidenavLayoutComponent', () => {
describe('adf-sidenav-layout-header', () => {
const outerHeaderSelector = By.css('.adf-sidenav-layout > #header-test'),
innerHeaderSelector = By.css('.adf-sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
const outerHeaderSelector = By.css('.adf-sidenav-layout-full-space > #header-test');
const innerHeaderSelector = By.css('.adf-layout__content > #header-test');
it('should contain the transcluded header template outside of the layout-container', () => {
mediaQueryList.matches = false;

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

@@ -42,9 +42,11 @@ import { BehaviorSubject, Observable } from 'rxjs';
host: { class: 'adf-sidenav-layout' }
})
export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
static STEP_OVER = 600;
/** The direction of the layout. 'ltr' or 'rtl' */
@Input() direction = 'ltr';
/** The side that the drawer is attached to. Possible values are 'start' and 'end'. */
@Input() position = 'start';