Merge branch 'master' into alpha38

demos/component-docs/app.css

@@ -1,5 +1,6 @@
 body {
   cursor: url('http://ionicframework.com/img/finger.png'), auto;
+  overflow: hidden;
 }
 
 section.hidden {

demos/component-docs/index.ts

@@ -1,30 +1,48 @@
-import {App, IonicApp, ActionSheet, Animation, NavController, NavParams} from 'ionic/ionic';
-import {IonicView, IonicConfig, Events} from 'ionic/ionic';
+import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic';
+import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
 import {NgZone} from 'angular2/angular2';
 import {NavigationDetailsPage} from 'navigation';
+import {TabsPage} from 'tabs';
+import {DemoModal} from 'modal';
+
 import * as helpers from 'helpers';
 
 
+
+
 @IonicView({
   templateUrl: 'main.html'
 })
-class MainPage {
+export class MainPage {
 
-  constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet, zone: NgZone, params: NavParams, events: Events) {
+  component: any = { title: 'Action Sheets' };
+
+  constructor(app: IonicApp,
+              nav: NavController,
+              actionSheet: ActionSheet,
+              zone: NgZone,
+              params: NavParams,
+              modal: Modal,
+              events: Events)
+  {
     this.params = params;
     this.nav = nav;
+    this.modal = modal;
     this.actionSheet = actionSheet;
-
     this.navDetailsPage = NavigationDetailsPage;
-    this.component = { title: 'Tabs' };
+    this.demoModal = DemoModal;
 
-    this.setupAnimations();
+    if (params.data.location) { this.component.title = params.data.location; }
+    else if (window.location.hash) { this.component.title = window.location.hash; }
 
     window.addEventListener('message', (e) => {
       zone.run(() => {
         if (e.data) {
           var data = JSON.parse(e.data);
           this.component.title = helpers.toTitleCase(data.hash.replace('-', ' '));
+          if (this.component.title === 'Tabs') {
+            this.nav.setRoot(TabsPage);
+          }
         }
       });
     });
@@ -44,7 +62,7 @@ class MainPage {
         { text: 'Move' }
       ],
       destructiveText: 'Delete',
-      titleText: 'Modify your album',
+      titleText: 'You Opened Action Sheet',
       cancelText: 'Cancel',
       cancel: function() {
         console.log('Canceled');
@@ -70,30 +88,45 @@ class MainPage {
     this.nav.push(NavigationDetailsPage, {name: item});
   }
 
-  // **************************
-  // Animations
-  // **************************
-  setupAnimations() {
-    this.animation = new Animation();
-    this.animation
-      .duration(2000)
 
-    var ionitronSpin = new Animation(document.querySelector('#ionitron'));
-    ionitronSpin
-      .from('transform', 'rotate(0deg)')
-      .to('transform', 'rotate(360deg)')
-
-    this.animation.add(ionitronSpin);
-  }
-  play() {
-    this.animation.play();
-  }
-  pause() {
-    this.animation.pause();
+  // **************************
+  // Modal
+  // **************************
+  openModal() {
+    this.modal.open(this.demoModal, {
+      handle: 'my-awesome-modal',
+      enterAnimation: 'my-fade-in',
+      leaveAnimation: 'my-fade-out'
+    });
   }
 
 }
 
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(450)
+      .fadeIn();
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeOut();
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);
+
+
 @App({
   template: '<ion-nav [root]="rootPage"></ion-nav>'  
 })
@@ -103,4 +136,4 @@ class DemoApp {
     this.rootPage = MainPage;
   }
 
-}
+}

demos/component-docs/main.html

@@ -1,5 +1,4 @@
 
-
 <ion-navbar *navbar class="show-navbar">
   <ion-title>{{ component.title }}</ion-title>
 </ion-navbar>
@@ -7,8 +6,8 @@
 
 <ion-content class="has-header components-demo">
 
-  <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }">
-    <button class="button" (click)="openMenu()">
+  <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }" class="section-padding">
+    <button block (click)="openMenu()">
       Show Actionsheet
     </button>
   </section>
@@ -32,6 +31,30 @@
 
   <section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }" class="section-padding">
 
