breaking(layouts): Breaking Change: more flexible nav lists (#43)

* ⭐️ Changing `<list-items>` to use `<md-nav-list>` so we cna declare a `dense` attribute. * removed unused imports * ⚡️ Breaking Change: Using attributes instead of elements for Content Projection in layouts. * upodate(docs): add menu-items & list-items to docs * fixed property logout
Teradata · Aug 18, 2016 · 1df3f42 · 1df3f42
1 parent 90fba53
commit 1df3f42
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 57 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,6 @@
 <td-layout #layout title="Covalent" logo="app/assets/icons/teradata.svg" displayName="">
-  <menu-items>
+  <md-nav-list menu-items>
     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
-    <md-divider></md-divider>
-  </menu-items>
+  </md-nav-list>
   <router-outlet></router-outlet>
 </td-layout>
diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
@@ -1,5 +1,5 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
-  <list-items>
+  <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:
 true}">
@@ -9,7 +9,7 @@ <h3 md-line> {{item.title}} </h3>
         </a>
         <md-divider *ngIf="!last" md-inset></md-divider>
       </template>
-  </list-items>
+  </md-nav-list>
   <nav-toolbar-content layout="row" layout-align="center center" flex>
     <span>Teradata Components</span>
     <span flex></span>

diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
@@ -1,5 +1,5 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
-  <list-items>
+  <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:
 true}">
@@ -9,7 +9,7 @@ <h3 md-line> {{item.title}} </h3>
         </a>
         <md-divider *ngIf="!last" md-inset></md-divider>
       </template>
-  </list-items>
+  </md-nav-list>
   <nav-toolbar-content layout="row" layout-align="center center" flex>
     <span>Documentation</span>
     <span flex></span>

diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
@@ -34,7 +34,7 @@ <h3 md-line><code>logo?: string</code></h3>
             <td-step [active]="true" label="Step 2: menu-items" sublabel="the sidenav menu items">
               <md-list>
                 <md-list-item>
-                  <h3 md-line><code><![CDATA[<menu-items>]]></code></h3>
+                  <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
                   <p md-line>The menu items wrapper</p>
                 </md-list-item>
                 <md-divider></md-divider>
