[ACA-1440] use ADF Header component (#508)

* [ACA-1440] use ADF HEADER component

* moved style to theme

* removed ACA HeaderComponent

* remove aca header component theme

* Update layout.component.html

* update app header locator

e2e/components/header/header.ts

@@ -37,6 +37,6 @@ export class Header extends Component {
     userInfo: UserInfo = new UserInfo(this.component);
 
     constructor(ancestor?: ElementFinder) {
-        super('aca-header', ancestor);
+        super('adf-layout-header', ancestor);
     }
 }

src/app/app.module.ts

@@ -45,7 +45,6 @@ import { SharedFilesComponent } from './components/shared-files/shared-files.com
 import { TrashcanComponent } from './components/trashcan/trashcan.component';
 import { LayoutComponent } from './components/layout/layout.component';
 import { SidenavViewsManagerDirective } from './components/layout/sidenav-views-manager.directive';
-import { HeaderComponent } from './components/header/header.component';
 import { CurrentUserComponent } from './components/current-user/current-user.component';
 import { SearchInputComponent } from './components/search/search-input/search-input.component';
 import { SearchInputControlComponent } from './components/search/search-input-control/search-input-control.component';
@@ -110,7 +109,6 @@ import { RuleService } from './extensions/rules/rule.service';
         LoginComponent,
         LayoutComponent,
         SidenavViewsManagerDirective,
-        HeaderComponent,
         CurrentUserComponent,
         SearchInputComponent,
         SearchInputControlComponent,

src/app/components/header/header.component.html

@@ -1,24 +0,0 @@
-<adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async" role="heading" aria-level="1">
-    <adf-toolbar-title>
-        <button
-            title="{{ 'APP.ACTIONS.TOGGLE-SIDENAV' | translate }}"
-            mat-icon-button
-            (click)="toggleMenu()">
-            <mat-icon>menu</mat-icon>
-        </button>
-
-        <a class="app-menu__title"
-            title="{{ appName$ | async }}"
-            [routerLink]="[ '/' ]">
-            <img [src]="logo$ | async" alt="{{ appName$ | async }}" />
-        </a>
-    </adf-toolbar-title>
-
-    <div class="adf-toolbar--spacer"></div>
-
-    <aca-search-input></aca-search-input>
-
-    <adf-toolbar-divider></adf-toolbar-divider>
-
-    <aca-current-user></aca-current-user>
-</adf-toolbar>

src/app/components/header/header.component.spec.ts

@@ -1,88 +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 { AppConfigService } from '@alfresco/adf-core';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Store } from '@ngrx/store';
-import { SetAppNameAction, SetHeaderColorAction } from '../../store/actions';
-import { AppStore } from '../../store/states/app.state';
-import { AppTestingModule } from '../../testing/app-testing.module';
-import { HeaderComponent } from './header.component';
-
-describe('HeaderComponent', () => {
-    let fixture: ComponentFixture<HeaderComponent>;
-    let component: HeaderComponent;
-    let appConfigService: AppConfigService;
-    let store: Store<AppStore>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ AppTestingModule ],
-            declarations: [
-                HeaderComponent
-            ],
-            schemas: [ NO_ERRORS_SCHEMA ]
-        });
-
-        store = TestBed.get(Store);
-        store.dispatch(new SetAppNameAction('app-name'));
-        store.dispatch(new SetHeaderColorAction('some-color'));
-
-        fixture = TestBed.createComponent(HeaderComponent);
-        component = fixture.componentInstance;
-        appConfigService = TestBed.get(AppConfigService);
-
-        spyOn(appConfigService, 'get').and.callFake((val) => {
-            if (val === 'application.name') {
-                return 'app-name';
-            }
-
-            if (val === 'headerColor') {
-                return 'some-color';
-            }
-
-            if (val === 'application.logo') {
-                return '';
-            }
-        });
-
-        fixture.detectChanges();
-    });
-
-    it('it should set application name', done => {
-        component.appName$.subscribe(val => {
-            expect(val).toBe('app-name');
-            done();
-        });
-    });
-
-    it('it should set header background color', done => {
-        component.headerColor$.subscribe(val => {
-            expect(val).toBe('some-color');
-            done();
-        });
-    });
-});

src/app/components/header/header.component.theme.scss