+    <p>
+      <button>Default</button>
+    </p>
+
+    <p>
+      <button secondary>Secondary</button>
+    </p>
+
+    <p>
+      <button danger>Danger</button>
+    </p>
+
+    <p>
+      <button light>Light</button>
+    </p>
+
+    <p>
+      <button dark>Dark</button>
+    </p>
+
+  </section>
+
+  <section id="block-buttons" [ng-class]="{hidden: component.title !== 'Block Buttons' }" class="section-padding">
+
     <p>
       <button block>Default</button>
     </p>
@@ -54,6 +77,102 @@
 
   </section>
 
+  <section id="full-buttons" [ng-class]="{hidden: component.title !== 'Full Buttons' }">
+
+    <p>
+      <button full>Default</button>
+    </p>
+
+    <p>
+      <button secondary full>Secondary</button>
+    </p>
+
+    <p>
+      <button danger full>Danger</button>
+    </p>
+
+    <p>
+      <button light full>Light</button>
+    </p>
+
+    <p>
+      <button dark full>Dark</button>
+    </p>
+
+  </section>
+
+  <section id="outline-buttons" [ng-class]="{hidden: component.title !== 'Outline Buttons' }" class="section-padding">
+
+    <p>
+      <button outline>Default</button>
+    </p>
+
+    <p>
+      <button secondary outline>Secondary</button>
+    </p>
+
+    <p>
+      <button danger outline>Danger</button>
+    </p>
+
+    <p>
+      <button light outline>Light</button>
+    </p>
+
+    <p>
+      <button dark outline>Dark</button>
+    </p>
+
+  </section>
+
+  <section id="outline-buttons" [ng-class]="{hidden: component.title !== 'Outline Buttons' }" class="section-padding">
+
+    <p>
+      <button outline>Default</button>
+    </p>
+
+    <p>
+      <button secondary outline>Secondary</button>
+    </p>
+
+    <p>
+      <button danger outline>Danger</button>
+    </p>
+
+    <p>
+      <button light outline>Light</button>
+    </p>
+
+    <p>
+      <button dark outline>Dark</button>
+    </p>
+
+  </section>
+
+  <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">
+
+    <p>
+      <button small>Default</button>
+    </p>
+
+    <p>
+      <button secondary small>Secondary</button>
+    </p>
+
+    <p>
+      <button danger small>Danger</button>
+    </p>
+
+    <p>
+      <button light large>Light</button>
+    </p>
+
+    <p>
+      <button dark large>Dark</button>
+    </p>
+
+  </section>
+
 
   <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
 
@@ -235,40 +354,39 @@
     <section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
    TODO
   </section>
-    <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
-   TODO
+
+  <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }" class="section-padding">
+   <button block (click)="openModal()">
+    Show Modal
+  </button>
+
   </section>
 
   <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
-    <ion-card>
-      <ion-card-header primary>
-        Tap for more info...
-      </ion-card-header>
+    <ion-list>
 
-      <ion-card-content>
+      <a ion-item (click)="openNavDetailsPage('Angular')">
+        <icon ion-social-angular item-left></icon>
+        Angular
+      </a>
 
-        <a ion-item href="#" (click)="openNavDetailsPage('Angular')">
-          <icon ion-social-angular item-left></icon>
-          Angular
-        </a>
+      <a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
+        <icon ion-social-css3 item-left></icon>
+        CSS3
+      </a>
 
-        <a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
-          <icon ion-social-css3 item-left></icon>
-          CSS3
-        </a>
+      <button ion-item (click)="openNavDetailsPage('HTML5')">
+        <icon ion-social-html5 item-left></icon>
+        HTML5
+      </button>
 
-        <button ion-item (click)="openNavDetailsPage('HTML5')">
-          <icon ion-social-html5 item-left></icon>
-          HTML5
-        </button>
+      <button ion-item (click)="openNavDetailsPage('Sass')">
+        <icon ion-social-sass item-left></icon>
+        Sass
+      </button>
 
-        <button ion-item (click)="openNavDetailsPage('Sass')">
-          <icon ion-social-sass item-left></icon>
-          Sass
-        </button>
-      </ion-card-content>
+    </ion-list>
 
