feature(layouts): responsive nav-list (#21)

* udpate(nav-list): make list nav responsive * udpate(layouts-overview): add images * update(nav-list): min-width for list * update(layout): keep list visible on desktop * update(docs): add list toggle * update(layout-nav-list): better responsive actions * update(navs): toggle list * update(manage-list): hide filters sidenav * update(layouts): remove back-arrow button - add card footer actions instead * postinstall webdriver-manager update * travis failing with webdriver update, separate in 2 steps
Teradata · Jul 18, 2016 · 9712754 · 9712754
1 parent c21c35b
commit 9712754
Show file tree

Hide file tree

Showing 21 changed files with 145 additions and 101 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "e2e-test": "protractor ./config/protractor.conf.js",
     "tslint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\"",
     "typings": "typings install --global",
-    "postinstall": "npm run typings",
+    "postinstall": "npm run typings && webdriver-manager update",
+    "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
     "pretest": "rm -rf ./dist && ng build",
     "test": "karma start ./config/karma.conf.js",
     "bump-dev": "gulp bump-version",

diff --git a/src/app/assets/images/card-over.png b/src/app/assets/images/card-over.png
diff --git a/src/app/assets/images/manage-list.png b/src/app/assets/images/manage-list.png
diff --git a/src/app/assets/images/nav-list.png b/src/app/assets/images/nav-list.png
diff --git a/src/app/assets/images/nav-view.png b/src/app/assets/images/nav-view.png
diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item [routerLink]="[item.route]">
+        <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>

diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item [routerLink]="[item.route]">
+        <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>

diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
@@ -1,16 +1,8 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <td-layout-card-over>
-    <md-card-title>
-      <div layout="row" layout-align="start center">
-        <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-          <md-icon >arrow_back</md-icon>
-        </button>
-        Card Over Layout
-      </div>
-    </md-card-title>
+    <md-card-title>Card Over Layout</md-card-title>
     <md-card-subtitle>A card overlaying a toolbar (this page is using card over)</md-card-subtitle>
     <md-divider></md-divider>
-
     <md-card-content>
       <div layout-gt-md="row">
         <div flex-gt-md="45">
@@ -147,6 +139,11 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
         </div>
       </div>
     </md-card-content>
-
+    <md-divider></md-divider>
+    <md-card-actions layout="row">
+        <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+        <span flex></span>
+        <a md-button color="accent" [routerLink]="'/layouts/manage-list'">Manage List</a>
+    </md-card-actions>
   </td-layout-card-over>
 </td-layout-nav>
diff --git a/src/app/components/layouts/card-over/card-over.component.ts b/src/app/components/layouts/card-over/card-over.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-card-over',
@@ -26,9 +26,4 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 })
 export class CardOverComponent {
 
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -26,14 +26,7 @@
       <button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
     </toolbar-buttons>
     <md-card>
-      <md-card-title>
-        <div layout="row" layout-align="start center">
-          <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-            <md-icon >arrow_back</md-icon>
-          </button>
-          Manage List Layout
-        </div>
-      </md-card-title>
+      <md-card-title> Manage List Layout</md-card-title>
       <md-card-subtitle>Content/object management views (this page is using manage list)</md-card-subtitle>
       <md-divider></md-divider>
       <md-card-content>
@@ -198,6 +191,10 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
           </div>
         </div>
       </md-card-content>
+      <md-divider></md-divider>
+      <md-card-actions layout="row">
+          <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+      </md-card-actions>
     </md-card>
   </td-layout-manage-list>
 </td-layout-nav>
diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-manage-list',
@@ -26,9 +26,4 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 })
 export class ManageListComponent {
 
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
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,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item>
+        <a md-list-item (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>
@@ -14,14 +14,7 @@ <h3 md-line> {{item.title}} </h3>
     <span flex></span>
   </nav-toolbar-content>
   <md-card>
-    <md-card-title>
-      <div layout="row" layout-align="start center">
-        <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-          <md-icon >arrow_back</md-icon>
-        </button>
-        Nav List Layout
-      </div>
-    </md-card-title>
+    <md-card-title>Nav List Layout</md-card-title>
     <md-card-subtitle>The Nav View with an embedded list (this page is using nav list)</md-card-subtitle>
     <md-divider></md-divider>
     <md-card-content>
@@ -165,5 +158,11 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
         </div>
       </div>
     </md-card-content>
+    <md-divider></md-divider>
+    <md-card-actions layout="row">
+        <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+        <span flex></span>
+        <a md-button color="accent" [routerLink]="'/layouts/card-over'">Card Over</a>
+    </md-card-actions>
   </md-card>
 </td-layout-nav-list>
diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,21 +10,21 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-nav-list',
   styleUrls: ['nav-list.component.css'],
   templateUrl: 'nav-list.component.html',
 })
 export class NavListComponent {
-
   items: Object[] = [{
     description: 'A simple layout with toolbar & sidenav',
     icon: 'view_compact',
@@ -47,10 +46,4 @@ export class NavListComponent {
     route: '/manage-list',
     title: 'Management List View',
   }];
-
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -1,14 +1,7 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <div class="md-padding">
     <md-card>
-      <md-card-title>
-        <div layout="row" layout-align="start center">
-          <button md-button class="md-icon-button md-icon-button-mini" (click)="goBack()">
-            <md-icon >arrow_back</md-icon>
-          </button>
-          Nav View
-        </div>
-      </md-card-title>
+      <md-card-title>Nav View</md-card-title>
       <md-card-subtitle>A simple layout with toolbar &amp; sidenav (this page is using nav view)</md-card-subtitle>
       <md-divider></md-divider>
       <md-card-content>
@@ -126,6 +119,12 @@ <h3 class="md-title">TypeScript routes for sidenav</h3>
           </div>
         </div>
       </md-card-content>
+      <md-divider></md-divider>
+      <md-card-actions layout="row">
+        <a md-button [routerLink]="'/layouts'">Back to Overview</a>
+        <span flex></span>
+        <a md-button color="accent" [routerLink]="'/layouts/nav-list'">Nav List</a>
+      </md-card-actions>
     </md-card>
   </div>
 </td-layout-nav>
diff --git a/src/app/components/layouts/nav-view/nav-view.component.ts b/src/app/components/layouts/nav-view/nav-view.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { MdButton } from '@angular2-material/button';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 import { MdIcon } from '@angular2-material/icon';
@@ -11,13 +10,14 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 
 @Component({
   directives: [
-    MdButton,
+    MD_BUTTON_DIRECTIVES,
     MD_CARD_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdIcon,
     TD_LAYOUT_DIRECTIVES,
     TdHighlightComponent,
     TD_STEPS_DIRECTIVES,
+    ROUTER_DIRECTIVES,
   ],
   moduleId: module.id,
   selector: 'td-layouts-nav-view',
@@ -26,9 +26,4 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
 })
 export class NavViewComponent {
 
-  constructor(private router: Router) {}
-
-  goBack(): void {
-    this.router.navigate(['/layouts']);
-  }
 }
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
@@ -1,5 +1,25 @@
 <td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
   <td-layout-card-over title="Layout Options" subtitle="We offer 4 Material Design layouts for you">
+    <md-card-content>
+      <div layout="row" layout-padding>
+        <a md-button flex [routerLink]="'nav-view'">
+          <img src="app/assets/images/nav-view.png" alt="Navigation View">
+          <div class="md-subtitle">Nav View</div>
+        </a>
+        <a md-button flex [routerLink]="'nav-list'">
+          <img src="app/assets/images/nav-list.png" alt="Navigation and List">
+          <div class="md-subtitle">Nav List</div>
+        </a>
+        <a md-button flex [routerLink]="'card-over'">
+          <img src="app/assets/images/card-over.png" alt="Card Overlap View">
+          <div class="md-subtitle">Card Over</div>
+        </a>
+        <a md-button flex [routerLink]="'manage-list'">
+         <img src="app/assets/images/manage-list.png" alt="Management List">
+         <div class="md-subtitle">Manage List</div>
+        </a>
+      </div>
+    </md-card-content>
     <md-nav-list>
       <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item [routerLink]="[item.route]">

diff --git a/src/app/components/layouts/overview/overview.component.scss b/src/app/components/layouts/overview/overview.component.scss
@@ -0,0 +1,4 @@
+img {
+    height: auto;
+    width: 100%;
+}
diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
@@ -1,7 +1,7 @@
 <td-layout-nav-list #list logo="app/assets/icons/teradata.svg" title="Covalent">
   <list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
-        <a md-list-item [routerLink]="[item.route]">
+        <a md-list-item [routerLink]="[item.route]" (click)="list.toggle()">
           <md-icon md-list-avatar>{{item.icon}}</md-icon>
           <h3 md-line> {{item.title}} </h3>
           <p md-line> {{item.description}} </p>

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
@@ -1,6 +1,6 @@
 <div layout="column" layout-fill>
   <md-content flex layout="row" layout-fill>
-    <md-sidenav #end align="end" layout="column" layout-fill class="md-sidenav-left app-list md-whiteframe-z1">
+    <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>