@@ -1,59 +0,0 @@
-@mixin aca-header-theme($theme) {
-    $background: map-get($theme, background);
-    $app-menu-height: 64px;
-
-    .aca-header {
-
-        .app-menu {
-            height: $app-menu-height;
-
-            &.adf-toolbar {
-                .mat-toolbar {
-                    background-color: inherit;
-                    font-family: inherit;
-                    min-height: $app-menu-height;
-                    height: $app-menu-height;
-
-                    .mat-toolbar-layout {
-                        height: $app-menu-height;
-
-                        .mat-toolbar-row {
-                            height: $app-menu-height;
-                        }
-                    }
-                }
-
-                .adf-toolbar-divider {
-                    margin-left: 5px;
-                    margin-right: 5px;
-
-                    & > div {
-                        background-color: mat-color($background, card);
-                    }
-                }
-
-                .adf-toolbar-title {
-                    color:  mat-color($background, card);
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
-
-            .app-menu__title {
-                width: 100px;
-                height: 50px;
-                margin-left: 40px;
-                display: flex;
-                justify-content: center;
-                align-items: stretch;
-
-                &> img {
-                    width: 100%;
-                    object-fit: contain;
-                }
-            }
-        }
-    }
-}

src/app/components/header/header.component.ts

@@ -1,54 +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, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Rx';
-import { AppStore } from '../../store/states/app.state';
-import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors';
-
-@Component({
-    selector: 'aca-header',
-    templateUrl: './header.component.html',
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'aca-header' }
-})
-export class HeaderComponent {
-    @Output() menu: EventEmitter<any> = new EventEmitter<any>();
-
-    appName$: Observable<string>;
-    headerColor$: Observable<string>;
-    logo$: Observable<string>;
-
-    constructor(store: Store<AppStore>) {
-        this.headerColor$ = store.select(selectHeaderColor);
-        this.appName$ = store.select(selectAppName);
-        this.logo$ = store.select(selectLogoPath);
-    }
-
-    toggleMenu() {
-        this.menu.emit();
-    }
-}

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

@@ -15,7 +15,20 @@
 
             <adf-sidenav-layout-header>
                 <ng-template let-toggleMenu="toggleMenu">
-                    <aca-header (menu)="toggleMenu()"></aca-header>
+                    <adf-layout-header
+                        [logo]="logo$ | async"
+                        [color]="'accent'"
+                        (clicked)="toggleMenu($event)">
+
+                        <div class="adf-toolbar--spacer"></div>
+
+                        <aca-search-input></aca-search-input>
+
+                        <adf-toolbar-divider></adf-toolbar-divider>
+
+                        <aca-current-user></aca-current-user>
+
+                    </adf-layout-header>
                 </ng-template>
             </adf-sidenav-layout-header>
 

src/app/components/layout/layout.component.ts

@@ -23,20 +23,21 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs/Rx';
+import { Observable, Subject } from 'rxjs/Rx';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { NodePermissionService } from '../../common/services/node-permission.service';
 import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states';
-import { currentFolder } from '../../store/selectors/app.selectors';
+import { currentFolder, selectAppName, selectHeaderColor, selectLogoPath } from '../../store/selectors/app.selectors';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-layout',
     templateUrl: './layout.component.html',
-    styleUrls: ['./layout.component.scss']
+    styleUrls: ['./layout.component.scss'],
+    encapsulation: ViewEncapsulation.None,
 })
 export class LayoutComponent implements OnInit, OnDestroy {
     @ViewChild(SidenavViewsManagerDirective) manager: SidenavViewsManagerDirective;
@@ -46,9 +47,18 @@ export class LayoutComponent implements OnInit, OnDestroy {
     node: MinimalNodeEntryEntity;
     canUpload = false;
 
+    appName$: Observable<string>;
+    headerColor$: Observable<string>;
+    logo$: Observable<string>;
+
     constructor(
         protected store: Store<AppStore>,
-        private permission: NodePermissionService) {}
+        private permission: NodePermissionService) {
+
+        this.headerColor$ = store.select(selectHeaderColor);
+        this.appName$ = store.select(selectAppName);
+        this.logo$ = store.select(selectLogoPath);
+    }
 
     ngOnInit() {
         if (!this.manager.minimizeSidenav) {

src/app/ui/custom-theme.scss

@@ -7,7 +7,6 @@
 @import '../components/search/search-input/search-input.component.theme';
 @import '../components/settings/settings.component.theme';
 @import '../components/current-user/current-user.component.theme';
-@import '../components/header/header.component.theme';
 @import '../components/permission-manager/permissions-manager.component.theme';
 @import '../dialogs/node-versions/node-versions.dialog.theme';
 
@@ -23,6 +22,7 @@
 @import './overrides/adf-upload-drag-area.theme';
 @import './overrides/adf-search-sorting-picker.theme';
 @import './overrides/adf-content-node-selector.theme';
+@import './overrides/adf-layout-header.theme';
 
 @import 'layout';
 @import 'snackbar';
@@ -79,9 +79,9 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
     @include adf-upload-drag-area-theme($theme);
     @include adf-search-sorting-picker-theme($theme);
     @include adf-content-node-selector-theme($theme);
+    @include adf-layout-header-theme($theme);
 
     @include aca-layout-theme($theme);
-    @include aca-header-theme($theme);
     @include aca-search-input-theme($theme);
     @include aca-generic-error-theme($theme);
     @include aca-permissions-manager-theme($theme);

src/app/ui/overrides/adf-layout-header.theme.scss

@@ -0,0 +1,21 @@
+@mixin adf-layout-header-theme($theme) {
+    $background: map-get($theme, background);
+
+    .adf-layout-header {
+        .mat-toolbar-single-row {
+            .adf-app-logo {
+                width: 100px;
+                height: 50px;
+                margin-left: 40px;
+            }
+        }
+
+        .adf-toolbar-divider {
+            margin: 0 5px;
+
+            & > div {
+                background-color: mat-color($background, card, 1);
+            }
+        }
+    }
+}