-    </ion-card> 
 
   </section>
   
@@ -293,12 +411,8 @@
    </ion-slides>
   </section>
 
-  <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
-    <ion-tabs tab-bar-placement="bottom">
-      <ion-tab tab-title="Food" tab-icon="pizza"></ion-tab>
-      <ion-tab tab-title="Drinks" tab-icon="beer"></ion-tab>
-      <ion-tab tab-title="Hours" tab-icon="clock"></ion-tab>
-    </ion-tabs>
+  <section id="forms" [ng-class]="{hidden: component.title !== 'Forms' }">
   </section>
 
 </ion-content>
+

demos/component-docs/modal.html

@@ -0,0 +1 @@
+<h1>TODO</h1>

demos/component-docs/modal.ts

@@ -0,0 +1,46 @@
+import {App, IonicApp, Modal, NavController, IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+@IonicView({
+  templateUrl: 'modal.html'
+})
+class ModalFirstPage {
+
+  constructor(
+    nav: NavController,
+    modal: Modal,
+    events: Events
+  ) {
+    this.nav = nav;
+    this.modal = modal;
+    window.onmessage = (e) => {
+      zone.run(() => {
+        if (e.data) {
+          var data = JSON.parse(e.data);
+          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
+          events.publish('page:locationChange', { componentName: componentTitle });
+          this.closeModal();
+        }
+      });
+    };
+  }
+
+  closeModal() {
+    let modal = this.modal.get();
+    if (modal) {
+      modal.close();
+    }
+  }
+
+}
+
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+export class DemoModal {
+  constructor() {
+    this.rootView = ModalFirstPage;
+  }
+}
+
+

demos/component-docs/navigation.html

@@ -3,18 +3,6 @@
   <ion-title>{{ selection.title }}</ion-title>
 </ion-navbar>
 
-<ion-content>
-
-<ion-card>
-
-  <ion-card-header primary>
-    <icon [name]="selection.icon" item-left></icon>
-    {{ selection.title }}
-  </ion-card-header>
-
-  <ion-card-content>
-    {{ selection.content }}
-  </ion-card-content>
-
-</ion-card> 
+<ion-content padding>
+{{ selection.content }}
 </ion-content>

demos/component-docs/tabs.html

@@ -0,0 +1,12 @@
+<ion-navbar *navbar class="show-navbar">
+    <ion-title>Tabs</ion-title>
+</ion-navbar>
+
+<ion-tabs tab-bar-placement="bottom">
+<ion-pane>
+  <ion-tab tab-title="Food" tab-icon="pizza">  </ion-tab>
+  <ion-tab tab-title="Drinks" tab-icon="beer"></ion-tab>
+  <ion-tab tab-title="Hours" tab-icon="clock"></ion-tab>
+</ion-tabs>
+
+</ion-pane>

demos/component-docs/tabs.ts

@@ -0,0 +1,35 @@
+import {NavController, NavParams} from 'ionic/ionic';
+import {IonicView, ViewController, Events} from 'ionic/ionic';
+import {MainPage} from 'index';
+import * as helpers from 'helpers';
+
+@IonicView({
+  template: 'Hello 1',
+})
+class TabOneCtrl {
+  constructor(nav: NavController, view: ViewController) {
+    this.nav = nav;
+    this.view = view;
+  }
+}
+
+@IonicView({
+  templateUrl: 'tabs.html'
+})
+export class TabsPage {
+  constructor(nav: NavController, params: NavParams, events: Events) {
+    this.nav = nav;
+    this.TabOneRoot = TabOneCtrl;
+    window.onmessage = (e) => {
+      zone.run(() => {
+        if (e.data) {
+          var data = JSON.parse(e.data);
+          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
+          this.nav.setRoot(MainPage, {location: componentTitle});
+          events.publish('page:locationChange', { componentName: componentTitle });
+        }
+      });
+    };
+
+  }
+}

ionic/components/icon/modes/ios.scss

@@ -3,10 +3,10 @@
 // --------------------------------------------------
 
 
-$icon-forward-ios-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
 
 
-@mixin ios-icon-forward($fg-color) {
-  $svg: str-replace($icon-forward-ios-background-svg, 'fg-color', $fg-color);
+@mixin ios-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
   @include svg-background-image($svg);
 }

ionic/components/icon/test/basic/main.html

@@ -77,9 +77,9 @@
       </code>
     </ion-item>
 
-    <ion-item forward-icon>
+    <ion-item detail-push>
       <code>
-        ion-item w/ [forward-icon] attr. text text text text text text
+        ion-item w/ [detail-push] attr. text text text text text text
       </code>
     </ion-item>
 

ionic/components/item/modes/ios.scss

@@ -20,7 +20,7 @@ $item-ios-padding-icon-bottom:         10px !default;
 $item-ios-avatar-size:                 3.6rem !default;
 $item-ios-thumbnail-size:              5.6rem !default;
 $item-ios-note-color:                  darken($item-ios-border-color, 10%) !default;
-$item-ios-forward-icon-color:          $item-ios-border-color !default;
+$item-ios-detail-push-color:          $item-ios-border-color !default;
 
 $item-ios-divider-bg:                 #f5f5f5 !default;
 $item-ios-divider-color:              #222 !default;
@@ -174,10 +174,10 @@ button.item {
 
 .list,
 .card {
-  button[ion-item]:not([no-forward-icon]),
-  a[ion-item]:not([no-forward-icon]),
-  [forward-icon] {
-    @include ios-icon-forward($item-ios-forward-icon-color);
+  button[ion-item]:not([detail-none]),
+  a[ion-item]:not([detail-push]),
+  [detail-push] {
+    @include ios-detail-push-icon($item-ios-detail-push-color);
     background-repeat: no-repeat;
     background-position: right ($item-ios-padding-right - 2) center;
     background-size: 14px 14px;

ionic/components/item/modes/md.scss

@@ -23,7 +23,7 @@ $item-md-body-text-line-height:       1.5 !default;
 $item-md-avatar-size:                 4rem !default;
 $item-md-thumbnail-size:              8rem !default;
 $item-md-note-color:                  darken($item-md-border-color, 10%) !default;
-$item-md-forward-icon-color:          $item-md-border-color !default;
+$item-md-detail-push-color:           $item-md-border-color !default;
 
 $item-md-divider-bg:                 #fff !default;
 $item-md-divider-color:              #222 !default;

ionic/components/item/test/icons/main.html

@@ -2,16 +2,16 @@
 
 <ion-list>
 
-  <ion-item forward-icon>
-    ion-item [forward-icon] attr
+  <ion-item detail-push>
+    ion-item [detail-push] attr
   </ion-item>
 
   <a ion-item href="#">
-    a[ion-item] w/ forward icon
+    a[ion-item] w/ push detail
   </a>
 
   <button ion-item>
-    button[ion-item] w/ forward icon
+    button[ion-item] w/ push detail
   </button>
 
   <a ion-item href="#">
@@ -34,10 +34,9 @@
     button[ion-item] w/ left side icon
   </button>
 
-  <button ion-item no-forward-icon>
+  <button ion-item detail-none>
     <icon flag item-left></icon>
-    button[ion-item][no-foward-icon]
-    <icon checkmark item-right></icon>
+    button[ion-item][detail-none]
   </button>
 
   <ion-item>

ionic/components/menu/test/basic/main.html

@@ -12,7 +12,7 @@
         {{p.title}}
       </button>
 
-      <button ion-item menu-toggle="leftMenu" no-forward-icon class="e2eCloseMenu">
+      <button ion-item menu-toggle="leftMenu" detail-none class="e2eCloseMenu">
         Close Menu
       </button>
 

ionic/components/menu/test/overlay/main.html

@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item menu-toggle="leftMenu" no-forward-icon>
+      <button ion-item menu-toggle="leftMenu" detail-none>
         Close Left Menu
       </button>
 

ionic/components/menu/test/reveal/main.html

@@ -8,7 +8,7 @@
 
     <ion-list>
 
-      <button ion-item menu-toggle="leftMenu" no-forward-icon>
+      <button ion-item menu-toggle="leftMenu" detail-none>
         Close Left Menu
       </button>