Merge branch 'master' into css-refactor

# Conflicts:
#	ionic/components/button/modes/ios.scss

demos/modal/app.html

@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>

demos/modal/index.ts

@@ -3,35 +3,32 @@ import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ion
 
 
 @App({
-  templateUrl: 'main.html'
+  templateUrl: 'app.html'
 })
-class MyAppCmp {
+class ApiDemoApp {
-
-  constructor(modal: Modal, app: IonicApp, config: Config, platform: Platform) {
-    this.modal = modal;
-
-    console.log('platforms', platform.platforms());
-    console.log('mode', config.get('mode'));
-
-    console.log('core', platform.is('core'))
-    console.log('cordova', platform.is('cordova'))
-    console.log('mobile', platform.is('mobile'))
-    console.log('ipad', platform.is('ipad'))
-    console.log('iphone', platform.is('iphone'))
-    console.log('phablet', platform.is('phablet'))
-    console.log('tablet', platform.is('tablet'))
-    console.log('ios', platform.is('ios'))
-    console.log('android', platform.is('android'))
-    console.log('windows phone', platform.is('windowsphone'))
-
-    platform.ready().then(() => {
-      console.log('platform.ready')
-    });
 
+  constructor() {
+    this.rootPage = ModalFirstPage;
+  }
 }
 
-  openModal() {
+@Page({
-    this.modal.open(ContactModal, {
+  templateUrl: 'main.html'
+})
+export class ModalFirstPage {
+  constructor(modal: Modal) {
+    this.modal = modal;
+    this.myParam = '';
+  }
+
+  openBasicModal() {
+    this.modal.open(ModalContentPage);
+  }
+  openModalWithParams() {
+    this.modal.open(ModalContentPage, { 'myParam': this.myParam });
+  }
+  openCustomAnimationModal() {
+    this.modal.open(ModalContentPage, {}, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out',
       handle: 'my-awesome-modal'
@@ -40,79 +37,26 @@ class MyAppCmp {
 }
 
 @Page({
-  template: '<ion-nav [root]="rootView"></ion-nav>'
+    templateUrl: "modal-content.html"
 })
-export class ContactModal {
+export class ModalContentPage {
-  constructor() {
-    console.log('ContactModal constructor')
-    this.rootView = ModalFirstPage;
-  }
-  onViewLoaded() {
-    console.log('ContactModal onViewLoaded');
-  }
-  onViewWillEnter() {
-    console.log('ContactModal onViewWillEnter');
-  }
-  onViewDidEnter() {
-    console.log('ContactModal onViewDidEnter');
-  }
-  onViewWillLeave() {
-    console.log('ContactModal onViewWillLeave');
-  }
-  onViewDidLeave() {
-    console.log('ContactModal onViewDidLeave');
-  }
-  onViewWillUnload() {
-    console.log('ContactModal onViewWillUnload');
-  }
-  onViewDidUnload() {
-    console.log('ContactModal onViewDidUnload');
-  }
-}
-
-
-@Page({
-  template: `
-    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-buttons start><button (click)="closeModal()">Close</button></ion-buttons></ion-navbar>
-    <ion-content padding>
-      <p>
-        <button (click)="push()">Push (Go to 2nd)</button>
-      </p>
-      <p>
-        <button (click)="openActionSheet()">Open Action Sheet</button>
-      </p>
-      <p>
-        <button (click)="closeByHandleModal()">Close By Handle</button>
-      </p>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-    </ion-content>
-  `
-})
-export class ModalFirstPage {
     constructor(
         nav: NavController,
         modal: Modal,
-    actionSheet: ActionSheet
+        actionSheet: ActionSheet,
+        params: NavParams
     ) {
         this.nav = nav;
         this.modal = modal;
         this.actionSheet = actionSheet;
-  }
+        this.myParam = params.get('myParam');
-
-  push() {
-    this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
     }
 
     closeModal() {
       let modal = this.modal.get();
+      if (modal) {
         modal.close();
       }
-
-  closeByHandleModal() {
-    debugger;
-    let modal = this.modal.get('my-awesome-modal');
-    modal.close();
     }
 
     openActionSheet() {
@@ -142,52 +86,27 @@ export class ModalFirstPage {
 }
 
 
-@Page({
-  template: `
-    <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
-    <ion-content padding>
-      <p>
-        <button (click)="nav.pop()">Pop (Go back to 1st)</button>
-      </p>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-    </ion-content>
-  `
-})
-export class ModalSecondPage {
-  constructor(
-    nav: NavController,
-    params: NavParams
-  ) {
-    this.nav = nav;
-    this.params = params;
-
-    console.log('Second page params:', params);
-  }
-
-}
-
-
 class FadeIn extends Animation {
-  constructor(element) {
+  constructor(enteringView, leavingView) {
-    super(element);
+    super(enteringView.pageRef());
     this
       .easing('ease')
-      .duration(450)
+      .duration(1000)
-      .fadeIn();
+      .fromTo('translateY', '0%', '0%')
+      .fadeIn()
+      .before.addClass('show-page');
   }
 }
-
 Animation.register('my-fade-in', FadeIn);
 
 class FadeOut extends Animation {
-  constructor(element) {
+  constructor(enteringView, leavingView) {
-    super(element);
+    super(leavingView.pageRef());
     this
       .easing('ease')
-      .duration(250)
+      .duration(500)
-      .fadeOut();
+      .fadeOut()
+      .before.addClass('show-page');
   }
 }
-
 Animation.register('my-fade-out', FadeOut);

demos/modal/main.html

@@ -3,7 +3,21 @@
 </ion-navbar>
 
 <ion-content padding>
-  <button (click)="openModal()">Open Modal</button>
+  <ion-row>
+    <button secondary clear (click)="openBasicModal()">Open Basic Modal</button>    
+  </ion-row>
+  <ion-row>
+    <button secondary outline (click)="openCustomAnimationModal()">Open With Custom Animation</button>    
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <button secondary (click)="openModalWithParams()">Pass Params</button>
+    </ion-col>
+    <ion-col>
+      <ion-input floating-label style="margin-top: -10px">
+        <ion-label>Params</ion-label>
+        <input [(ng-model)]="myParam" type="text" value="">
+      </ion-input>
+    </ion-col>
+  </ion-row>
 </ion-content>
-
-<ion-overlay></ion-overlay>

demos/modal/modal-content.html

@@ -0,0 +1,8 @@
+<ion-navbar *navbar>
+  <ion-title>Modals</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <div [class.hide]="!myParam">Parameters entered: {{myParam}}</div>
+  <button danger full (click)="closeModal()">Close Modal</button>
+</ion-content>

ionic/components/button/button.ts

@@ -22,6 +22,7 @@ import {Toolbar} from '../toolbar/toolbar';
   * @property [fab-bottom] - position a fab button towards the bottom
   * @description
   * Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
+  * @demo /docs/v2/demos/buttons/
   * @see {@link /docs/v2/components#buttons Button Component Docs}
 
  */

ionic/components/modal/modal.ts

@@ -33,6 +33,7 @@ import {extend} from 'ionic/util';
  *
  * }
  * ```
+ * @demo /docs/v2/demos/modal/
  * @see {@link /docs/v2/components#modals Modal Component Docs}
  */
 @Injectable()