[ACA-1264] Sidenav Layout - switch to ADF component (#265)

src/app/app.module.ts

@@ -65,12 +65,6 @@ import { ContentManagementService } from './common/services/content-management.s
 import { NodeActionsService } from './common/services/node-actions.service';
 import { MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule } from '@angular/material';
 
-import { LayoutContainerComponent } from './components/adf-layout/layout-container.component';
-import { SidenavLayoutComponent } from './components/adf-layout/sidenav-layout.component';
-import { AppLayoutHeaderDirective } from './components/adf-layout/app-layout-header.directive';
-import { AppLayoutNavigationDirective } from './components/adf-layout/app-layout-navigation.directive';
-import { AppLayoutContentDirective } from './components/adf-layout/app-layout-content.directive';
-
 @NgModule({
     imports: [
         BrowserModule,
@@ -94,11 +88,6 @@ import { AppLayoutContentDirective } from './components/adf-layout/app-layout-co
         GenericErrorComponent,
         LoginComponent,
         LayoutComponent,
-        LayoutContainerComponent,
-        SidenavLayoutComponent,
-        AppLayoutHeaderDirective,
-        AppLayoutNavigationDirective,
-        AppLayoutContentDirective,
         HeaderComponent,
         CurrentUserComponent,
         SearchComponent,

src/app/components/adf-layout/animations.ts

@@ -1,38 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { trigger, transition, animate, style, state } from '@angular/animations';
-
-export const sidenavAnimation = trigger('sidenavAnimation', [
-    state('expanded', style({ width: '{{ width }}px' }), { params : { width: 0 } }),
-    state('compact',  style({ width: '{{ width }}px' }), { params : { width: 0 } }),
-    transition('compact <=> expanded', animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)'))
-]);
-
-export const contentAnimation = trigger('contentAnimation', [
-    state('expanded', style({ 'margin-left': '{{ marginLeft }}px' }), { params : { marginLeft: 0 } }),
-    state('compact',  style({'margin-left': '{{ marginLeft }}px' }), { params : { marginLeft: 0 } }),
-    transition('expanded <=> compact', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
-]);

src/app/components/adf-layout/app-layout-content.directive.ts

@@ -1,31 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[appLayoutContent]'
-})
-export class AppLayoutContentDirective {}

src/app/components/adf-layout/app-layout-header.directive.ts

@@ -1,31 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[appLayoutHeader]'
-})
-export class AppLayoutHeaderDirective {}

src/app/components/adf-layout/app-layout-navigation.directive.ts

@@ -1,31 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[appLayoutNavigation]'
-})
-export class AppLayoutNavigationDirective {}

src/app/components/adf-layout/layout-container.component.html

@@ -1,13 +0,0 @@
-<mat-sidenav-container>
-    <mat-sidenav
-        [ngClass]="{ 'sidenav--hidden': hideSidenav }"
-        [@sidenavAnimation]="sidenavAnimationState"
-        [opened]="!isMobileScreenSize"
-        [mode]="isMobileScreenSize ? 'over' : 'side'">
-        <ng-content sidenav select="[app-layout-navigation]"></ng-content>
-    </mat-sidenav>
-
-    <mat-sidenav-content [@contentAnimation]="contentAnimationState">
-        <ng-content select="[app-layout-content]"></ng-content>
-    </mat-sidenav-content>
-</mat-sidenav-container>

src/app/components/adf-layout/layout-container.component.scss

@@ -1,37 +0,0 @@
-@import 'mixins';
-
-:host {
-    @include flex-column;
-}
-
-ng-content {
-    @include flex-column;
-}
-
-.sidenav--hidden {
-    visibility: hidden !important;
-    width: 0 !important;
-    transform: unset !important;
-    opacity: 0 !important;
-}
-
-.mat-sidenav-container {
-    @include flex-column;
-}
-
-.mat-sidenav-content {
-    @include flex-column;
-    overflow: auto;
-}
-
-.mat-sidenav {
-    overflow: hidden;
-}
-
-.mat-sidenav-content,
-.mat-drawer-transition .mat-drawer-content {
-    transform: unset !important;
-    transition-property: unset !important;
-    transition-duration: unset !important;
-    transition-timing-function: unset !important;
-}

src/app/components/adf-layout/layout-container.component.ts