@@ -100,12 +100,12 @@ <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
             <![CDATA[
             <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
-              <menu-items>
+              <md-nav-list menu-items>
                 <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                   <md-icon>{ {item.icon} }</md-icon>
                   { {item.title} }
                 </a>
-              </menu-items>
+              </md-nav-list>
               <td-layout-nav title="Toolbar Title" logo="path/to/toolbar-logo.svg">
                 <td-layout-card-over title="Card Title" subtitle="Card subtitle">
                   <router-outlet></router-outlet>

diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -1,6 +1,6 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <td-layout-manage-list #list>
-    <list-items>
+    <md-nav-list list-items>
       <a md-list-item>
         <md-icon>folder</md-icon>
         Item Name
@@ -17,7 +17,7 @@
         <md-icon>delete</md-icon>
         Item Name
       </a>
-    </list-items>
+    </md-nav-list>
     <toolbar-buttons layout="row" layout-align="start center" flex>
       <span flex></span>
       <button md-button class="md-icon-button"><md-icon class="md-24">view_module</md-icon></button>
@@ -60,7 +60,7 @@ <h3 md-line><code>logo?: string</code></h3>
               <td-step [active]="true" label="Step 2: menu-items" sublabel="the sidenav menu items">
                 <md-list>
                   <md-list-item>
-                    <h3 md-line><code><![CDATA[<menu-items>]]></code></h3>
+                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
                     <p md-line>The menu items wrapper</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -99,8 +99,8 @@ <h3 md-line><code>logo?: string</code></h3>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
-                    <h3 md-line><code><![CDATA[<list-items>]]></code></h3>
-                    <p md-line>The list items wrapper</p>
+                    <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
+                    <p md-line>The list items wrapper with optional <code>dense</code> attribute </p>
                   </md-list-item>
                   <md-divider></md-divider>
                   <md-list-item>
@@ -136,21 +136,21 @@ <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
                 <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
-                  <menu-items>
+                  <md-nav-list menu-items>
                     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                       <md-icon>{ {item.icon} }</md-icon>
                       { {item.title} }
                     </a>
-                  </menu-items>
+                  </md-nav-list>
                   <td-layout-manage-list #list title="Toolbar Title" logo="path/to/toolbar-logo.svg">
-                    <list-items>
+                    <md-nav-list list-items>
                       <template let-item let-last="last" ngFor [ngForOf]="items">
                           <a md-list-item [routerLink]="[item.route]">
                             <md-icon md-list-avatar>{ {item.icon} }</md-icon>
                             { {item.title} }
                           </a>
                       </template>
-                    </list-items>
+                    </md-nav-list>
                     <toolbar-buttons layout="row" layout-align="start center" flex>
                       <span flex></span>
                       <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>

diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -1,5 +1,5 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
-  <list-items>
+  <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
@@ -8,7 +8,7 @@ <h3 md-line> {{item.title}} </h3>
         </a>
         <md-divider *ngIf="!last" md-inset></md-divider>
       </template>
-  </list-items>
+  </md-nav-list>
   <nav-toolbar-content layout="row" layout-align="center center" flex>
     <span>Nav List Layout</span>
     <span flex></span>
@@ -48,7 +48,7 @@ <h3 md-line><code>logo?: string</code></h3>
             <td-step [active]="true" label="Step 2: menu-items" sublabel="the sidenav menu items">
               <md-list>
                 <md-list-item>
-                  <h3 md-line><code><![CDATA[<menu-items>]]></code></h3>
+                  <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
                   <p md-line>The menu items wrapper</p>
                 </md-list-item>
                 <md-divider></md-divider>
@@ -87,8 +87,8 @@ <h3 md-line><code>logo?: string</code></h3>
                 </md-list-item>
                 <md-divider></md-divider>
                 <md-list-item>
-                  <h3 md-line><code><![CDATA[<list-items>]]></code></h3>
-                  <p md-line>The list items wrapper</p>
+                  <h3 md-line><code><![CDATA[<md-nav-list list-items>]]></code></h3>
+                  <p md-line>The list items wrapper with optional <code>dense</code> attribute </p>
                 </md-list-item>
                 <md-divider></md-divider>
                 <md-list-item>
@@ -105,14 +105,14 @@ <h3 class="md-title">HTML</h3>
           <td-highlight lang="html">
               <![CDATA[
               <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
-                <menu-items>
+                <md-nav-list menu-items>
                   <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                     <md-icon>{ {item.icon} }</md-icon>
                     { {item.title} }
                   </a>
-                </menu-items>
+                </md-nav-list>
                 <td-layout-nav-list #list title="Toolbar Title" logo="path/to/toolbar-logo.svg">
-                  <list-items>
+                  <md-nav-list list-items>
                     <template let-item let-last="last" ngFor [ngForOf]="items">
                         <a md-list-item [routerLink]="[item.route]">
                           <md-icon md-list-avatar>{ {item.icon} }</md-icon>
@@ -121,7 +121,7 @@ <h3 md-line> { {item.title} } </h3>
                         </a>
                         <md-divider *ngIf="!last" md-inset></md-divider>
                       </template>
-                  </list-items>
+                  </md-nav-list>
                   <router-outlet></router-outlet>
                 </td-layout-nav-list>
               </td-layout>

diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -35,7 +35,7 @@ <h3 md-line><code>logo?: string</code></h3>
               <td-step [active]="true" label="Step 2: menu-items" sublabel="the sidenav menu items">
                 <md-list>
                   <md-list-item>
-                    <h3 md-line><code><![CDATA[<menu-items>]]></code></h3>
+                    <h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
                     <p md-line>The menu items wrapper (will be moved to sidenav automatically)</p>
                   </md-list-item>
                   <md-divider></md-divider>
@@ -82,12 +82,12 @@ <h3 class="md-title">HTML</h3>
             <td-highlight lang="html">
                 <![CDATA[
                 <td-layout #layout title="Sidenav Title" logo="path/to/sidenav-logo.svg">
-                  <menu-items>
+                  <md-nav-list menu-items>
                     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()">
                       <md-icon>{ {item.icon} }</md-icon>
                       { {item.title} }
                     </a>
-                  </menu-items>
+                  </md-nav-list>
                   <td-layout-nav title="Toolbar Title" logo="path/to/toolbar-logo.svg">
                     <router-outlet></router-outlet>
                   </td-layout-nav>

diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
@@ -1,5 +1,5 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
-  <list-items>
+  <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:
 true}">
@@ -9,7 +9,7 @@ <h3 md-line> {{item.title}} </h3>
         </a>
         <md-divider *ngIf="!last" md-inset></md-divider>
       </template>
-  </list-items>
+  </md-nav-list>
   <nav-toolbar-content layout="row" layout-align="center center" flex>
     <span>Teradata Style Guide</span>
     <span flex></span>

diff --git a/src/platform/core/README.md b/src/platform/core/README.md
@@ -29,7 +29,7 @@ There are five types of layouts:
 
 #### td-layout
 
-`<menu-items>` is used to include items in the sidenav.
+`<md-nav-list menu-items>` is used to include items in the sidenav.
 
 Properties:
 
@@ -38,15 +38,15 @@ Properties:
 | `title` | `string` | Title to be displayed.
 | `icon` | `string` | Uses material icon names.
 | `displayName` | `string` | Username to be displayed.
-| `tdOnLogout` | `function()` | Function executed when logout it pressed.
+| `logout` | `function()` | Function executed when logout it pressed.
 
 #### td-layout-nav
 
 `<toolbar-content>` is used to include items in the toolbar.
 
 #### td-layout-nav-list
 
-`<list-items>` is used to include items in the left side list.
+`<md-nav-list list-items>` is used to include items in the left side list.
 `<list-toolbar-content>` is used to include items in the left side toolbar.
 `<nav-toolbar-content>` is used to include items in the right side toolbar.
 
@@ -61,7 +61,7 @@ Properties:
 
 #### td-layout-manage-items
 
-`<list-items>` is used to include items in the left side list.
+`<md-nav-list list-items>` is used to include items in the left side list.
 `<toolbar-content>` is used to include items in the toolbar.
 
 #### Usage
@@ -92,14 +92,14 @@ Example Nav List Layout:
     <span flex></span>
     <button md-button (click)="search()" class="md-icon-button"><md-icon class="md-24">search</md-icon></button>
   </list-toolbar-content>
-  <list-items>
+  <md-nav-list list-items>
     <a md-list-item>
     <md-icon md-list-avatar>dashboard</md-icon>
     <h3 md-line> Item Name </h3>
     <p md-line> Item description </p>
     </a>
     <md-divider *ngIf="!last" md-inset></md-divider>
-  </list-items>
+  </md-nav-list>
   <nav-toolbar-content layout="row" layout-align="center center" flex>
     <span>View Name</span>
     <span flex></span>
@@ -113,9 +113,9 @@ Example for Manage List Layout / Nav Layout combo:
 ```html
 <td-layout-nav>
   <td-layout-manage-list #list>
-    <list-items>
+    <md-nav-list list-items>
       ...
-    </list-items>
+    </md-nav-list>
     <toolbar-buttons>
       ...
     </toolbar-buttons>

diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html
@@ -2,9 +2,7 @@
   <md-content flex layout="row" layout-fill>
     <md-sidenav hide-xs #end align="end" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1">
       <md-content flex class="list">
-        <md-nav-list>
-          <ng-content select="list-items"></ng-content>
-        </md-nav-list>
+        <ng-content select="[list-items]"></ng-content>
       </md-content>
     </md-sidenav>
     <md-content layout="column" layout-fill class="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
@@ -4,12 +4,11 @@ import { ViewChild } from '@angular/core';
 
 import { MdToolbar } from '@angular2-material/toolbar';
 import { MD_SIDENAV_DIRECTIVES, MdSidenav } from '@angular2-material/sidenav';
-import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 
 import { TdLayoutService } from '../services/layout.service';
 
 @Component({
-  directives: [ MdToolbar , MD_SIDENAV_DIRECTIVES, MD_LIST_DIRECTIVES],
+  directives: [ MdToolbar , MD_SIDENAV_DIRECTIVES ],
   moduleId: module.id,
   selector: 'td-layout-manage-list',
   styleUrls: [ 'layout-manage-list.component.css' ],

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
@@ -1,6 +1,6 @@
 <div layout="column" layout-fill>
   <md-content flex layout-fill>
-    <md-sidenav-layout layout="row"  layout-fill>
+    <md-sidenav-layout layout="row" layout-fill>
       <md-sidenav #list opened align="start" mode="side" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1" flex-gt-xs="none">
         <md-toolbar color="primary" class="md-whiteframe-z1">
           <button md-button (click)="menuClick()" class="md-icon-button"><md-icon class="md-24">menu</md-icon></button>
@@ -10,9 +10,7 @@
           <ng-content select="list-toolbar-content"></ng-content>
         </md-toolbar>
         <md-content flex class="list">
-          <md-nav-list>
-            <ng-content select="list-items"></ng-content>
-          </md-nav-list>
+          <ng-content select="[list-items]"></ng-content>
         </md-content>
       </md-sidenav>
       <md-content layout="column" layout-fill class="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
@@ -6,12 +6,11 @@ import { MdToolbar } from '@angular2-material/toolbar';
 import { MD_SIDENAV_DIRECTIVES, MdSidenav } from '@angular2-material/sidenav';
 import { MdIcon } from '@angular2-material/icon';
 import { MdButton } from '@angular2-material/button';
-import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 
 import { TdLayoutService } from '../services/layout.service';
 
 @Component({
-  directives: [ MdToolbar , MD_SIDENAV_DIRECTIVES, MdIcon, MdButton, MD_LIST_DIRECTIVES],
+  directives: [ MdToolbar , MD_SIDENAV_DIRECTIVES, MdIcon, MdButton ],
   moduleId: module.id,
   selector: 'td-layout-nav-list',
   styleUrls: [ 'layout-nav-list.component.css' ],

diff --git a/src/platform/core/layout/layout.component.html b/src/platform/core/layout/layout.component.html
@@ -17,11 +17,13 @@
     <md-nav-list *ngIf="isShowUserMenu()">
       <a md-list-item (click)="logoutClick()"><md-icon>exit_to_app</md-icon> Logout</a>
     </md-nav-list>
-    <md-nav-list *ngIf="!isShowUserMenu()">
-      <ng-content select="menu-items"></ng-content>
-      <md-divider></md-divider>
-      <a md-list-item (click)="sideMenu.close()"><md-icon>cancel</md-icon> Close</a>
-    </md-nav-list>
+    <div *ngIf="!isShowUserMenu()">
+      <ng-content select="[menu-items]"></ng-content>
+      <md-nav-list>
+        <md-divider></md-divider>
+        <a md-list-item (click)="sideMenu.close()"><md-icon>cancel</md-icon> Close</a>
+      </md-nav-list>
+    </div>
   </md-sidenav>
   <ng-content></ng-content>
 </md-sidenav-layout>