feat(docs): add basic card and toolbar examples

- scaffolding for examples page. mirror the content of angular-material for 1.x as closely as possible. use visual comparison as a gauge for whether the styles are translating as expected.
justindujardin · Dec 11, 2015 · b9ff27c · b9ff27c
1 parent bb4346f
commit b9ff27c
Show file tree

Hide file tree

Showing 21 changed files with 804 additions and 35 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -9,10 +9,32 @@ module.exports = function (grunt) {
       "<%- sourceRoot %>/**/*.css",
       "<%- sourceRoot %>/**/*.css.map"
     ],
+    copy: {
+      vendor: {
+        files: [
+          {
+            expand: true,
+            src: [
+              './node_modules/systemjs/dist/*.js',
+              './node_modules/angular2/bundles/angular2.dev.js',
+              './node_modules/angular2/typings/**/*'
+            ],
+            dest: 'vendor/'
+          }
+        ]
+      },
+      font: {
+        files: [{expand: true, src: ['./font/*.*'], dest: 'lib/ng2-material/'}]
+      },
+      styles: {
+        files: [{src: ['<%- sourceRoot %>/all.css'], dest: 'lib/ng2-material/ng2-material.css'}]
+      }
+    },
     notify: {
       options: {title: 'Material for Angular2'},
-      styles: {options: {message: 'Styles Compiled.'}},
-      source: {options: {message: 'Source Compiled.'}}
+      bundle: {options: {message: 'Output Bundle Built'}},
+      styles: {options: {message: 'Styles Compiled'}},
+      source: {options: {message: 'Source Compiled'}}
     },
     ts: {
       source: {
@@ -30,21 +52,17 @@ module.exports = function (grunt) {
         }]
       }
     },
-    'http-server': {
-      dev: {
-        root: 'public',
-        port: 8282,
-        host: 'localhost',
-        ext: 'html',
-        runInBackground: true,
-        https: true,
-        openBrowser: true
-      }
-    },
     watch: {
+      dist: {
+        files: ['<%- sourceRoot %>/**/*.js', '<%- sourceRoot %>/**/*.css'],
+        tasks: ['dist-bundle', 'notify:bundle']
+      },
       sass: {
-        files: ['<%- sourceRoot %>/**/*.scss'],
-        tasks: ['sass', 'notify:styles']
+        files: [
+          '<%- sourceRoot %>/**/*.css',
+          '<%- sourceRoot %>/*.css',
+          'app.css'],
+        tasks: ['sass', 'copy:styles', 'notify:styles']
       },
       ts: {
         files: ['<%- sourceRoot %>/**/*.ts'],
@@ -53,15 +71,15 @@ module.exports = function (grunt) {
     }
   });
 
-  grunt.loadNpmTasks('grunt-http-server');
+  grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-notify');
   grunt.loadNpmTasks('grunt-ts');
