feat(examples): add basic menu side navigation

justindujardin · Jan 24, 2016 · 684b7dc · 684b7dc
1 parent 6043b12
commit 684b7dc
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 61 deletions.
diff --git a/examples/app.html b/examples/app.html
@@ -1,63 +1,75 @@
-<md-toolbar class="fixed-toolbar"
-            md-peekaboo
-            [break]="190"
+<main layout="row" flex>
+  <nav md-sidenav="menu" class="examples-toc md-sidenav-left md-whiteframe-z2">
+    <h1>Components</h1>
+    <ul>
+      <li *ngFor="#value of components"><a [routerLink]="['Component', {id: value.id}]">{{value.name}}</a></li>
+    </ul>
+  </nav>
+  <section layout="column" layout-align="start center" flex>
+    <md-toolbar class="fixed-toolbar"
+                md-peekaboo
+                [break]="190"
+                breakAction="show">
+    </md-toolbar>
+    <md-toolbar class="hero">
+      <h1 md-peekaboo
+          [breakMd]="72"
+          [breakXs]="20"
+          breakAction="hide">{{navigation?.currentTitle}}</h1>
+    </md-toolbar>
+    <md-toolbar class="fixed-toolbar">
+      <div class="md-toolbar-tools">
+        <button md-button
+                class="md-hamburger md-icon-button"
+                (click)="showMenu($event)"
+                aria-label="Home">
+          <i md-icon class="md-dark">menu</i>
+        </button>
+        <h2 md-peekaboo
+            [breakMd]="72"
+            [breakXs]="20"
             breakAction="show">
-</md-toolbar>
-<md-toolbar class="hero">
-  <h1 md-peekaboo
-      [breakMd]="72"
-      [breakXs]="20"
-      breakAction="hide">{{navigation?.currentTitle}}</h1>
-</md-toolbar>
-<md-toolbar class="fixed-toolbar">
-  <div class="md-toolbar-tools">
-    <button md-button
-            class="md-hamburger md-icon-button"
-            [routerLink]="['Index']"
-            aria-label="Home">
-      <i md-icon class="md-dark">{{navigation?.currentTitle == site ? 'menu' : 'arrow_back'}}</i>
-    </button>
-    <h2 md-peekaboo
-        [breakMd]="72"
-        [breakXs]="20"
-        breakAction="show">
-      <span class="verbose-title" *ngIf="navigation?.currentTitle != site">Components <small>–</small>&nbsp;</span>
-      <span>{{navigation?.currentTitle}}</span>
-    </h2>
-    <span flex></span>
+          <span class="verbose-title" *ngIf="navigation?.currentTitle != site">Components <small>–</small>&nbsp;</span>
+          <span>{{navigation?.currentTitle}}</span>
+        </h2>
+        <span flex></span>
     <span md-peekaboo
           [breakMd]="72"
           breakAction="show"
           *ngIf="version" class="md-caption">v{{version}}</span>
-  </div>
-</md-toolbar>
-<md-toolbar class="shadow-toolbar md-whiteframe-z1" md-peekaboo [break]="210" breakAction="show"></md-toolbar>
+      </div>
+    </md-toolbar>
+    <md-toolbar class="shadow-toolbar md-whiteframe-z1" md-peekaboo [break]="210" breakAction="show"></md-toolbar>
+
+    <md-content class="examples" md-scroll-y layout-padding>
+      <router-outlet></router-outlet>
+    </md-content>
+
 
-<md-content class="examples" md-scroll-y layout-padding>
-  <router-outlet></router-outlet>
-</md-content>
+    <footer>
+      <div class="container" layout="row" layout-align="center center">
+        <a class="previous" flex="50" *ngIf="navigation.prevLink"
+           layout="row" layout-align="start center"
+           [routerLink]="navigation.prevLink.routeLink">
+          <i md-icon>arrow_back</i>
+          <span layout="column" show-gt-sm hide>
+            <span class="label">Previous</span>
+            <span class="name md-title">{{navigation.prevLink.brief}}</span>
+          </span>
 
+        </a>
+        <a class="next" flex="50" *ngIf="navigation.nextLink"
+           layout="row" layout-align="end center"
+           [routerLink]="navigation.nextLink.routeLink">
+          <span layout="column">
+            <span class="label">Next</span>
+            <div class="name md-title">{{navigation.nextLink.brief}}</div>
+          </span>
+          <i md-icon>arrow_forward</i>
+        </a>
+      </div>
+    </footer>
 
