BBA-21 Add support for toolbar button selection

src/header/toolbar/toolbar.component.html

@@ -4,11 +4,17 @@
     </span>
     <h1>{{title | async}}</h1>
     <span class="toolbar-spacer"></span>
-    <span class="global-toolbar-buttons">
-        <ng-content></ng-content>
-    </span>
-    <span class="toolbar-buttons">
-        <ng-template [cfToolbarHost]="portal | async">
-        </ng-template>
-    </span>
+    <ng-container [ngSwitch]="globalButtonAlign | async">
+        <span *ngSwitchCase="'right'" class="toolbar-buttons">
+            <ng-template [cfToolbarHost]="portal | async">
+            </ng-template>
+        </span>
+        <span class="global-toolbar-buttons">
+            <ng-content></ng-content>
+        </span>
+        <span *ngSwitchDefault class="toolbar-buttons">
+            <ng-template [cfToolbarHost]="portal | async">
+            </ng-template>
+        </span>
+    </ng-container>
 </md-toolbar>

src/header/toolbar/toolbar.component.spec.ts

@@ -0,0 +1,87 @@
+import {
+        AfterViewInit,
+        Component,
+        DebugElement,
+        OnDestroy,
+        OnInit,
+        ViewChild ,
+}                                       from '@angular/core';
+import { ComponentFixture, TestBed }    from '@angular/core/testing';
+import { By }                           from '@angular/platform-browser';
+
+import {
+    ToolbarTemplatePortalDirective,
+}                                       from './toolbar-template-portal.directive';
+import { ToolbarModule }                from './toolbar.module';
+import { ToolbarService }               from './toolbar.service';
+
+// Test component to host a toolbar with a global element and instantiates
+// the TestPageComponent
+@Component({
+  template: `<cf-toolbar><span id="global" class="test">global</span></cf-toolbar><cf-page-test></cf-page-test>`,
+})
+class TestHostComponent { }
+
+// Test component that simulates a page adding content to a toolbar
+@Component({
+  template: `
+  <ng-template cfToolbarPortal #toolbarPortal="toolbarPortal">
+    <span id="page" class="test">page</span>
+  </ng-template>`,
+  selector: 'cf-page-test',
+})
+class TestPageComponent implements OnInit, AfterViewInit, OnDestroy {
+
+    @ViewChild('toolbarPortal') toolbarPortal: ToolbarTemplatePortalDirective;
+
+    constructor(private _toolbarService: ToolbarService) {}
+
+    ngOnInit(): void {
+        this._toolbarService.setPortal(this.toolbarPortal);
+        this._toolbarService.setTitle('Tabs');
+    }
+
+    ngAfterViewInit(): void {
+        if(this.toolbarPortal) {
+            this.toolbarPortal.detectChangesInView();
+        }
+    }
+
+    ngOnDestroy(): void {
+        this._toolbarService.setPortal(null);
+    }
+}
+
+describe('ToolbarComponent', () => {
+
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+        imports: [ToolbarModule ],
+        declarations: [ TestHostComponent, TestPageComponent], // declare the test components
+    });
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should show global buttons then page buttons', () => {
+    let toolbarService: ToolbarService = TestBed.get(ToolbarService);
+    toolbarService.setGlobalButtonAlign('left');
+    fixture.detectChanges();
+    let de: DebugElement[] = fixture.debugElement.queryAll(By.css('.test'));
+    expect(de.length).toBe(2);
+    expect(de[0].nativeElement.id).toBe('global');
+    expect(de[1].nativeElement.id).toBe('page');
+  });
+
+  it('should show page buttons then global buttons', () => {
+    let toolbarService: ToolbarService = TestBed.get(ToolbarService);
+    toolbarService.setGlobalButtonAlign('right');
+    fixture.detectChanges();
+    let de: DebugElement[] = fixture.debugElement.queryAll(By.css('.test'));
+    expect(de.length).toBe(2);
+    expect(de[0].nativeElement.id).toBe('page');
+    expect(de[1].nativeElement.id).toBe('global');
+  });
+});

src/header/toolbar/toolbar.component.ts

@@ -1,12 +1,14 @@
 import {
     ChangeDetectionStrategy,
     Component,
-}                           from '@angular/core';
-import { Portal }           from '@angular/material';
-import { Observable }       from 'rxjs';
+}                                   from '@angular/core';
+import { Portal }                   from '@angular/material';
+import { Observable }               from 'rxjs';
 
-import { LeftAction }       from './left-action.model';
-import { ToolbarService }   from './toolbar.service';
+import { LeftAction }               from './left-action.model';
+import { ToolbarService,
+         ToolbarGlobalButtonAlign,
+}                                   from './toolbar.service';
 
 @Component({
     selector: 'cf-toolbar',
@@ -18,10 +20,12 @@ export class ToolbarComponent {
     leftAction: Observable<LeftAction>;
     portal: Observable<Portal<any>>;
     title: Observable<string>;
+    globalButtonAlign: Observable<ToolbarGlobalButtonAlign>;
 
     constructor(private _service: ToolbarService) {
         this.leftAction = this._service.leftAction;
         this.portal = this._service.portal;
         this.title = this._service.title;
+        this.globalButtonAlign = this._service.globalButtonAlign;
     }
 }

src/header/toolbar/toolbar.service.ts

@@ -13,12 +13,16 @@ import {
 import { LeftAction }       from './left-action.model';
 import { Toolbar }          from './toolbar.model';
 
+export type ToolbarGlobalButtonAlign = 'left' | 'right';
+
 @Injectable()
 export class ToolbarService {
     private _leftAction: BehaviorSubject<LeftAction> = new BehaviorSubject<LeftAction>(null);
     private _portal: BehaviorSubject<Portal<any>> = new BehaviorSubject<Portal<any>>(null);
     private _title: BehaviorSubject<string> = new BehaviorSubject<string>(null);
     private _sideNavOpened: EventEmitter<void> = new EventEmitter<void>();
+    private _globalButtonAlign: BehaviorSubject<ToolbarGlobalButtonAlign>
+        = new BehaviorSubject<ToolbarGlobalButtonAlign>('right');
 
     constructor() {
     }
@@ -51,6 +55,14 @@ export class ToolbarService {
         return this._sideNavOpened;
     }
 
+    setGlobalButtonAlign(newValue: ToolbarGlobalButtonAlign): void {
+        this._globalButtonAlign.next(newValue);
+    }
+
+    get globalButtonAlign(): Observable<ToolbarGlobalButtonAlign> {
+        return this._globalButtonAlign.asObservable();
+    }
+
     openSideNav(): void {
         this._sideNavOpened.emit();
     }