-  grunt.registerTask('default', ['ts', 'sass']);
-  grunt.registerTask('develop-ide', ['default', 'http-server']);
-  grunt.registerTask('develop', ['develop-ide', 'watch']);
+  grunt.registerTask('default', ['copy', 'ts', 'sass']);
+  grunt.registerTask('develop-ide', ['default', 'watch']);
+  grunt.registerTask('develop', ['default', 'watch']);
 
 
   grunt.registerTask('dist-bundle', 'Build a single-file javascript output.', function () {

diff --git a/app.html b/app.html
@@ -0,0 +1,41 @@
+<md-toolbar class="md-whiteframe-z1">
+  <div class="md-toolbar-tools">
+    <button md-button class="md-icon-button" aria-label="Settings">
+      <i md-icon class="md-light">menu</i>
+    </button>
+    <h2>
+      <span>Toolbar with Icon Buttons</span>
+    </h2>
+    <span flex></span>
+    <button md-button class="md-icon-button" aria-label="Favorite">
+      <i md-icon class="md-light">favorite</i>
+    </button>
+    <button md-button class="md-icon-button" aria-label="More">
+      <i md-icon class="md-light">more_vert</i>
+    </button>
+  </div>
+</md-toolbar>
+
+<md-content layout-padding>
+
+  <h1>Toolbar</h1>
+  <example name="Basic Usage">
+    <toolbar-basic-usage></toolbar-basic-usage>
+  </example>
+
+
+
+  <h1>Card</h1>
+  <example name="Basic Usage">
+    <card-basic-usage></card-basic-usage>
+  </example>
+
+  <example name="Action Buttons">
+    <card-action-buttons></card-action-buttons>
+  </example>
+
+  <example name="In Card Actions">
+    <card-in-card-actions></card-in-card-actions>
+  </example>
+
+</md-content>
diff --git a/app.scss b/app.scss
@@ -0,0 +1,20 @@
+@import "font/font";
+
+@import "ng2-material/all";
+@import "examples/example";
+
+demos-app {
+  .md-toolbar {
+    max-width: 200px;
+  }
+  > md-content {
+    max-width: 800px;
+    > h1 {
+      margin-top:40px;
+      color: md-color($md-primary,900);
+    }
+    .card-media {
+      background-color: md-color($md-background);
+    }
+  }
+}
diff --git a/app.ts b/app.ts
@@ -0,0 +1,23 @@
+import {Component, View} from 'angular2/core';
+import {bootstrap} from 'angular2/angular2';
+import {MATERIAL_DIRECTIVES} from './ng2-material/all';
+
+import {DEMO_DIRECTIVES} from './examples/all';
+import Example from './examples/example';
+
+
+
+@Component({
+  selector: 'demos-app'
+})
+@View({
+  templateUrl: 'app.html',
+  directives: [MATERIAL_DIRECTIVES, Example, DEMO_DIRECTIVES]
+})
+export class DemosApp {
+  constructor() {
+    console.log('bam');
+  }
+}
+
+bootstrap(DemosApp);
diff --git a/config.js b/config.js
@@ -2,22 +2,30 @@ System.config({
   baseUrl: './',
   transpiler: 'typescript',
   typescriptOptions: {
+    module: "system",
     resolveTypings: true,
     emitDecoratorMetadata: true,
     sourceMap: true,
     inlineSourceMap: false
   },
+  meta: {
+    'angular2/*': {build: false}
+  },
   packages: {
     'ng2-material': {
       main: './all.ts',
       defaultExtension: 'ts'
+    },
+    'examples': {
+      main: './all.ts',
+      defaultExtension: 'ts'
+    },
+    'angular2': {
+      baseUrl: './node_modules/angular2/bundles',
+      defaultExtension: 'js'
     }
   },
   map: {
     typescript: './node_modules/typescript/lib/typescript.js'
-  },
-  paths: {
-    "angular2/*": "./node_modules/angular2/bundles/angular2.dev.js"
-  },
-  defaultJSExtensions: true
+  }
 });
diff --git a/examples/all.ts b/examples/all.ts
@@ -0,0 +1,18 @@
+import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
+import CardBasicUsage from './components/card/basic_usage';
+import CardInCardActions from './components/card/in_card_actions';
+import CardActionButtons from './components/card/card_action_buttons';
+
+
+
+import ToolbarBasicUsage from './components/toolbar/basic_usage';
+
+/**
+ * Collection of Material Design component directives.
+ */
+export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
+  CardBasicUsage, CardInCardActions, CardActionButtons,
+  ToolbarBasicUsage
+]);
+
+export * from './example';
diff --git a/examples/base.ts b/examples/base.ts
@@ -0,0 +1 @@
+export {MATERIAL_DIRECTIVES} from '../ng2-material/all';
diff --git a/examples/components/card/basic_usage.html b/examples/components/card/basic_usage.html
@@ -0,0 +1,73 @@
+<md-content class="md-padding" layout="row" layout-wrap layout-align="center start">
+  <div flex="50" layout="column">
+    <md-card>
+      <md-card-title>
+        <md-card-title-text>
+          <span class="md-headline">Card with image</span>
+          <span class="md-subhead">Large</span>
+        </md-card-title-text>
+        <md-card-title-media>
+          <div class="md-media-lg card-media"></div>
+        </md-card-title-media>
+      </md-card-title>
+      <md-card-actions layout="row" layout-align="end center">
+        <button md-button>Action 1</button>
+        <button md-button>Action 2</button>
+      </md-card-actions>
+    </md-card>
+    <md-card>
+      <md-card-title>
+        <md-card-title-text>
+          <span class="md-headline">Card with  image</span>
+          <span class="md-subhead">Extra Large</span>
+        </md-card-title-text>
+      </md-card-title>
+      <md-card-content layout="row" layout-align="space-between">
+        <div class="md-media-xl card-media"></div>
+        <md-card-actions layout="column">
+          <button md-button class="md-icon-button" aria-label="Favorite">
+            <i md-icon>favorite</i>
+          </button>
+          <button md-button class="md-icon-button" aria-label="Settings">
+            <i md-icon>menu</i>
+          </button>
+          <button md-button class="md-icon-button" aria-label="Share">
+            <i md-icon>share_arrow</i>
+          </button>
+        </md-card-actions>
+      </md-card-content>
+    </md-card>
+  </div>
+  <div flex="50" layout="column">
+    <md-card>
+      <md-card-title>
+        <md-card-title-text>
+          <span class="md-headline">Card with image</span>
+          <span class="md-subhead">Small</span>
+        </md-card-title-text>
+        <md-card-title-media>
+          <div class="md-media-sm card-media"></div>
+        </md-card-title-media>
+      </md-card-title>
+      <md-card-actions layout="row" layout-align="end center">
+        <button md-button>Action 1</button>
+        <button md-button>Action 2</button>
+      </md-card-actions>
+    </md-card>
+    <md-card>
+      <md-card-title>
+        <md-card-title-text>
+          <span class="md-headline">Card with image</span>
+          <span class="md-subhead">Medium</span>
+        </md-card-title-text>
+        <md-card-title-media>
+          <div class="md-media-md card-media"></div>
+        </md-card-title-media>
+      </md-card-title>
+      <md-card-actions layout="row" layout-align="end center">
+        <button md-button>Action 1</button>
+        <button md-button>Action 2</button>
+      </md-card-actions>
+    </md-card>
+  </div>
+</md-content>
diff --git a/examples/components/card/basic_usage.ts b/examples/components/card/basic_usage.ts
@@ -0,0 +1,8 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from '../../base';
+
+@Component({selector: 'card-basic-usage'})
+@View({templateUrl: 'examples/components/card/basic_usage.html', directives: [MATERIAL_DIRECTIVES]})
+export default class DemoView {
+  public imagePath: string = 'public/images/washedout.png';
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {MATERIAL_DIRECTIVES} from '../ng2-material/all';