Sink

ionic/components/app/test/sink/index.js

@@ -10,12 +10,11 @@ import {Ionic, Nav, Toolbar, ViewContainer, Aside, List, Item, Content, Button}
 
 import {ButtonPage} from './pages/button'
 import {ActionMenuPage} from './pages/action-menu'
+import {ModalPage} from './pages/modal'
+import {ListPage} from './pages/list'
 
 @Component({
   selector: 'ion-app',
-  properties: [
-    'aside: aside'
-  ]
 })
 @View({
   templateUrl: 'main.html',
@@ -27,17 +26,17 @@ export class IonicApp {
 
     this.components = [
       { title: 'Buttons', component: ButtonPage },
-      { title: 'Action Menu', component: ActionMenuPage }
+      { title: 'Lists', component: ListPage },
+      { title: 'Action Menu', component: ActionMenuPage },
+      { title: 'Modal', component: ModalPage }
     ];
 
     this.firstPage = ButtonPage
   }
 
   openPage(aside, component) {
-    console.log('Opening', aside, component);
     aside.close();
     window.nav.clear().then(() => {
-      console.log('Cleared!');
       window.nav.push(component.component, {}, {
         animate: false
       });

ionic/components/app/test/sink/main.html

@@ -10,6 +10,16 @@
 </ion-aside>
 
 <ion-nav #content [initial]="firstPage"></ion-nav>
+
+<style>
+my-modal {
+  display: block;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+</style>
 <!--
 <ion-view #content>
   <ion-toolbar>

ionic/components/app/test/sink/pages/action-menu.js

@@ -10,9 +10,18 @@ import {ActionMenu, NavbarTemplate, Navbar, NavController, Button, Content} from
 })
 @View({
   template: `
-  <ion-navbar *navbar><ion-title>Aciton Menu</ion-title></ion-navbar>
+  <ion-navbar *navbar><ion-title>Action Menu</ion-title></ion-navbar>
 
   <ion-content class="padding">
+    <h2>Action Menu</h2>
+    <p>
+      The Action Menu, similar to Action Sheet's on iOS, is a slide-up prompt
+      that displays several options for the user to choose from before an action is performed.
+    </p>
+    <p>
+      Action Menu's are great for prompting for dangerous actions (like deleting a photo album),
+      or showing a "context menu" with multiple actions the user can perform on something.
+    </p>
     <button primary (click)="openMenu()">Open Menu</button>
   </ion-content>
   `,

ionic/components/app/test/sink/pages/button.js

@@ -15,6 +15,13 @@ import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ioni
   <ion-content class="padding">
 
     <h2>Buttons</h2>
+    <p>
+      The faithful button. Not only our favorite place to click, but a true friend.
+    </p>
+    <p>
+      Buttons come in lots of different colors, sizes (like those that take up the full width
+      and those that flow inline), and shapes.
+    </p>
     <p>
       <div>
         <a class="button" href="#">a (default)</a>

ionic/components/app/test/sink/pages/list.js

@@ -0,0 +1,52 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Lists</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Lists</h2>
+    <p>
+      Lists display data as rows in a table.
+    </p>
+    <p>
+      Lists are great for displaying sets of things like contacts,
+      songs, and documents.
+    </p>
+
+    <ion-list inset>
+      <div class="list-header">
+        List Header
+      </div>
+      <ion-item>
+        <input control="email" type="email" placeholder="Your email">
+      </ion-item>
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            Item
+          </div>
+        </div>
+      </div>
+      <ion-item>Item</ion-item>
+      <div class="list-footer">
+        List Footer
+      </div>
+    </ion-list>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item]
+})
+export class ListPage {
+  constructor() {
+  }
+}

ionic/components/app/test/sink/pages/modal.js

@@ -0,0 +1,73 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Modal</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Modal</h2>
+    <p>
+      Modals are entire views that slide in off screen.
+    </p>
+    <p>
+      Modals make it easy to open a new "context" for the user, without taking them
+      out of the current context. For example, clicking the "compose" button
+      on a mail app might slide up a Compose modal.
+    </p>
+    <button primary (click)="openModal()">Open Modal</button>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, Button]
+})
+export class ModalPage {
+  constructor(nav: NavController, loader: DynamicComponentLoader, injector: Injector, domRenderer: DomRenderer, elementRef: ElementRef) {
+    this.loader = loader;
+    this.domRenderer = domRenderer;
+    this.elementRef = elementRef;
+    this.injector = injector;
+
+    this.nav = nav;
+    window.nav = nav;
+
+    console.log('IonicApp Start', loader, domRenderer, elementRef);
+  }
+
+  openModal() {
+    console.log('Opening modal');
+
+    Modal.show(MyModal, this.loader, this.injector, this.domRenderer, this.elementRef);
+  }
+
+  openMenu() {
+    console.log('Opening Modal')
+
+  }
+
+}
+
+@Component({
+  selector: 'my-modal'
+})
+@View({
+  template: '<ion-content padding><button (click)="close()" primary>Close Modal</button></ion-content>',
+  directives: [Button, Content]
+})
+export class MyModal {
+  constructor(modalRef: ModalRef) {
+    //this.initial = ModalFirstPage;
+    this.modalRef = modalRef;
+  }
+  close() {
+    console.log('Closing modal');
+    this.modalRef.close();
+  }
+}