mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3177] added general header component (#3537)
* [ADF-3177] added general header component * [ADF-3177] added documentation and removed user info mobile behaviour * [ADF-3177] eddited doc file * [ADF-3177] renamed folder and style changes * [ADF-3177] style changes * [ADF-3177] fix tests * [ADF-3177] fix lint errors and tests * [APM-3177] css changes * [ADF-3177] fix pr * [ADF-3177] updated documentation * [ADF-3177] expose module with old name * [ADF-3177] expose module with old name
This commit is contained in:
Georgiana Roman
committed by
Eugenio Romano
Eugenio Romano
parent
87d7a6a27f
commit
c4d3bf231a
@@ -0,0 +1,26 @@
|
||||
<div class="sidenav-layout">
|
||||
<ng-container *ngIf="!isHeaderInside">
|
||||
<ng-container class="adf-sidenav-layout-outer-header" *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
<adf-layout-container #container
|
||||
[sidenavMin]="sidenavMin"
|
||||
[sidenavMax]="sidenavMax"
|
||||
[mediaQueryList]="mediaQueryList"
|
||||
[hideSidenav]="hideSidenav"
|
||||
[expandedSidenav]="expandedSidenav"
|
||||
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>
|
||||
</adf-layout-container>
|
||||
</div>
|
||||
|
||||
<ng-template #emptyTemplate></ng-template>
|
||||
@@ -0,0 +1,18 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.sidenav-layout {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.layout__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
router-outlet {
|
||||
flex: 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
/*!
|
||||
* @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 { MaterialModule } from '../../../material.module';
|
||||
import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
|
||||
import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
|
||||
import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-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;
|
||||
@Input() expandedSidenav: boolean;
|
||||
toggleMenu () {}
|
||||
}
|
||||
|
||||
describe('SidenavLayoutComponent', () => {
|
||||
|
||||
let fixture: ComponentFixture<any>,
|
||||
mediaMatcher: MediaMatcher,
|
||||
mediaQueryList: any;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PlatformModule,
|
||||
LayoutModule,
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
DummyLayoutContainerComponent,
|
||||
SidenavLayoutComponent,
|
||||
SidenavLayoutContentDirective,
|
||||
SidenavLayoutHeaderDirective,
|
||||
SidenavLayoutNavigationDirective
|
||||
],
|
||||
providers: [
|
||||
MediaMatcher
|
||||
]
|
||||
});
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
mediaQueryList = {
|
||||
matches: false,
|
||||
addListener: () => {},
|
||||
removeListener: () => {}
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
describe('Template transclusion', () => {
|
||||
|
||||
@Component({
|
||||
selector: 'adf-test-component-for-sidenav',
|
||||
template: `
|
||||
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
|
||||
|
||||
<adf-sidenav-layout-header>
|
||||
<ng-template let-toggleMenu="toggleMenu">
|
||||
<div id="header-test" (click)="toggleMenu()"></div>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-header>
|
||||
|
||||
<adf-sidenav-layout-navigation>
|
||||
<ng-template let-isMenuMinimized="isMenuMinimized">
|
||||
<div id="nav-test">{{ isMenuMinimized !== undefined ? 'variable-is-injected' : 'variable-is-not-injected' }}</div>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-navigation>
|
||||
|
||||
<adf-sidenav-layout-content>
|
||||
<ng-template>
|
||||
<div id="content-test"></div>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-content>
|
||||
</adf-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('adf-sidenav-layout-navigation', () => {
|
||||
|
||||
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('adf-sidenav-layout-header', () => {
|
||||
|
||||
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('adf-sidenav-layout-content', () => {
|
||||
|
||||
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 paramters', () => {
|
||||
component.sidenavMin = 1;
|
||||
component.sidenavMax = 2;
|
||||
component.hideSidenav = true;
|
||||
component.expandedSidenav = false;
|
||||
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.expandedSidenav).toBe(component.expandedSidenav);
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
describe('menuOpenState', () => {
|
||||
|
||||
let component;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
mediaMatcher = TestBed.get(MediaMatcher);
|
||||
spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
|
||||
|
||||
fixture = TestBed.createComponent(SidenavLayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should be true by default', (done) => {
|
||||
fixture.detectChanges();
|
||||
|
||||
component.menuOpenState$.subscribe((value) => {
|
||||
expect(value).toBe(true);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should be the same as the expandedSidenav\'s value by default', (done) => {
|
||||
component.expandedSidenav = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
component.menuOpenState$.subscribe((value) => {
|
||||
expect(value).toBe(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should emit value on toggleMenu action', (done) => {
|
||||
component.expandedSidenav = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
component.toggleMenu();
|
||||
|
||||
component.menuOpenState$.subscribe((value) => {
|
||||
expect(value).toBe(true);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
/*!
|
||||
* @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.
|
||||
*/
|
||||
|
||||
import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
|
||||
import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
|
||||
import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-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;
|
||||
@Input() expandedSidenav = true;
|
||||
|
||||
@Output() expanded = new EventEmitter<boolean>();
|
||||
|
||||
@ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective;
|
||||
@ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective;
|
||||
@ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective;
|
||||
|
||||
private menuOpenStateSubject: BehaviorSubject<boolean>;
|
||||
public menuOpenState$: Observable<boolean>;
|
||||
|
||||
@ViewChild('container') container: any;
|
||||
@ViewChild('emptyTemplate') emptyTemplate: any;
|
||||
|
||||
mediaQueryList: MediaQueryList;
|
||||
_isMenuMinimized;
|
||||
|
||||
templateContext = {
|
||||
toggleMenu: () => {},
|
||||
isMenuMinimized: () => this.isMenuMinimized
|
||||
};
|
||||
|
||||
constructor(private mediaMatcher: MediaMatcher) {
|
||||
this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
const initialMenuState = !this.expandedSidenav;
|
||||
|
||||
this.menuOpenStateSubject = new BehaviorSubject<boolean>(initialMenuState);
|
||||
this.menuOpenState$ = this.menuOpenStateSubject.asObservable();
|
||||
|
||||
const stepOver = this.stepOver || SidenavLayoutComponent.STEP_OVER;
|
||||
this.isMenuMinimized = initialMenuState;
|
||||
|
||||
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();
|
||||
this.expanded.emit(!this.isMenuMinimized);
|
||||
}
|
||||
|
||||
get isMenuMinimized() {
|
||||
return this._isMenuMinimized;
|
||||
}
|
||||
|
||||
set isMenuMinimized(menuState: boolean) {
|
||||
this._isMenuMinimized = menuState;
|
||||
this.menuOpenStateSubject.next(!menuState);
|
||||
}
|
||||
|
||||
get isHeaderInside() {
|
||||
return this.mediaQueryList.matches;
|
||||
}
|
||||
|
||||
get headerTemplate(): TemplateRef<any> {
|
||||
return this.headerDirective && this.headerDirective.template || this.emptyTemplate;
|
||||
}
|
||||
|
||||
get navigationTemplate(): TemplateRef<any> {
|
||||
return this.navigationDirective && this.navigationDirective.template || this.emptyTemplate;
|
||||
}
|
||||
|
||||
get contentTemplate(): TemplateRef<any> {
|
||||
return this.contentDirective && this.contentDirective.template || this.emptyTemplate;
|
||||
}
|
||||
|
||||
onMediaQueryChange() {
|
||||
this.isMenuMinimized = false;
|
||||
this.expanded.emit(!this.isMenuMinimized);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user