[ACA-1809] app header extensions (#659)

* move header to separate component

* code fixes

* project header buttons and menus

* app menu example

* delete empty style

* logout action

* update docs

* and one more test

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

@@ -0,0 +1,25 @@
+<adf-layout-header
+  [logo]="logo$ | async"
+  [redirectUrl]="'/personal-files'"
+  [tooltip]="appName$ | async"
+  [color]="headerColor$ | async"
+  [title]="appName$ | async"
+  (clicked)="toggleClicked.emit($event)">
+
+  <div class="adf-toolbar--spacer"></div>
+
+  <ng-container *ngIf="!isSmallScreen">
+    <aca-search-input></aca-search-input>
+    <adf-toolbar-divider></adf-toolbar-divider>
+  </ng-container>
+
+  <aca-current-user></aca-current-user>
+
+  <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
+    <aca-toolbar-action
+      [actionRef]="actionRef"
+      color="default">
+    </aca-toolbar-action>
+  </ng-container>
+
+</adf-layout-header>

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

@@ -0,0 +1,85 @@
+/*!
+ * @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,
+  ViewEncapsulation,
+  Output,
+  EventEmitter,
+  OnInit
+} from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppStore } from 'src/app/store/states';
+import { Observable } from 'rxjs';
+import {
+  selectHeaderColor,
+  selectAppName,
+  selectLogoPath
+} from 'src/app/store/selectors/app.selectors';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '../../extensions/extension.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: 'header.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-header' }
+})
+export class AppHeaderComponent implements OnInit {
+  @Output()
+  toggleClicked = new EventEmitter();
+
+  appName$: Observable<string>;
+  headerColor$: Observable<string>;
+  logo$: Observable<string>;
+
+  isSmallScreen = false;
+  actions: Array<ContentActionRef> = [];
+
+  constructor(
+    store: Store<AppStore>,
+    private breakpointObserver: BreakpointObserver,
+    private appExtensions: AppExtensionService
+  ) {
+    this.headerColor$ = store.select(selectHeaderColor);
+    this.appName$ = store.select(selectAppName);
+    this.logo$ = store.select(selectLogoPath);
+  }
+
+  ngOnInit() {
+    this.actions = this.appExtensions.getHeaderActions();
+
+    this.breakpointObserver
+      .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
+      .subscribe(result => {
+        this.isSmallScreen = result.matches;
+      });
+  }
+
+  trackByActionId(index: number, action: ContentActionRef) {
+    return action.id;
+  }
+}

src/app/components/header/header.module.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppHeaderComponent } from './header.component';
+import { AppCurrentUserModule } from '../current-user/current-user.module';
+import { AppSearchInputModule } from '../search/search-input.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    AppCurrentUserModule,
+    AppSearchInputModule,
+    AppToolbarModule
+  ],
+  declarations: [AppHeaderComponent],
+  exports: [AppHeaderComponent]
+})
+export class AppHeaderModule {}