From 11ac26ee00e68eb3d10b07ca88ad96860a528f21 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Sat, 30 May 2015 22:29:39 -0500
Subject: [PATCH] Sink

---
 ionic/components/app/test/sink/index.js       |  11 +-
 ionic/components/app/test/sink/main.html      |  10 ++
 .../app/test/sink/pages/action-menu.js        |  11 +-
 .../components/app/test/sink/pages/button.js  | 109 ++++++++++--------
 ionic/components/app/test/sink/pages/list.js  |  52 +++++++++
 ionic/components/app/test/sink/pages/modal.js |  73 ++++++++++++
 6 files changed, 208 insertions(+), 58 deletions(-)
 create mode 100644 ionic/components/app/test/sink/pages/list.js
 create mode 100644 ionic/components/app/test/sink/pages/modal.js

diff --git a/ionic/components/app/test/sink/index.js b/ionic/components/app/test/sink/index.js
index dbd699b96c..40328c6885 100644
--- a/ionic/components/app/test/sink/index.js
+++ b/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
       });
diff --git a/ionic/components/app/test/sink/main.html b/ionic/components/app/test/sink/main.html
index e84c5c0558..e6915c3530 100644
--- a/ionic/components/app/test/sink/main.html
+++ b/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>
diff --git a/ionic/components/app/test/sink/pages/action-menu.js b/ionic/components/app/test/sink/pages/action-menu.js
index ce07701d13..82a84648f5 100644
--- a/ionic/components/app/test/sink/pages/action-menu.js
+++ b/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>
   `,
diff --git a/ionic/components/app/test/sink/pages/button.js b/ionic/components/app/test/sink/pages/button.js
index 86bbae6c7d..1b00cb010b 100644
--- a/ionic/components/app/test/sink/pages/button.js
+++ b/ionic/components/app/test/sink/pages/button.js
@@ -16,65 +16,72 @@ import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ioni
 
     <h2>Buttons</h2>
     <p>
-<div>
-  <a class="button" href="#">a (default)</a>
-  <button class="button">button (default)</button>
-  <button class="button hover">hover</button>
-  <button class="button activated">activated</button>
-</div>
+      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>
+        <button class="button">button (default)</button>
+        <button class="button hover">hover</button>
+        <button class="button activated">activated</button>
+      </div>
 
-<div>
-  <a class="button button-primary" href="#">a.primary</a>
-  <button class="button button-primary">button.primary</button>
-  <button class="button button-primary hover">hover</button>
-  <button class="button button-primary activated">activated</button>
-</div>
+      <div>
+        <a class="button button-primary" href="#">a.primary</a>
+        <button class="button button-primary">button.primary</button>
+        <button class="button button-primary hover">hover</button>
+        <button class="button button-primary activated">activated</button>
+      </div>
 
-<div>
-  <a class="button button-secondary" href="#">a.secondary</a>
-  <button class="button button-secondary">button.secondary</button>
-  <button class="button button-secondary hover">hover</button>
-  <button class="button button-secondary activated">activated</button>
-</div>
+      <div>
+        <a class="button button-secondary" href="#">a.secondary</a>
+        <button class="button button-secondary">button.secondary</button>
+        <button class="button button-secondary hover">hover</button>
+        <button class="button button-secondary activated">activated</button>
+      </div>
 
-<div>
-  <a class="button button-danger" href="#">a.danger</a>
-  <button class="button button-danger">button.danger</button>
-  <button class="button button-danger hover">hover</button>
-  <button class="button button-danger activated">activated</button>
-</div>
+      <div>
+        <a class="button button-danger" href="#">a.danger</a>
+        <button class="button button-danger">button.danger</button>
+        <button class="button button-danger hover">hover</button>
+        <button class="button button-danger activated">activated</button>
+      </div>
 
-<div>
-  <a class="button button-light" href="#">a.light</a>
-  <button class="button button-light">button.light</button>
-  <button class="button button-light hover">hover</button>
-  <button class="button button-light activated">activated</button>
-</div>
+      <div>
+        <a class="button button-light" href="#">a.light</a>
+        <button class="button button-light">button.light</button>
+        <button class="button button-light hover">hover</button>
+        <button class="button button-light activated">activated</button>
+      </div>
 
-<div>
-  <a class="button button-stable" href="#">a.stable</a>
-  <button class="button button-stable">button.stable</button>
-  <button class="button button-stable hover">hover</button>
-  <button class="button button-stable activated">activated</button>
-</div>
+      <div>
+        <a class="button button-stable" href="#">a.stable</a>
+        <button class="button button-stable">button.stable</button>
+        <button class="button button-stable hover">hover</button>
+        <button class="button button-stable activated">activated</button>
+      </div>
 
-<div>
-  <a class="button button-dark" href="#">a.dark</a>
-  <button class="button button-dark">button.dark</button>
-  <button class="button button-dark hover">hover</button>
-  <button class="button button-dark activated">activated</button>
-</div>
+      <div>
+        <a class="button button-dark" href="#">a.dark</a>
+        <button class="button button-dark">button.dark</button>
+        <button class="button button-dark hover">hover</button>
+        <button class="button button-dark activated">activated</button>
+      </div>
 
-<h2>With Properties</h2>
+      <h2>With Properties</h2>
 
-<div>
-  <button primary>button.primary</button>
-  <button secondary>button.secondary</button>
-  <button stable>button.stable</button>
-  <button light>button.light</button>
-  <button dark>button.dark</button>
-  <button danger>button.danger</button>
-</div>
+      <div>
+        <button primary>button.primary</button>
+        <button secondary>button.secondary</button>
+        <button stable>button.stable</button>
+        <button light>button.light</button>
+        <button dark>button.dark</button>
+        <button danger>button.danger</button>
+      </div>
     </p>
 
   </ion-content>
diff --git a/ionic/components/app/test/sink/pages/list.js b/ionic/components/app/test/sink/pages/list.js
new file mode 100644
index 0000000000..28b945ee2e
--- /dev/null
+++ b/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() {
+  }
+}
diff --git a/ionic/components/app/test/sink/pages/modal.js b/ionic/components/app/test/sink/pages/modal.js
new file mode 100644
index 0000000000..48ecb277bd
--- /dev/null
+++ b/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();
+  }
+}