-<footer>
-  <div class="container" layout="row" layout-align="center center">
-    <a class="previous" flex="50" *ngIf="navigation.prevLink"
-       layout="row" layout-align="start center"
-       [routerLink]="navigation.prevLink.routeLink">
-      <i md-icon>arrow_back</i>
-      <span layout="column" show-gt-sm hide>
-        <span class="label">Previous</span>
-        <span class="name md-title">{{navigation.prevLink.brief}}</span>
-      </span>
+  </section>
+</main>
 
-    </a>
-    <a class="next" flex="50" *ngIf="navigation.nextLink"
-       layout="row" layout-align="end center"
-       [routerLink]="navigation.nextLink.routeLink">
-      <span layout="column">
-        <span class="label">Next</span>
-        <div class="name md-title">{{navigation.nextLink.brief}}</div>
-      </span>
-      <i md-icon>arrow_forward</i>
-    </a>
-  </div>
-</footer>
diff --git a/examples/app.ts b/examples/app.ts
@@ -22,6 +22,8 @@ import {AfterViewInit} from "angular2/core";
 import {VersionService} from "./services/version";
 import { AppViewListener } from 'angular2/src/core/linker/view_listener';
 import { DebugElementViewListener } from 'angular2/platform/common_dom';
+import {SidenavService} from "ng2-material/components/sidenav/sidenav";
+import {IComponentMeta} from "./services/components";
 
 /**
  * Describe an example that can be dynamically loaded.
@@ -48,17 +50,32 @@ export interface IExampleData {
 })
 export class DemosApp {
 
-  public site:string = 'Angular2 Material';
+  public site: string = 'Angular2 Material';
 
   meta: any;
 
   version: string;
 
-  constructor(http: Http, public navigation: NavigationService) {
+  components: IComponentMeta[] = [];
+
+  constructor(http: Http,
+              public navigation: NavigationService,
+              private _components: ComponentsService,
+              private _sidenav: SidenavService) {
     http.get('public/version.json')
       .subscribe((res: Response) => {
         this.version = res.json().version;
       });
+
+    this._components.getComponents()
+      .then((comps) => {
+        this.components = comps;
+      });
+
+  }
+
+  showMenu(event?) {
+    this._sidenav.show('menu');
   }
 
 }
@@ -69,7 +86,7 @@ let appProviders = [
   bind(LocationStrategy).toClass(HashLocationStrategy)
 ];
 
-if(window.location.href.indexOf('github.com') !== -1){
+if (window.location.href.indexOf('github.com') !== -1) {
   enableProdMode();
 }
 else {

diff --git a/examples/routes/component.ts b/examples/routes/component.ts
@@ -9,6 +9,7 @@ import Example from "../example";
 import {ROUTER_DIRECTIVES} from "angular2/router";
 import {NavigationService} from "../services/navigation";
 import {DOM} from "angular2/src/platform/dom/dom_adapter";
+import {SidenavService} from "../../ng2-material/components/sidenav/sidenav";
 
 @Component({
   selector: 'component-page',
@@ -30,10 +31,12 @@ export class ComponentPage implements OnInit {
 
   constructor(private _components: ComponentsService,
               private _navigation: NavigationService,
+              private _sidenav: SidenavService,
               private _routeParams: RouteParams) {
   }
 
   ngOnInit() {
+    this._sidenav.hide('menu');
     let id = this._routeParams.get('id');
     this._components.getComponent(id).then((c: IComponentMeta) => {
       this.value = c;

diff --git a/examples/routes/index.html b/examples/routes/index.html
@@ -90,8 +90,9 @@ <h1 class="examples-title">Using a CDN build</h1>
 
 <section class="examples-intro">
   <h1 class="examples-title seed-title">What is Material Design?</h1>
-  <p>If you're not familiar with Material Design, here are two videos. The first introduces it very generally, and the
-    second talks about the use of color.</p>
+  <p>If you're not familiar with Google's <a
+    href="https://www.google.com/design/spec/material-design/introduction.html">Material Design</a>, here are two
+    videos. The first introduces it very generally, and the second talks about the use of color.</p>
   <div>
     <div layout="column" layout-gt-lg="row" layout-padding layout-align="start center">
       <iframe flex="100" flex-gt-lg="50" width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw"

diff --git a/index.html b/index.html
@@ -31,7 +31,7 @@
 </script>
 
 
-<demos-app layout="column" layout-align="start center">
+<demos-app layout="row" layout-align="center start">
   <md-toolbar class="hero"><h1>ng2-material…</h1></md-toolbar>
 </demos-app>
 

diff --git a/ng2-material/components/form/messages.scss b/ng2-material/components/form/messages.scss
@@ -4,7 +4,7 @@
 
 form {
   //
-  // ngMessage base styles - animations moved to input.js
+  // ngMessage base styles
   //
   md-messages, [md-messages] {
     position: relative;