@@ -1,113 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component, Input, ViewChild, OnInit, OnDestroy } from '@angular/core';
-import { MatSidenav } from '@angular/material';
-import { sidenavAnimation, contentAnimation } from './animations';
-
-@Component({
-    selector: 'app-layout-container',
-    templateUrl: './layout-container.component.html',
-    styleUrls: ['./layout-container.component.scss'],
-    animations: [ sidenavAnimation, contentAnimation ]
-})
-export class LayoutContainerComponent implements OnInit, OnDestroy {
-    @Input()
-    sidenavMin: number;
-
-    @Input()
-    sidenavMax: number;
-
-    @Input()
-    mediaQueryList: MediaQueryList;
-
-    @Input()
-    hideSidenav = false;
-
-    @ViewChild(MatSidenav) sidenav: MatSidenav;
-
-    sidenavAnimationState: any;
-    contentAnimationState: any;
-
-    SIDENAV_STATES = { EXPANDED: {}, COMPACT: {} };
-    CONTENT_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
-
-    constructor() {
-        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
-    }
-
-    ngOnInit() {
-        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: { marginLeft: 0 } };
-        this.CONTENT_STATES.EXPANDED = { value: 'expanded', params: { marginLeft: this.sidenavMin } };
-        this.CONTENT_STATES.COMPACT = { value: 'compact', params: { marginLeft: this.sidenavMax } };
-
-        this.mediaQueryList.addListener(this.onMediaQueryChange);
-
-        this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
-        this.contentAnimationState = this.isMobileScreenSize ? this.CONTENT_STATES.MOBILE : this.CONTENT_STATES.COMPACT;
-    }
-
-    ngOnDestroy(): void {
-        this.mediaQueryList.removeListener(this.onMediaQueryChange);
-    }
-
-    toggleMenu(): void {
-        if (this.isMobileScreenSize) {
-            this.sidenav.toggle();
-        } else {
-            this.sidenavAnimationState = this.toggledSidenavAnimation;
-            this.contentAnimationState = this.toggledContentAnimation;
-        }
-    }
-
-    private get toggledSidenavAnimation() {
-        return this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED
-            ? this.SIDENAV_STATES.COMPACT
-            : this.SIDENAV_STATES.EXPANDED;
-    }
-
-    private get toggledContentAnimation() {
-        if (this.isMobileScreenSize) {
-            return this.CONTENT_STATES.MOBILE;
-        }
-
-        if (this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED) {
-            return this.CONTENT_STATES.COMPACT;
-        } else {
-            return this.CONTENT_STATES.EXPANDED;
-        }
-    }
-
-    get isMobileScreenSize(): boolean {
-        return this.mediaQueryList.matches;
-    }
-
-    private onMediaQueryChange() {
-        this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
-        this.contentAnimationState = this.toggledContentAnimation;
-    }
-}

src/app/components/adf-layout/sidenav-layout.component.html

@@ -1,23 +0,0 @@
-<div class="sidenav-layout">
-    <ng-container *ngIf="!isHeaderInside">
-        <ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
-    </ng-container>
-
-    <app-layout-container #container
-        [sidenavMin]="sidenavMin"
-        [sidenavMax]="sidenavMax"
-        [mediaQueryList]="mediaQueryList"
-        [hideSidenav]="hideSidenav"
-        data-automation-id="adf-layout-container"
-        class="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>
-    </app-layout-container>
-</div>

src/app/components/adf-layout/sidenav-layout.component.scss

@@ -1,13 +0,0 @@
-@import 'mixins';
-
-:host {
-    @include flex-column;
-
-    .sidenav-layout {
-        @include flex-column;
-    }
-
-    router-outlet {
-        flex: 0 0;
-    }
-}

src/app/components/adf-layout/sidenav-layout.component.spec.ts

