feat(material): add prototype dialog component w/ demo.

2015-04-28 10:56:33 -07:00
parent 75da6e4c4a
commit f88c4b77ca
10 changed files with 456 additions and 4 deletions
--- a/modules/examples/src/material/dialog/demo_app.html
+++ b/modules/examples/src/material/dialog/demo_app.html
@ -0,0 +1,32 @@
+<div>
+  <h2>Dialog demo</h2>
+
+  <button type="button" (click)="open()" [disabled]="!!dialogRef">
+    Open a dialog
+  </button>
+
+  <button type="button" (click)="close()" [disabled]="!dialogRef">
+    Close the dialog
+  </button>
+
+  <p>
+    Last result: {{lastResult}}
+  </p>
+
+  <hr>
+
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+  <p> Here are some paragaphs to make the page scrollable</p>
+
+</div>
--- a/modules/examples/src/material/dialog/index.html
+++ b/modules/examples/src/material/dialog/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>ng-material dialog demo</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
+  <style>
+    * {
+      font-family: RobotoDraft, Roboto;
+    }
+  </style>
+</head>
+<body>
+
+$SCRIPTS$
+  <demo-app>Loading...</demo-app>
+</body>
+</html>
--- a/modules/examples/src/material/dialog/index.js
+++ b/modules/examples/src/material/dialog/index.js
@ -0,0 +1,103 @@
+import {bootstrap, ElementRef, ComponentRef} from 'angular2/angular2';
+import {MdDialog, MdDialogRef, MdDialogConfig} from 'angular2_material/src/components/dialog/dialog'
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
+import {bind, Injector} from 'angular2/di';
+import {isPresent} from 'angular2/src/facade/lang';
+
+// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
+// add those imports back into 'angular2/angular2';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+
+@Component({
+  selector: 'demo-app',
+  injectables: [MdDialog]
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: []
+})
+class DemoApp {
+  dialog: MdDialog;
+  elementRef: ElementRef;
+  dialogRef: MdDialogRef;
+  dialogConfig: MdDialogConfig;
+  injector: Injector;
+  lastResult: string;
+
+  constructor(mdDialog: MdDialog, elementRef: ElementRef, injector: Injector) {
+    this.dialog = mdDialog;
+    this.elementRef = elementRef;
+    this.dialogConfig = new MdDialogConfig();
+    this.injector = injector;
+
+    this.dialogConfig.width = '60%';
+    this.dialogConfig.height = '60%';
+    this.lastResult = '';
+  }
+
+  open() {
+    if (isPresent(this.dialogRef)) {
+      return;
+    }
+
+    this.dialog.open(SimpleDialogComponent,
+        this.elementRef, this.injector, this.dialogConfig).then(ref => {
+      this.dialogRef = ref;
+      ref.instance.numCoconuts = 777;
+
+      ref.whenClosed.then(result => {
+        this.dialogRef = null;
+        this.lastResult = result;
+      });
+    });
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}
+
+@Component({
+  selector: 'simple-dialog',
+  properties: {'numCoconuts': 'numCoconuts'}
+})
+@View({
+  template: `
+    <h2>This is the dialog content</h2>
+    <p>There are {{numCoconuts}} coconuts.</p>
+    <p>Return: <input (input)="updateValue($event)"></p>
+    <button type="button" (click)="done()">Done</button>
+  `
+})
+class SimpleDialogComponent {
+  numCoconuts: number;
+  dialogRef: MdDialogRef;
+  toReturn: string;
+
+  constructor(dialogRef: MdDialogRef) {
+    this.numCoconuts = 0;
+    this.dialogRef = dialogRef;
+    this.toReturn = '';
+  }
+
+  updateValue(event) {
+    this.toReturn = event.target.value;
+  }
+
+  done() {
+    this.dialogRef.close(this.toReturn);
+  }
+}
+
+
+export function main() {
+  commonDemoSetup();
+  bootstrap(DemoApp, [
+    bind(UrlResolver).toValue(new DemoUrlResolver())
+  ]);
+}
+
+