From 9f3bfdad4f05eef3ef2efb385c800d9229f93b21 Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Thu, 29 Mar 2018 13:14:40 +0300 Subject: [PATCH] [ACA-1264] Sidenav Layout - switch to ADF component (#265) --- src/app/app.module.ts | 11 - src/app/components/adf-layout/animations.ts | 38 --- .../app-layout-content.directive.ts | 31 -- .../adf-layout/app-layout-header.directive.ts | 31 -- .../app-layout-navigation.directive.ts | 31 -- .../layout-container.component.html | 13 - .../layout-container.component.scss | 37 --- .../adf-layout/layout-container.component.ts | 113 -------- .../adf-layout/sidenav-layout.component.html | 23 -- .../adf-layout/sidenav-layout.component.scss | 13 - .../sidenav-layout.component.spec.ts | 269 ------------------ .../adf-layout/sidenav-layout.component.ts | 107 ------- .../components/layout/layout.component.html | 36 ++- src/app/ui/application.scss | 1 + src/app/ui/overrides/_adf-sidenav-layout.scss | 8 + 15 files changed, 32 insertions(+), 730 deletions(-) delete mode 100644 src/app/components/adf-layout/animations.ts delete mode 100644 src/app/components/adf-layout/app-layout-content.directive.ts delete mode 100644 src/app/components/adf-layout/app-layout-header.directive.ts delete mode 100644 src/app/components/adf-layout/app-layout-navigation.directive.ts delete mode 100644 src/app/components/adf-layout/layout-container.component.html delete mode 100644 src/app/components/adf-layout/layout-container.component.scss delete mode 100644 src/app/components/adf-layout/layout-container.component.ts delete mode 100644 src/app/components/adf-layout/sidenav-layout.component.html delete mode 100644 src/app/components/adf-layout/sidenav-layout.component.scss delete mode 100644 src/app/components/adf-layout/sidenav-layout.component.spec.ts delete mode 100644 src/app/components/adf-layout/sidenav-layout.component.ts create mode 100644 src/app/ui/overrides/_adf-sidenav-layout.scss diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3f799a26d..a8ee5748a 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/adf-layout/animations.ts b/src/app/components/adf-layout/animations.ts deleted file mode 100644 index e4af8ad07..000000000 --- a/src/app/components/adf-layout/animations.ts +++ /dev/null @@ -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 . - */ - -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)')) -]); diff --git a/src/app/components/adf-layout/app-layout-content.directive.ts b/src/app/components/adf-layout/app-layout-content.directive.ts deleted file mode 100644 index 3a5f8b235..000000000 --- a/src/app/components/adf-layout/app-layout-content.directive.ts +++ /dev/null @@ -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 . - */ - -import { Directive } from '@angular/core'; - -@Directive({ - selector: '[appLayoutContent]' -}) -export class AppLayoutContentDirective {} diff --git a/src/app/components/adf-layout/app-layout-header.directive.ts b/src/app/components/adf-layout/app-layout-header.directive.ts deleted file mode 100644 index 218a9d637..000000000 --- a/src/app/components/adf-layout/app-layout-header.directive.ts +++ /dev/null @@ -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 . - */ - -import { Directive } from '@angular/core'; - -@Directive({ - selector: '[appLayoutHeader]' -}) -export class AppLayoutHeaderDirective {} diff --git a/src/app/components/adf-layout/app-layout-navigation.directive.ts b/src/app/components/adf-layout/app-layout-navigation.directive.ts deleted file mode 100644 index dd2ee8b31..000000000 --- a/src/app/components/adf-layout/app-layout-navigation.directive.ts +++ /dev/null @@ -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 . - */ - -import { Directive } from '@angular/core'; - -@Directive({ - selector: '[appLayoutNavigation]' -}) -export class AppLayoutNavigationDirective {} diff --git a/src/app/components/adf-layout/layout-container.component.html b/src/app/components/adf-layout/layout-container.component.html deleted file mode 100644 index 83856bbd3..000000000 --- a/src/app/components/adf-layout/layout-container.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - diff --git a/src/app/components/adf-layout/layout-container.component.scss b/src/app/components/adf-layout/layout-container.component.scss deleted file mode 100644 index 25712aed6..000000000 --- a/src/app/components/adf-layout/layout-container.component.scss +++ /dev/null @@ -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; -} diff --git a/src/app/components/adf-layout/layout-container.component.ts b/src/app/components/adf-layout/layout-container.component.ts deleted file mode 100644 index e9dec5f7d..000000000 --- a/src/app/components/adf-layout/layout-container.component.ts +++ /dev/null @@ -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 . - */ - -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; - } -} diff --git a/src/app/components/adf-layout/sidenav-layout.component.html b/src/app/components/adf-layout/sidenav-layout.component.html deleted file mode 100644 index b807a65dd..000000000 --- a/src/app/components/adf-layout/sidenav-layout.component.html +++ /dev/null @@ -1,23 +0,0 @@ -
- - - - - - - - - - - - - - - -
\ No newline at end of file diff --git a/src/app/components/adf-layout/sidenav-layout.component.scss b/src/app/components/adf-layout/sidenav-layout.component.scss deleted file mode 100644 index a71d91a31..000000000 --- a/src/app/components/adf-layout/sidenav-layout.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import 'mixins'; - -:host { - @include flex-column; - - .sidenav-layout { - @include flex-column; - } - - router-outlet { - flex: 0 0; - } -} diff --git a/src/app/components/adf-layout/sidenav-layout.component.spec.ts b/src/app/components/adf-layout/sidenav-layout.component.spec.ts deleted file mode 100644 index 6932ccff8..000000000 --- a/src/app/components/adf-layout/sidenav-layout.component.spec.ts +++ /dev/null @@ -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: ` - - ` -}) -export class DummyLayoutContainerComponent { - @Input() sidenavMin: number; - @Input() sidenavMax: number; - @Input() mediaQueryList: MediaQueryList; - @Input() hideSidenav: boolean; - toggleMenu () {} -} - -describe('SidenavLayoutComponent', () => { - - let fixture: ComponentFixture, - 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: ` - - - -
- - - - - - - -
- - ` - }) - 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); - }); - }); -}); diff --git a/src/app/components/adf-layout/sidenav-layout.component.ts b/src/app/components/adf-layout/sidenav-layout.component.ts deleted file mode 100644 index fba62e4f5..000000000 --- a/src/app/components/adf-layout/sidenav-layout.component.ts +++ /dev/null @@ -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 . - */ - -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; - - @ContentChild(AppLayoutNavigationDirective, {read: TemplateRef}) - navigationTemplate: TemplateRef; - - @ContentChild(AppLayoutContentDirective, {read: TemplateRef}) - contentTemplate: TemplateRef; - - @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; - } -} diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index b3d7d2399..215f4f10a 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -3,25 +3,35 @@ [parentId]="node?.id" [disabled]="!canCreateContent(node)"> - + [hideSidenav]="isPreview" + [expandedSidenav]="true"> - - - + + - - - + - - - - + + + + + + + + + + + + + + + + - + \ No newline at end of file diff --git a/src/app/ui/application.scss b/src/app/ui/application.scss index 3b9d34263..4cbc12ed4 100644 --- a/src/app/ui/application.scss +++ b/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'; diff --git a/src/app/ui/overrides/_adf-sidenav-layout.scss b/src/app/ui/overrides/_adf-sidenav-layout.scss new file mode 100644 index 000000000..c6609f073 --- /dev/null +++ b/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; + } +}