@@ -1,269 +0,0 @@
-/*!
- * @license
- * Copyright 2016 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.
- */
-
-/*tslint:disable: ban*/
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { SidenavLayoutComponent } from './sidenav-layout.component';
-import { Component, Input } from '@angular/core';
-import { LayoutModule, MediaMatcher } from '@angular/cdk/layout';
-import { PlatformModule } from '@angular/cdk/platform';
-import { AppLayoutNavigationDirective } from './app-layout-navigation.directive';
-import { AppLayoutHeaderDirective } from './app-layout-header.directive';
-import { AppLayoutContentDirective } from './app-layout-content.directive';
-import { CommonModule } from '@angular/common';
-
-@Component({
-    selector: 'app-layout-container',
-    template: `
-        <ng-content select="[app-layout-navigation]"></ng-content>
-        <ng-content select="[app-layout-content]"></ng-content>`
-})
-export class DummyLayoutContainerComponent {
-    @Input() sidenavMin: number;
-    @Input() sidenavMax: number;
-    @Input() mediaQueryList: MediaQueryList;
-    @Input() hideSidenav: boolean;
-    toggleMenu () {}
-}
-
-describe('SidenavLayoutComponent', () => {
-
-    let fixture: ComponentFixture<any>,
-        mediaMatcher: MediaMatcher,
-        mediaQueryList: any;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                CommonModule,
-                PlatformModule,
-                LayoutModule
-            ],
-            declarations: [
-                DummyLayoutContainerComponent,
-                SidenavLayoutComponent,
-                AppLayoutNavigationDirective,
-                AppLayoutHeaderDirective,
-                AppLayoutContentDirective
-            ],
-            providers: [
-                MediaMatcher
-            ]
-        });
-    }));
-
-    beforeEach(() => {
-        mediaQueryList = {
-            matches: false,
-            addListener: () => {},
-            removeListener: () => {}
-        };
-    });
-
-    afterEach(() => {
-        fixture.destroy();
-        TestBed.resetTestingModule();
-    });
-
-    describe('Template transclusion', () => {
-
-        @Component({
-            selector: 'app-test-component-for-sidenav',
-            template: `
-            <app-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
-
-                <ng-template appLayoutHeader let-toggleMenu="toggleMenu">
-                    <div id="header-test" (click)="toggleMenu()"></div>
-                </ng-template>
-
-                <ng-template appLayoutNavigation let-isMenuMinimized="isMenuMinimized">
-                    <div id="nav-test">{{ isMenuMinimized !== undefined ? 'variable-is-injected' : 'variable-is-not-injected' }}</div>
-                </ng-template>
-
-                <ng-template appLayoutContent>
-                    <div id="content-test"></div>
-                </ng-template>
-            </app-sidenav-layout>`
-        })
-        class SidenavLayoutTesterComponent {}
-
-        beforeEach(async(() => {
-            TestBed.configureTestingModule({ declarations: [ SidenavLayoutTesterComponent ] }).compileComponents();
-        }));
-
-        beforeEach(() => {
-            mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
-
-            fixture = TestBed.createComponent(SidenavLayoutTesterComponent);
-            fixture.detectChanges();
-        });
-
-        describe('appLayoutNavigation', () => {
-
-            const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #nav-test');
-
-            it('should contain the transcluded side navigation template', () => {
-                const injectedElement = fixture.debugElement.query(injectedElementSelector);
-
-                expect(injectedElement === null).toBe(false);
-            });
-
-            it('should let the isMenuMinimized property of component to be accessed by the transcluded template', () => {
-                const injectedElement = fixture.debugElement.query(injectedElementSelector);
-
-                expect(injectedElement.nativeElement.innerText.trim()).toBe('variable-is-injected');
-            });
-        });
-
-        describe('appLayoutHeader', () => {
-
-            const outerHeaderSelector = By.css('.sidenav-layout > #header-test'),
-                innerHeaderSelector = By.css('.sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
-
-            it('should contain the transcluded header template outside of the layout-container', () => {
-                mediaQueryList.matches = false;
-                fixture.detectChanges();
-                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
-                const innerHeaderElement = fixture.debugElement.query(innerHeaderSelector);
-
-                expect(outerHeaderElement === null).toBe(false, 'Outer header should be shown');
-                expect(innerHeaderElement === null).toBe(true, 'Inner header should not be shown');
-            });
-
-            it('should contain the transcluded header template inside of the layout-container', () => {
-                mediaQueryList.matches = true;
-                fixture.detectChanges();
-                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
-                const innerHeaderElement = fixture.debugElement.query(innerHeaderSelector);
-
-                expect(outerHeaderElement === null).toBe(true, 'Outer header should not be shown');
-                expect(innerHeaderElement === null).toBe(false, 'Inner header should be shown');
-            });
-
-            it('should call through the layout container\'s toggleMenu method', () => {
-                mediaQueryList.matches = false;
-                fixture.detectChanges();
-                const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
-                spyOn(layoutContainerComponent, 'toggleMenu');
-
-                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
-                outerHeaderElement.triggerEventHandler('click', {});
-
-                expect(layoutContainerComponent.toggleMenu).toHaveBeenCalled();
-            });
-        });
-
-        describe('appLayoutContent', () => {
-
-            const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #content-test');
-
-            it('should contain the transcluded content template', () => {
-                const injectedElement = fixture.debugElement.query(injectedElementSelector);
-
-                expect(injectedElement === null).toBe(false);
-            });
-        });
-    });
-
-    describe('General behaviour', () => {
-
-        let component: SidenavLayoutComponent;
-
-        beforeEach(async(() => {
-            TestBed.compileComponents();
-        }));
-
-        beforeEach(() => {
-            mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.callFake((mediaQuery) => {
-                mediaQueryList.originalMediaQueryPassed = mediaQuery;
-                spyOn(mediaQueryList, 'addListener').and.stub();
-                spyOn(mediaQueryList, 'removeListener').and.stub();
-                return mediaQueryList;
-            });
-
-            fixture = TestBed.createComponent(SidenavLayoutComponent);
-            component = fixture.componentInstance;
-            fixture.detectChanges();
-        });
-
-        it('should pass through input parameters', () => {
-            component.sidenavMin = 1;
-            component.sidenavMax = 2;
-            component.hideSidenav = true;
-            fixture.detectChanges();
-
-            const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
-
-            expect(layoutContainerComponent.sidenavMin).toBe(component.sidenavMin);
-            expect(layoutContainerComponent.sidenavMax).toBe(component.sidenavMax);
-            expect(layoutContainerComponent.hideSidenav).toBe(component.hideSidenav);
-            expect(layoutContainerComponent.mediaQueryList.originalMediaQueryPassed).toBe(`(max-width: 600px)`);
-        });
-
-        it('addListener of mediaQueryList should have been called', () => {
-            expect(mediaQueryList.addListener).toHaveBeenCalledTimes(1);
-            expect(mediaQueryList.addListener).toHaveBeenCalledWith(component.onMediaQueryChange);
-        });
-
-        it('addListener of mediaQueryList should have been called', () => {
-            fixture.destroy();
-
-            expect(mediaQueryList.removeListener).toHaveBeenCalledTimes(1);
-            expect(mediaQueryList.removeListener).toHaveBeenCalledWith(component.onMediaQueryChange);
-        });
-    });
-
-    describe('toggleMenu', () => {
-
-        let component;
-
-        beforeEach(async(() => {
-            TestBed.compileComponents();
-        }));
-
-        beforeEach(() => {
-            mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
-
-            fixture = TestBed.createComponent(SidenavLayoutComponent);
-            component = fixture.componentInstance;
-            fixture.detectChanges();
-        });
-
-        it('should toggle the isMenuMinimized if the mediaQueryList.matches is false (we are on desktop)', () => {
-            mediaQueryList.matches = false;
-            component.isMenuMinimized = false;
-
-            component.toggleMenu();
-
-            expect(component.isMenuMinimized).toBe(true);
-        });
-
-        it('should set the isMenuMinimized to false if the mediaQueryList.matches is true (we are on mobile)', () => {
-            mediaQueryList.matches = true;
-            component.isMenuMinimized = true;
-
-            component.toggleMenu();
-
-            expect(component.isMenuMinimized).toBe(false);
-        });
-    });
-});

