Merge branch 'develop' into feature/module-optimize

Teradata · Feb 7, 2017 · a2efa43 · a2efa43
2 parents c643fb7 + 46b6ff2
commit a2efa43
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -49,4 +49,4 @@ Covalent is built on a CSS Flexbox layout and all layouts and components heavily
 
 *Indicates limited testing & lower priority
 
-[More on flexbox brower support](http://caniuse.com/#feat=flexbox)
+[More on flexbox browser support](http://caniuse.com/#feat=flexbox)
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -1,6 +1,5 @@
-<td-layout-nav logo="assets:teradata">
+<td-layout-nav logo="assets:teradata" toolbarTitle="Covalent">
   <div td-toolbar-content layout="row" layout-align="center center" flex>
-    <span>Covalent</span>
     <span flex></span>
     <button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
       <td-notification-count color="accent" [notifications]="updates.length + 1">

diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -59,10 +59,15 @@ <h3 md-line><code>logo?: string</code></h3>
                   <p md-line>The path to your toolbar logo</p>
                 </md-list-item>
                 <md-divider></md-divider>
-                  <md-list-item>
-                    <h3 md-line><code>color?: string</code></h3>
-                    <p md-line>Toolbar color (primary | accent | warn | none)</p>
-                  </md-list-item>
+                <md-list-item>
+                  <h3 md-line><code>navigationRoute?: string</code></h3>
+                  <p md-line>Route on logo/icon/title (defaults to '/')</p>
+                </md-list-item>
+                <md-divider></md-divider>
+                <md-list-item>
+                  <h3 md-line><code>color?: string</code></h3>
+                  <p md-line>Toolbar color (primary | accent | warn | none)</p>
+                </md-list-item>
                 <md-divider></md-divider>
                 <md-list-item>
                   <h3 md-line><code><![CDATA[<md-nav-list td-sidenav-content>]]></code></h3>
@@ -116,6 +121,7 @@ <h3 class="md-title">HTML</h3>
               <td-layout-nav-list #navList
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
+                    navigationRoute="/"
                     [opened]="media.registerQuery('gt-sm') | async"
                     [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'over'"
                     [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">

diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -43,6 +43,11 @@ <h3 md-line><code>color?: string</code></h3>
                     <p md-line>Toolbar color (primary | accent | warn | none)</p>
                   </md-list-item>
                   <md-divider></md-divider>
+                  <md-list-item>
+                    <h3 md-line><code>navigationRoute?: string</code></h3>
+                    <p md-line>Route on logo/icon/title (defaults to '/')</p>
+                  </md-list-item>
+                  <md-divider></md-divider>
                   <md-list-item>
                     <h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
                     <p md-line>Loads html for each route (view)</p>
@@ -64,7 +69,7 @@ <h3 md-line><code><![CDATA[<td-layout-footer>]]></code></h3>
             <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
               <![CDATA[
-                <td-layout-nav toolbarTitle="Toolbar Title" logo="svgIconName">
+                <td-layout-nav toolbarTitle="Toolbar Title" logo="svgIconName" navigationRoute="/">
                   <router-outlet></router-outlet>
                   <td-layout-footer>
                     Optional footer

diff --git a/src/platform/core/common/styles/utilities/_general.scss b/src/platform/core/common/styles/utilities/_general.scss
@@ -39,3 +39,6 @@
   outline: 0;
   font-weight: 700;
 }
+.cursor-pointer:hover {
+  cursor: pointer;
+}
diff --git a/src/platform/core/layout/README.md b/src/platform/core/layout/README.md
@@ -43,10 +43,11 @@ See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent
 
 | Name | Type | Description |
 | --- | --- | --- |
-| toolbarTitle | string | Title set in toolbar.
+| sidenavTitle | string | Title set in toolbar.
 | icon | string | icon name to be displayed before the title
 | logo | string | logo icon name to be displayed before the title. If [icon] is set, then this will not be shown.
 | color | string | optional sidenav toolbar color.
+| navigationRoute | string | route for the icon, logo, and sidenavTitle. Defaults to '/'.
 | backgroundUrl | SafeResourceUrl | image to be displayed as the background of the toolbar. URL used will be sanitized, but it should be always from a trusted source to avoid XSS.
 | name | string | string to be displayed as part of the navigation drawer sublabel. if [email] is not set, then [name] will be the toggle menu text.
 | email | string | string to be displayed as part of the navigation drawer sublabel in the [toggle] menu text. if [email] and [name] are not set, then the toggle menu is not rendered.
@@ -62,7 +63,7 @@ Example for Main Layout / Navigation Drawer Combo:
 
 ```html
 <td-layout>
-  <td-navigation-drawer sidenavTitle="title" logo="logo" icon="icon" name="name" password="password" color="color">
+  <td-navigation-drawer sidenavTitle="title" logo="logo" icon="icon" name="name" password="password" color="color"  navigationRoute="/">
     .. main drawer content
     <div td-navigation-drawer-menu>
       .. menu drawer content

diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts
@@ -64,4 +64,5 @@ export class TdLayoutManageListComponent {
   public close(): Promise<MdSidenavToggleResult> {
     return this._sideNav.close();
   }
+
 }
diff --git a/src/platform/core/layout/layout-nav-list/README.md b/src/platform/core/layout/layout-nav-list/README.md
@@ -11,6 +11,7 @@
 | icon | string | icon name to be displayed before the title
 | logo | string | logo icon name to be displayed before the title. If [icon] is set, then this will not be shown.
 | color | string | optional toolbar color. Defaults to primary.
+| navigationRoute | string | route for the icon, logo, and toolbarTitle. Defaults to '/'.
 | mode | 'over', 'side' or 'push' | The mode or styling of the sidenav. Defaults to 'side'.
 | opened | boolean | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. Defaults to 'true'.
 | sidenavWidth | string | Sets the 'width' of the sidenav in either 'px' or '%' ('%' is not well supported yet as stated in the layout docs). Defaults to '257px'.
@@ -31,7 +32,7 @@
 Example for Nav List Layout:
 
 ```html
-<td-layout-nav-list sidenavTitle="title" logo="logo" icon="icon" opened="true" mode="side" sidenavWidth="350px" color="color">
+<td-layout-nav-list sidenavTitle="title" logo="logo" icon="icon" opened="true" mode="side" sidenavWidth="350px" color="color"  navigationRoute="/">
   <div td-sidenav-toolbar-content>
     ... left toolbar content
   </div>

diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html
@@ -13,9 +13,9 @@
           <button md-icon-button class="td-menu-button" *ngIf="isMainSidenavAvailable" (click)="openMainSidenav()">
             <md-icon class="md-24">menu</md-icon>
           </button>
-          <md-icon *ngIf="icon">{{icon}}</md-icon>
-          <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
-          <span *ngIf="toolbarTitle">{{toolbarTitle}}</span>
+          <md-icon *ngIf="icon" [routerLink]="navigationRoute" class="cursor-pointer">{{icon}}</md-icon>
+          <md-icon *ngIf="logo && !icon" class="md-icon-logo cursor-pointer" [svgIcon]="logo" [routerLink]="navigationRoute"></md-icon>
+          <span *ngIf="toolbarTitle" class="cursor-pointer" [routerLink]="navigationRoute">{{toolbarTitle}}</span>
           <ng-content select="[list-toolbar-content], [td-sidenav-toolbar-content]"></ng-content>
         </md-toolbar>
         <div flex class="list md-content">

diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts
@@ -74,14 +74,23 @@ export class TdLayoutNavListComponent {
    */
   @Input('sidenavWidth') sidenavWidth: string = '350px';
 
+  /**
+   * navigationRoute?: string
+   *
+   * option to set the combined logo, icon, toolbar title route
+   * defaults to '/'
+   */
+  @Input('navigationRoute') navigationRoute: string = '/';
+
   /**
    * Checks if there is a [TdLayoutComponent] as parent.
    */
   get isMainSidenavAvailable(): boolean {
     return !!this._layout;
   }
 
-  constructor(@Optional() @Inject(forwardRef(() => TdLayoutComponent)) private _layout: TdLayoutComponent) {}
+  constructor(@Optional() @Inject(forwardRef(() => TdLayoutComponent))
+              private _layout: TdLayoutComponent) { }
 
   /**
    * Proxy toggle method to access sidenav from outside (from td-layout template).
@@ -110,4 +119,5 @@ export class TdLayoutNavListComponent {
   openMainSidenav(): void {
     this._layout.open();
   }
+
 }
diff --git a/src/platform/core/layout/layout-nav/README.md b/src/platform/core/layout/layout-nav/README.md
@@ -11,6 +11,7 @@
 | icon | string | icon name to be displayed before the title
 | logo | string | logo icon name to be displayed before the title. If [icon] is set, then this will not be shown.
 | color | string | optional toolbar color. Defaults to primary.
+| navigationRoute | string | route for the icon, logo, and toolbarTitle. Defaults to '/'.
 
 
 ## Usage
@@ -22,7 +23,7 @@
 Example for Nav Layout:
 
 ```html
-<td-layout-nav toolbarTitle="title" logo="logo" icon="icon" color="color">
+<td-layout-nav toolbarTitle="title" logo="logo" icon="icon" color="color" navigationRoute="/">
   <div td-toolbar-content>
     .. main toolbar content
   </div>

diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.html b/src/platform/core/layout/layout-nav/layout-nav.component.html
@@ -3,9 +3,9 @@
     <button md-icon-button class="td-menu-button" *ngIf="isMainSidenavAvailable" (click)="openMainSidenav()">
       <md-icon class="md-24">menu</md-icon>
     </button>
-    <md-icon *ngIf="icon">{{icon}}</md-icon>
-    <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
-    <span *ngIf="toolbarTitle">{{toolbarTitle}}</span>
+    <md-icon *ngIf="icon" [routerLink]="navigationRoute" class="cursor-pointer">{{icon}}</md-icon>
+    <md-icon *ngIf="logo && !icon" class="md-icon-logo cursor-pointer" [svgIcon]="logo" [routerLink]="navigationRoute"></md-icon>
+    <span *ngIf="toolbarTitle" class="cursor-pointer" [routerLink]="navigationRoute">{{toolbarTitle}}</span>
     <ng-content select="[toolbar-content], [td-toolbar-content]"></ng-content>
   </md-toolbar>
   <div flex layout="column" class="content md-content">

diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.ts b/src/platform/core/layout/layout-nav/layout-nav.component.ts
@@ -39,14 +39,23 @@ export class TdLayoutNavComponent {
    */
   @Input('color') color: string = 'primary';
 
+  /**
+   * navigationRoute?: string
+   *
+   * option to set the combined logo, icon, toolbar title route
+   * defaults to '/'
+   */
+  @Input('navigationRoute') navigationRoute: string = '/';
+
   /**
    * Checks if there is a [TdLayoutComponent] as parent.
    */
   get isMainSidenavAvailable(): boolean {
     return !!this._layout;
   }
 
-  constructor(@Optional() @Inject(forwardRef(() => TdLayoutComponent)) private _layout: TdLayoutComponent) {}
+  constructor(@Optional() @Inject(forwardRef(() => TdLayoutComponent))
+              private _layout: TdLayoutComponent) { }
 
   /**
    * If main sidenav is available, it will open the sidenav of the parent [TdLayoutComponent].

diff --git a/src/platform/core/layout/layout.component.scss b/src/platform/core/layout/layout.component.scss
@@ -6,8 +6,8 @@
   height: 100%;
   overflow: hidden;
 
-  // Ensuring sidenav content has flex column properties
   /deep/ {
+    // Ensuring sidenav content has flex column properties
     & > md-sidenav-container > md-sidenav > .md-sidenav-focus-trap >.cdk-focus-trap-content {
       display: -webkit-box;
       display: -webkit-flex;

diff --git a/src/platform/core/layout/layout.module.ts b/src/platform/core/layout/layout.module.ts
@@ -2,6 +2,7 @@ import { Type } from '@angular/core';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 import { MdSidenavModule, MdToolbarModule, MdButtonModule, MdIconModule, MdCardModule, MdListModule } from '@angular/material';
 
 import { TdLayoutComponent } from './layout.component';
@@ -32,6 +33,7 @@ export { TdLayoutComponent, TdLayoutNavComponent, TdLayoutNavListComponent,
 @NgModule({
   imports: [
     CommonModule,
+    RouterModule,
     MdSidenavModule.forRoot(),
     MdToolbarModule.forRoot(),
     MdButtonModule.forRoot(),

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,9 +1,9 @@
 <md-toolbar [color]="color" [style.background-image]="backgroundImage" [class.td-toolbar-background]="!!isBackgroundAvailable">
   <div layout="column" flex>
     <span *ngIf="icon || logo || sidenavTitle" layout="row" layout-align="start end">
-      <md-icon *ngIf="icon">{{icon}}</md-icon>
-      <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
-      <span class="md-subhead" *ngIf="sidenavTitle">{{sidenavTitle}}</span>
+      <md-icon *ngIf="icon" (click)="close()" [routerLink]="navigationRoute" class="cursor-pointer">{{icon}}</md-icon>
+      <md-icon *ngIf="logo && !icon" class="md-icon-logo cursor-pointer" [svgIcon]="logo" (click)="close()" [routerLink]="navigationRoute"></md-icon>
+      <span class="md-subhead cursor-pointer" *ngIf="sidenavTitle" (click)="close()" [routerLink]="navigationRoute">{{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()">

diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts
@@ -77,6 +77,14 @@ export class TdNavigationDrawerComponent implements OnInit, OnDestroy {
    */
   @Input('color') color: string;
 
+  /**
+   * navigationRoute?: string
+   *
+   * option to set the combined logo, icon, toolbar title route
+   * defaults to '/'
+   */
+  @Input('navigationRoute') navigationRoute: string = '/';
+
   /**
    * backgroundUrl?: SafeResourceUrl
    *