feat(navigation-drawer): ability to override toolbar content (#778)

closes #774
Teradata · Aug 7, 2017 · 1a7c71b · 1a7c71b
1 parent 5993f7e
commit 1a7c71b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/src/platform/core/layout/layout.module.ts b/src/platform/core/layout/layout.module.ts
@@ -13,12 +13,14 @@ import {
 } from './layout-nav-list/layout-nav-list.directives';
 import { TdLayoutCardOverComponent } from './layout-card-over/layout-card-over.component';
 import { TdLayoutManageListComponent } from './layout-manage-list/layout-manage-list.component';
-import { 
+import {
   TdLayoutManageListToggleDirective, TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective,
 } from './layout-manage-list/layout-manage-list.directives';
 import { TdLayoutFooterComponent } from './layout-footer/layout-footer.component';
 
-import { TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective } from './navigation-drawer/navigation-drawer.component';
+import {
+  TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective, TdNavigationDrawerToolbarDirective,
+} from './navigation-drawer/navigation-drawer.component';
 
 const TD_LAYOUTS: Type<any>[] = [
   TdLayoutComponent,
@@ -44,13 +46,14 @@ const TD_LAYOUTS: Type<any>[] = [
 
   TdNavigationDrawerComponent,
   TdNavigationDrawerMenuDirective,
+  TdNavigationDrawerToolbarDirective,
 ];
 
 export { TdLayoutComponent, TdLayoutToggleDirective, TdLayoutCloseDirective, TdLayoutOpenDirective,
          TdLayoutNavComponent, TdLayoutNavListComponent, TdLayoutNavListToggleDirective, TdLayoutNavListCloseDirective, TdLayoutNavListOpenDirective,
          TdLayoutCardOverComponent, TdLayoutManageListComponent, TdLayoutManageListToggleDirective,
          TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective,
-         TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective };
+         TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective, TdNavigationDrawerToolbarDirective };
 
 @NgModule({
   imports: [

diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html
@@ -1,27 +1,30 @@
 <md-toolbar [color]="color" [style.background-image]="backgroundImage" [class.td-toolbar-background]="!!isBackgroundAvailable">
   <div layout="column" flex>
-    <span *ngIf="icon || logo || sidenavTitle"
-          [class.cursor-pointer]="routerEnabled"
-          (click)="handleNavigationClick()"
-          layout="row"
-          layout-align="start center">
-      <md-icon *ngIf="icon">{{icon}}</md-icon>
-      <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
-      <span *ngIf="sidenavTitle" class="md-subhead">{{sidenavTitle}}</span>
-    </span>
-    <div class="md-body-2" *ngIf="email && name">{{name}}</div>
-    <div class="md-body-1" layout="row" href *ngIf="email || name" (click)="toggleMenu()">
-      <span flex>{{email || name}}</span>
-      <button md-icon-button class="md-icon-button-mini" *ngIf="isMenuAvailable">
-        <md-icon *ngIf="!menuToggled">arrow_drop_down</md-icon>
-        <md-icon *ngIf="menuToggled">arrow_drop_up</md-icon>
-      </button>
-    </div>
+    <ng-content select="[td-navigation-drawer-toolbar]"></ng-content>
+    <ng-container *ngIf="!isCustomToolbar">
+      <span *ngIf="icon || logo || sidenavTitle"
+            [class.cursor-pointer]="routerEnabled"
+            (click)="handleNavigationClick()"
+            layout="row"
+            layout-align="start center">
+        <md-icon *ngIf="icon">{{icon}}</md-icon>
+        <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
+        <span *ngIf="sidenavTitle" class="md-subhead">{{sidenavTitle}}</span>
+      </span>
+      <div class="md-body-2" *ngIf="email && name">{{name}}</div>
+      <div class="md-body-1" layout="row" href *ngIf="email || name" (click)="toggleMenu()">
+        <span flex>{{email || name}}</span>
+        <button md-icon-button class="md-icon-button-mini" *ngIf="isMenuAvailable">
+          <md-icon *ngIf="!menuToggled">arrow_drop_down</md-icon>
+          <md-icon *ngIf="menuToggled">arrow_drop_up</md-icon>
+        </button>
+      </div>
+    </ng-container>
   </div>
 </md-toolbar>
 <div [@tdCollapse]="menuToggled">
   <ng-content></ng-content>
 </div>
 <div [@tdCollapse]="!menuToggled">
   <ng-content select="[td-navigation-drawer-menu]"></ng-content>
-</div>
+</div>
diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts
@@ -17,6 +17,13 @@ export class TdNavigationDrawerMenuDirective {
 
 }
 
+@Directive({
+  selector: '[td-navigation-drawer-toolbar]',
+})
+export class TdNavigationDrawerToolbarDirective {
+
+}
+
 @Component({
   selector: 'td-navigation-drawer',
   styleUrls: ['./navigation-drawer.component.scss' ],
@@ -35,11 +42,20 @@ export class TdNavigationDrawerComponent implements OnInit, OnDestroy {
 
   @ContentChildren(TdNavigationDrawerMenuDirective) _drawerMenu: QueryList<TdNavigationDrawerMenuDirective>;
 
+  @ContentChildren(TdNavigationDrawerToolbarDirective) _toolbar: QueryList<TdNavigationDrawerToolbarDirective>;
+
   /**
-   * Checks if there is a [TdNavigationDrawerMenuDirective] as content.
+   * Checks if there is a [TdNavigationDrawerMenuDirective] has content.
    */
   get isMenuAvailable(): boolean {
-    return this._drawerMenu.length > 0;
+    return this._drawerMenu ? this._drawerMenu.length > 0 : false;
+  }
+
+  /**
+   * Checks if there is a [TdNavigationDrawerToolbarDirective] has content.
+   */
+  get isCustomToolbar(): boolean {
+    return this._toolbar ? this._toolbar.length > 0 : false;
   }
 
   /**