src/app/components/adf-layout/sidenav-layout.component.ts

@@ -1,107 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component, ContentChild, Input, OnInit, TemplateRef, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
-import { MediaMatcher } from '@angular/cdk/layout';
-import { AppLayoutHeaderDirective } from './app-layout-header.directive';
-import { AppLayoutNavigationDirective } from './app-layout-navigation.directive';
-import { AppLayoutContentDirective } from './app-layout-content.directive';
-
-@Component({
-    selector: 'app-sidenav-layout',
-    templateUrl: './sidenav-layout.component.html',
-    styleUrls: ['./sidenav-layout.component.scss']
-})
-export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
-
-    static STEP_OVER = 600;
-
-    @Input()
-    sidenavMin: number;
-
-    @Input()
-    sidenavMax: number;
-
-    @Input()
-    stepOver: number;
-
-    @Input()
-    hideSidenav = false;
-
-    @ContentChild(AppLayoutHeaderDirective, {read: TemplateRef})
-    headerTemplate: TemplateRef<any>;
-
-    @ContentChild(AppLayoutNavigationDirective, {read: TemplateRef})
-    navigationTemplate: TemplateRef<any>;
-
-    @ContentChild(AppLayoutContentDirective, {read: TemplateRef})
-    contentTemplate: TemplateRef<any>;
-
-    @ViewChild('container')
-    container: any;
-
-    mediaQueryList: MediaQueryList;
-    isMenuMinimized = false;
-    templateContext = {
-        toggleMenu: () => {},
-        isMenuMinimized: () => this.isMenuMinimized
-    };
-
-    constructor(private mediaMatcher: MediaMatcher) {
-        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
-    }
-
-    ngOnInit() {
-        const stepOver = this.stepOver || SidenavLayoutComponent.STEP_OVER;
-        this.mediaQueryList = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`);
-        this.mediaQueryList.addListener(this.onMediaQueryChange);
-    }
-
-    ngAfterViewInit() {
-        this.templateContext.toggleMenu = this.toggleMenu.bind(this);
-    }
-
-    ngOnDestroy(): void {
-        this.mediaQueryList.removeListener(this.onMediaQueryChange);
-    }
-
-    toggleMenu() {
-        if (!this.mediaQueryList.matches) {
-            this.isMenuMinimized = !this.isMenuMinimized;
-        } else {
-            this.isMenuMinimized = false;
-        }
-
-        this.container.toggleMenu();
-    }
-
-    get isHeaderInside() {
-        return this.mediaQueryList.matches;
-    }
-
-    onMediaQueryChange() {
-        this.isMenuMinimized = false;
-    }
-}

src/app/components/layout/layout.component.html

@@ -3,25 +3,35 @@
         [parentId]="node?.id"
         [disabled]="!canCreateContent(node)">
 
-        <app-sidenav-layout
+        <adf-sidenav-layout
             [sidenavMin]="70"
             [sidenavMax]="320"
             [stepOver]="600"
-            [hideSidenav]="isPreview">
+            [hideSidenav]="isPreview"
+            [expandedSidenav]="true">
 
-            <ng-template appLayoutHeader let-toggleMenu="toggleMenu">
+            <adf-sidenav-layout-header>
-                <app-header (menu)="toggleMenu()"></app-header>
+                <ng-template let-toggleMenu="toggleMenu">
-            </ng-template>
 
-            <ng-template appLayoutNavigation let-isMenuMinimized="isMenuMinimized">
+                        <app-header (menu)="toggleMenu()"></app-header>
-                <app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
-            </ng-template>
 
-            <ng-template appLayoutContent>
+                </ng-template>
-                <router-outlet></router-outlet>
+            </adf-sidenav-layout-header>
-            </ng-template>
+
-        </app-sidenav-layout>
+            <adf-sidenav-layout-navigation>
+                <ng-template let-isMenuMinimized="isMenuMinimized">
+                    <app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
+                </ng-template>
+            </adf-sidenav-layout-navigation>
+
+            <adf-sidenav-layout-content>
+                <ng-template>
+                    <router-outlet></router-outlet>
+                </ng-template>
+            </adf-sidenav-layout-content>
+
+        </adf-sidenav-layout>
 
         <adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
     </adf-upload-drag-area>
-</div>
+</div>

src/app/ui/application.scss

@@ -20,6 +20,7 @@ ng-component {
 @import 'layout';
 
 @import './overrides/adf-login';
+@import './overrides/adf-sidenav-layout';
 @import './overrides/alfresco-document-list';
 @import './overrides/alfresco-upload-drag-area';
 @import './overrides/alfresco-upload-button';

src/app/ui/overrides/_adf-sidenav-layout.scss

@@ -0,0 +1,8 @@
+@import 'mixins';
+
+adf-sidenav-layout {
+    .mat-drawer-content {
+        @include flex-column;
+        overflow: auto;
+    }
+}