main application

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

@@ -0,0 +1,15 @@
+<adf-toolbar class="app-menu">
+    <adf-toolbar-title>
+        <a
+            class="app-menu__title"
+            title="{{ appTitle }}"
+            attr.data-build-number="{{ appBuildNumber }}"
+            [routerLink]="[ '/' ]">{{ appTitle }}</a>
+    </adf-toolbar-title>
+
+    <app-search></app-search>
+
+    <adf-toolbar-divider></adf-toolbar-divider>
+
+    <app-current-user></app-current-user>
+</adf-toolbar>

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

@@ -0,0 +1,57 @@
+@import './../../ui/variables';
+
+.app-menu {
+
+    &.adf-toolbar {
+        .mat-toolbar {
+            background-color: #00bcd4;
+            font-family: 'Muli',"Roboto","Helvetica","Arial",sans-serif !important;
+            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 > div {
+            background-color: $alfresco-white !important;
+        }
+    }
+
+    .app-menu__title {
+        width: 100px;
+        height: $app-menu-height;
+
+        line-height: 54px;
+        text-decoration: none;
+        text-indent: -9999px;
+
+        color: inherit;
+
+        background: url('/assets/images/alfresco-logo-white.svg') no-repeat 0 50%;
+        background-size: 100% auto;
+
+        display: block;
+        position: relative;
+        font-size: 20px;
+        line-height: 1;
+        letter-spacing: .02em;
+        font-weight: 400;
+
+        &:after {
+            content: "Build #" attr(data-build-number);
+            color: rgba(white, .66);
+            font-size: 8px;
+            position: absolute;
+            bottom: 8px;
+            right: 2px;
+            line-height: 1;
+            text-indent: 0;
+        }
+    }
+}

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

@@ -0,0 +1,89 @@
+/*!
+ * @license
+ * Copyright 2017 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 { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CoreModule, AppConfigService, PeopleContentService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
+import { CommonModule } from './../../common/common.module';
+
+import { HeaderComponent } from './header.component';
+import { SearchComponent } from '../search/search.component';
+import { CurrentUserComponent } from '../current-user/current-user.component';
+
+describe('HeaderComponent', () => {
+    let fixture;
+    let component;
+    let appConfigService: AppConfigService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule,
+                RouterTestingModule,
+                CommonModule
+            ],
+            declarations: [
+                HeaderComponent,
+                SearchComponent,
+                CurrentUserComponent
+            ]
+        })
+        .overrideProvider(PeopleContentService, {
+            useValue: {
+                getCurrentPerson: () => Observable.of({ entry: {} })
+            }
+        });
+
+        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 === 'application.build') {
+                return 'build-nr';
+            }
+        });
+
+        fixture.detectChanges();
+    });
+
+    it('get application name', () => {
+        expect(component.appName).toBe('app-name');
+    });
+
+    it('get application build number', () => {
+        expect(component.appBuildNumber).toBe('build-nr');
+    });
+
+    it('get application title', () => {
+        expect(component.appTitle).toContain('app-name');
+        expect(component.appTitle).toContain('build-nr');
+    });
+
+    it('toggle contrast', () => {
+        component.enhancedContrast =  false;
+
+        component.toggleContrast();
+
+        expect(component.enhancedContrast).toBe(true);
+    });
+});

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

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2017 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, ViewEncapsulation } from '@angular/core';
+import { AppConfigService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: [ './header.component.scss' ],
+    encapsulation: ViewEncapsulation.None
+})
+export class HeaderComponent {
+    private enhancedContrast: Boolean = false;
+
+    constructor(private appConfig: AppConfigService) {}
+
+    get appName(): string {
+        return <string>this.appConfig.get('application.name');
+    }
+
+    get appBuildNumber(): string {
+        return <string>this.appConfig.get('application.build');
+    }
+
+    get appTitle(): string {
+        const { appName, appBuildNumber } = this;
+
+        return `${appName} (Build #${appBuildNumber})`;
+    }
+
+    toggleContrast() {
+        this.enhancedContrast = !this.enhancedContrast;
+    }
+}