[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/toolbar/toolbar-action/toolbar-action.component.html

@@ -1,20 +1,31 @@
 <ng-container [ngSwitch]="actionRef.type">
-    <ng-container *ngSwitchCase="'default'">
-        <app-toolbar-button [type]="type" [actionRef]="actionRef"></app-toolbar-button>
-    </ng-container>
+  <ng-container *ngSwitchCase="'default'">
+    <app-toolbar-button
+      [type]="type"
+      [actionRef]="actionRef"
+      [color]="color">
+    </app-toolbar-button>
+  </ng-container>
 
-    <ng-container *ngSwitchCase="'button'">
-        <app-toolbar-button [type]="type" [actionRef]="actionRef"></app-toolbar-button>
-    </ng-container>
+  <ng-container *ngSwitchCase="'button'">
+    <app-toolbar-button
+      [type]="type"
+      [actionRef]="actionRef"
+      [color]="color">
+    </app-toolbar-button>
+  </ng-container>
 
-    <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
+  <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
 
-    <ng-container *ngSwitchCase="'menu'">
-      <app-toolbar-menu [actionRef]="actionRef"></app-toolbar-menu>
-    </ng-container>
+  <ng-container *ngSwitchCase="'menu'">
+    <app-toolbar-menu
+      [actionRef]="actionRef"
+      [color]="color">
+    </app-toolbar-menu>
+  </ng-container>
 
-    <ng-container *ngSwitchCase="'custom'">
-        <adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
-    </ng-container>
+  <ng-container *ngSwitchCase="'custom'">
+    <adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
+  </ng-container>
 </ng-container>
 

src/app/components/toolbar/toolbar-action/toolbar-action.component.ts

@@ -42,6 +42,9 @@ export class ToolbarActionComponent {
   @Input()
   type = 'icon-button';
 
+  @Input()
+  color = 'primary';
+
   @Input()
   actionRef: ContentActionRef;
 }

src/app/components/toolbar/toolbar-button/toolbar-button.component.html

@@ -3,7 +3,7 @@
         <button
             [id]="actionRef.id"
             mat-icon-button
-            color="primary"
+            [color]="color"
             [attr.title]="(actionRef.description || actionRef.title) | translate"
             (click)="runAction()">
             <mat-icon>{{ actionRef.icon }}</mat-icon>

src/app/components/toolbar/toolbar-button/toolbar-button.component.ts

@@ -42,6 +42,9 @@ export class ToolbarButtonComponent {
   @Input()
   type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;
 
+  @Input()
+  color = 'primary';
+
   @Input()
   actionRef: ContentActionRef;
 

src/app/components/toolbar/toolbar-menu/toolbar-menu.component.html

@@ -1,6 +1,6 @@
 <button
   [id]="actionRef.id"
-  color="primary"
+  [color]="color"
   mat-icon-button
   [attr.title]="(actionRef.description || actionRef.title) | translate"
   [matMenuTriggerFor]="menu">

src/app/components/toolbar/toolbar-menu/toolbar-menu.component.ts

@@ -36,6 +36,9 @@ export class ToolbarMenuComponent {
   @Input()
   actionRef: ContentActionRef;
 
+  @Input()
+  color = 'primary';
+
   get hasChildren(): boolean {
     return (
       this.actionRef &&