Merge remote-tracking branch 'origin/master'

2026-03-13 10:22:08 +08:00 · 2015-10-01 15:49:02 -05:00
parent d4a3005524 4ad0b9638d
commit 13ca9dabea
23 changed files with 655 additions and 117 deletions
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -0,0 +1,55 @@
+body {
+  cursor: url('http://ionicframework.com/img/finger.png'), auto;
+}
+
+section.hidden {
+  display: none !important;
+}
+
+#ionitron {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 25%;
+  margin-top: -50px;
+  left: 50%;
+  margin-left: -50px;
+}
+
+.animation-buttons {
+  position: absolute;
+  bottom: 25%; 
+  left: 60px; 
+  display: inline;
+}
+
+.components-demo h4 {
+    text-align: center;
+}
+
+ion-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.demo-slide {
+  display: block;
+  height: 100%;
+  padding: 500px 0;
+  width: 100%;
+  font-weight: bold;
+  font-size: 2.5em;
+  color: #fff;
+}
+
+.demo-slide-1 {
+  background-color: #32db64;
+}
+
+.demo-slide-2 {
+  background-color: #387ef5;
+}
+
+.demo-slide-3 {
+  background-color: #f53d3d;
+}
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -0,0 +1,80 @@
+import {App, ActionSheet, Animation} from 'ionic/ionic';
+import {NgZone} from 'angular2/angular2';
+
+function toTitleCase(str) {
+  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+}
+
+@App({
+  templateUrl: 'main.html'
+})
+class DemoApp {
+
+  component: any;
+  actionSheet: any;
+
+  constructor(actionSheet: ActionSheet, zone: NgZone) {
+    this.actionSheet = actionSheet;
+    this.component = {
+        title: 'Action Sheets',
+    };
+    window.onmessage = (e) => {
+      zone.run(() => {
+        if (e.data) {
+          var data = JSON.parse(e.data);
+          this.component.title = toTitleCase(data.hash.replace('-', ' '));
+        }
+      });
+    };
+    this.setupAnimations();
+  }
+
+  openMenu() {
+    this.actionSheet.open({
+      buttons: [
+        { text: 'Share This' },
+        { text: 'Move' }
+      ],
+      destructiveText: 'Delete',
+      titleText: 'Modify your album',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled');
+      },
+      destructiveButtonClicked: () => {
+        console.log('Destructive clicked');
+      },
+      buttonClicked: function(index) {
+        console.log('Button clicked', index);
+        if(index == 1) { return false; }
+        return true;
+      }
+
+    }).then(actionSheetRef => {
+      this.actionSheetRef = actionSheetRef;
+    });
+  }
+
+  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();
+  }
+
+
+}
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -0,0 +1,273 @@
+
+<ion-toolbar><ion-title>{{ component.title }}</ion-title></ion-toolbar>
+
+<ion-content class="has-header padding components-demo">
+
+  <section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }">
+    <button class="button" (click)="openMenu()">
+      Show Actionsheet
+    </button>
+  </section>
+
+
+  <section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
+   <img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
+
+   <div class="animation-buttons">
+     <button icon pause primary (click)="pause($event)">
+       Pause
+       <icon pause></icon>
+     </button>
+     <button icon play secondary (click)="play($event)">
+       Play
+       <icon play></icon>
+     </button>
+   </div>
+  </section>
+
+
+  <section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }">
+    <h4>Colors</h4>
+
+    <p>
+      <button block>Default</button>
+    </p>
+
+    <p>
+      <button secondary block>Secondary</button>
+    </p>
+
+    <p>
+      <button danger block>Danger</button>
+    </p>
+
+    <p>
+      <button light block>Light</button>
+    </p>
+
+    <p>
+      <button dark block>Dark</button>
+    </p>
+
+    <h4>Shapes</h4>
+
+    <p>
+      <button full>Full Button</button>
+    </p>
+
+    <p>
+      <button block>Block Button</button>
+    </p>
+
+    <p>
+      <button round>Round Button</button>
+    </p>
+
+      <p>
+      <button fab style="position: relative;">FAB</button>
+    </p>
+
+    <h4>Outlines</h4>
+
+    <p>
+      <button secondary full outline>Outline + Full</button>
+    </p>
+
+    <p>
+      <button secondary block outline>Outline + Block</button>
+    </p>
+
+    <p>
+      <button secondary round outline>Outline + Round</button>
+    </p>
+
+      <p>
+      <button secondary fab outline style="position: relative;">FAB</button>
+    </p>
+
+    <h4>Icons</h4>
+
+    <p>
+      <button dark>
+        <icon star></icon>
+        Left Icon
+      </button>
+    </p>
+
+    <p>
+      <button dark>
+        Right Icon
+        <icon star></icon>
+      </button>
+    </p>
+
+    <p>
+      <button dark>
+        <icon star></icon>
+      </button>
+    </p>
+
+
+    <h4>Sizes</h4>
+
+    <p>
+      <button light large>Large</button>
+    </p>
+
+    <p>
+      <button light>Default</button>
+    </p>
+
+    <p>
+      <button light small>Small</button>
+    </p>
+  </section>
+
+
+  <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
+
+    <ion-card>
+
+      <ion-card-header primary>
+        Menu
+      </ion-card-header>
+
+      <ion-card-content>
+        <a ion-item href="#">
+          <icon home item-left></icon>
+          Home
+        </a>
+
+        <a ion-item href="#">
+          <icon people item-left></icon>
+          Friends
+        </a>
+
+        <button ion-item>
+          <icon musical-notes item-left></icon>
+          Music
+        </button>
+
+        <button ion-item>
+          <icon mail item-left></icon>
+          Mail
+        </button>
+      </ion-card-content>
+
+    </ion-card> 
+
+
+    <ion-card>
+
+      <ion-item>
+        <icon football item-left></icon>
+        Schedule
+        <button outline item-right>Open</button>
+      </ion-item>
+
+    </ion-card>
+
+    <ion-card>
+
+      <ion-item>
+        <icon trophy item-left></icon>
+        Trophies
+        <button outline item-right>View</button>
+      </ion-item>
+
+    </ion-card>
+
+
+  </section>
+   
+    <section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }">
+   TODO
+  </section>
+
+  <section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
+    <ion-list>
+
+      <ion-header>
+        Classes
+      </ion-header>
+
+      <ion-item>
+        <icon color-wand item-left></icon>
+        Dark Arts
+      </ion-item>
+
+      <ion-item>
+        <icon planet item-left></icon>
+        Astronomy
+      </ion-item>
+
+      <ion-item>
+        <icon flask item-left></icon>
+        Potions
+      </ion-item>
+
+      <ion-item>
+        <icon star item-left></icon>
+        Charms
+      </ion-item>
+
+    </ion-list>
+
+
+    <ion-list>
+
+      <ion-header>
+        Menu
+      </ion-header>
+
+      <ion-switch checked="true">
+        <icon shirt item-left></icon>
+        Invisibility Cloak
+      </ion-switch>
+
+      <ion-item>
+        <icon call item-left></icon>
+        Call Ron
+        <div class="item-note" item-right>Maybe later</div>
+      </ion-item>
+
+    </ion-list>
+
+
+  </section>
+    <section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
+   TODO
+  </section>
+    <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
+   TODO
+  </section>
+    <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
+   TODO
+  </section>
+  
+  <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
+   
+   <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
+      <ion-slide>
+        <div class="demo-slide demo-slide-1">
+          Slide 1
+        </div>
+      </ion-slide>
+      <ion-slide>
+        <div class="demo-slide demo-slide-2">
+          Slide 2
+        </div>
+      </ion-slide>
+      <ion-slide>
+        <div class="demo-slide demo-slide-3">
+          Slide 3
+        </div>
+      </ion-slide>
+   </ion-slides>
+  </section>
+
+    <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
+   TODO
+  </section>
+
+</ion-content>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -58,6 +58,7 @@ gulp.task('build', function(done) {
    'bundle',
    'e2e',
    'demos',
+    'copy.docs-demo',
    'sass',
    'fonts',
    done
@@ -366,7 +367,8 @@ gulp.task('demos', function(){
    .pipe(tsc, tscOptions, null, tscReporter)
    .pipe(babel, getBabelOptions('demos'))

-  var indexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
+  var baseIndexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
+  var docsIndexTemplate = _.template(fs.readFileSync('scripts/demos/docs.index.template.html'))();

  return gulp.src(['demos/**/*'])
    .pipe(cache('demos', { optimizeMemory: true }))
@@ -376,16 +378,28 @@ gulp.task('demos', function(){

  function createIndexHTML() {
    return through2.obj(function(file, enc, next) {
+      var indexTemplate = baseIndexTemplate;
+      if (file.path.indexOf('component-docs') > -1) {
+        indexTemplate = docsIndexTemplate;
+      }
      this.push(new VinylFile({
        base: file.base,
        contents: new Buffer(indexTemplate),
        path: path.join(path.dirname(file.path), 'index.html'),
      }));
      next(null, file);
+
+
    });
  }
 })

+gulp.task('copy.docs-demo', function () {
+  return gulp
+    .src('dist/demos/component-docs/*')
+    .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/'))
+})
+
 gulp.task('publish', function(done) {
  var version = flags.version;
  var ngVersion = flags.ngVersion;
--- a/ionic/components/app/app.ts
+++ b/ionic/components/app/app.ts
@@ -4,6 +4,7 @@ import {ROUTER_BINDINGS, HashLocationStrategy, LocationStrategy, Router} from 'a
 import {IonicConfig} from '../../config/config';
 import {IonicPlatform, Platform} from '../../platform/platform';
 import {ClickBlock} from '../../util/click-block';
+import {ScrollTo} from '../../animations/scroll-to';
 import * as dom from '../../util/dom';

 // injectables
@@ -53,7 +54,7 @@ export class IonicApp {
  /**
   * Bind some global events and publish on the 'app' channel
   */
-  bindEvents(events) {
+  bindEvents(platform, events) {
    window.addEventListener('online', (event) => {
      events.publish('app:online', event);
    }, false);
@@ -65,6 +66,19 @@ export class IonicApp {
    window.addEventListener('orientationchange', (event) => {
      events.publish('app:rotated', event);
    });
+
+    // When that status taps, we respond
+    window.addEventListener('statusTap', (event) => {
+      // TODO: Make this more better
+      var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2);
+      if(!el) { return; }
+
+      var content = dom.closest(el, 'scroll-content');
+      if(content) {
+        var scrollTo = new ScrollTo(content);
+        scrollTo.start(0, 0, 300, 0);
+      }
+    });
  }

  /**
@@ -176,7 +190,7 @@ export class IonicApp {
   */
  register(id, component) {
    if (this.components[id] && this.components[id] !== component) {
-      console.error('Component id "' + id + '" already registered.');
+      //console.error('Component id "' + id + '" already registered.');
    }
    this.components[id] = component;
  }
@@ -319,7 +333,7 @@ export function ionicBootstrap(rootComponentType, views, config) {
      let translate = new Translate();
      let navRegistry = new NavRegistry(views);

-      app.bindEvents(events);
+      app.bindEvents(platform, events);

      // add injectables that will be available to all child components
      let appBindings = Injector.resolve([
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -1,9 +1,11 @@
-import {Component, View, ElementRef} from 'angular2/angular2';
+import {Component, View, ElementRef, Optional, Host} from 'angular2/angular2';

 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
 import {IonicPlatform} from '../../platform/platform';
 import {IonicComponent} from '../../config/decorators';
+import {ViewController} from '../nav/view-controller';
+import {Tab} from '../tabs/tab';
 import {ScrollTo} from '../../animations/scroll-to';


@@ -38,10 +40,14 @@ export class Content extends Ion {
   * @param {ElementRef} elementRef  A reference to the component's DOM element.
   * @param {IonicConfig} config  The config object to change content's default settings.
   */
-  constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform) {
+  constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform, @Optional() viewCtrl: ViewController) {
    super(elementRef, config);
    this.scrollPadding = 0;
    this.platform = platform;
+
+    if(viewCtrl) {
+      viewCtrl.setContent(this);
+    }
  }

  /**
@@ -107,6 +113,16 @@ export class Content extends Ion {
    return this._scrollTo.start(x, y, duration, tolerance);
  }

+  scrollToTop() {
+    if (this._scrollTo) {
+      this._scrollTo.dispose();
+    }
+
+    this._scrollTo = new ScrollTo(this.scrollElement);
+
+    return this._scrollTo.start(0, 0, 300, 0);
+  }
+
  /**
   * Returns the content and scroll elements' dimensions.
   * @returns {Object} dimensions  The content and scroll elements' dimensions
--- a/ionic/components/menu/test/basic/main.html
+++ b/ionic/components/menu/test/basic/main.html
@@ -22,28 +22,5 @@
 </ion-menu>


-<ion-menu side="right" [content]="content" id="rightMenu">
-
-  <ion-toolbar secondary>
-    <ion-title>Right Menu</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-
-    <ion-list>
-
-      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
-        {{p.title}}
-      </button>
-
-      <button ion-item menu-toggle="rightMenu" no-forward-icon class="e2eCloseMenu">
-        Close Menu
-      </button>
-
-    </ion-list>
-  </ion-content>
-
-</ion-menu>
-

 <ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -2,13 +2,15 @@
 // iOS Popups
 // --------------------------------------------------

-$popup-ios-max-width:             280px !default;
+$popup-ios-max-width:             84% !default;
 $popup-ios-background:            rgba(0,0,0,0) !default;
 $popup-ios-border-radius:         13px !default;
-$popup-ios-background-color:      #f8f8f8 !default;
+$popup-ios-background-color:      rgba(255,255,255,0.85) !default;

 $popup-ios-head-text-align:       center !default;
 $popup-ios-title-font-size:       15px !default;
+$popup-ios-sub-title-font-size:   14px !default;
+$popup-ios-sub-title-text-color:  #666 !default;
 $popup-ios-body-text-color:       inherit !default;

 $popup-ios-button-text-color:     color(primary) !default;
@@ -26,30 +28,37 @@ ion-popup {
 }

 .popup-head {
+  padding: 10px;
  text-align: $popup-ios-head-text-align;
-  padding-top: 24px;
 }

 .popup-title {
+  margin-top: 10px;
  font-size: $popup-ios-title-font-size;
 }

+.popup-sub-title {
+  font-size: $popup-ios-sub-title-font-size;
+  color: $popup-ios-sub-title-text-color;
+}
+
 .popup-body {
-  padding: 10px;
+  padding: 10px 20px;
  color: $popup-ios-body-text-color;
 }

-.popup-body:empty {
-  padding: 0;
+.prompt-input {
+  margin-top: 5px;
 }

 .popup-buttons {
-  padding: 0;
+  padding-bottom: 10px;
  min-height: 0;

  button {
-    background-color: transparent;
-    color: $popup-ios-button-text-color;
+    @extend button[clear];
+
+    flex: 1;
    min-height: $popup-ios-button-min-height;

    &:last-child {
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -2,23 +2,27 @@
 // Material Design Popups
 // --------------------------------------------------

-$popup-md-max-width:           280px !default;
-$popup-md-background:          rgba(0,0,0,0.5) !default;
-$popup-md-border-radius:       2px !default;
-$popup-md-background-color:    #fafafa !default;
-$popup-md-box-shadow:          0px 16px 20px rgba(0, 0, 0, 0.4) !default;
+$popup-md-max-width:                      280px !default;
+$popup-md-border-radius:                  2px !default;
+$popup-md-background-color:               #fafafa !default;
+$popup-md-box-shadow:                     0px 16px 20px rgba(0, 0, 0, 0.4) !default;

-$popup-md-head-text-align:     left !default;
-$popup-md-title-font-size:     20px !default;
-$popup-md-body-text-color:     rgba(0,0,0,.5) !default;
+$popup-md-head-text-align:                left !default;
+$popup-md-title-font-size:                20px !default;
+$popup-md-sub-title-font-size:            15px !default;
+$popup-md-body-text-color:                rgba(0,0,0,.5) !default;

-$popup-md-button-text-color:   color(primary) !default;
-$popup-md-button-min-height:   36px !default;
+$popup-md-button-min-height:              36px !default;
+
+$popup-md-prompt-input-border-color:      #dedede !default;
+$popup-md-prompt-input-text-color:        #000000 !default;
+$popup-md-prompt-input-highlight-color:   map-get($colors, primary) !default;
+$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
+$popup-md-prompt-input-margin-top:        5px !default;
+$popup-md-prompt-input-margin-bottom:     5px !default;


 ion-popup {
-  background: $popup-md-background;
-
  popup-wrapper {
    max-width: $popup-md-max-width;
    border-radius: $popup-md-border-radius;
@@ -37,13 +41,24 @@ ion-popup {
  font-size: $popup-md-title-font-size;
 }

+.popup-sub-title {
+  font-size: $popup-md-sub-title-font-size;
+}
+
 .popup-body {
  padding: 10px 24px 24px 24px;
  color: $popup-md-body-text-color;
 }

-.popup-body:empty {
-  padding: 0;
+.prompt-input {
+  border-bottom: 1px solid $popup-md-prompt-input-border-color;
+  color: $popup-md-prompt-input-text-color;
+  margin: $popup-md-prompt-input-margin-top 0 $popup-md-prompt-input-margin-bottom 0;
+
+  &:focus {
+    border-bottom: 2px solid $popup-md-prompt-input-highlight-color;
+    margin-bottom: $popup-md-prompt-input-margin-bottom - 1;
+  }
 }

 .popup-buttons {
@@ -51,21 +66,8 @@ ion-popup {
  justify-content: flex-end;

  button {
-    -webkit-box-flex: initial;
-    -webkit-flex: intiial;
-    -ms-flex: initial;
-    flex: initial;
+    @extend button[clear];

-    background-color: transparent;
-    color: $popup-md-button-text-color;
    min-height: $popup-md-button-min-height;
-
-    box-shadow: none;
-    -webkit-transition: none;
-    transition: none;
-
-    &:last-child {
-      margin-right: 0;
-    }
  }
 }
--- a/ionic/components/popup/popup.scss
+++ b/ionic/components/popup/popup.scss
@@ -6,8 +6,6 @@ $popup-min-width:                 250px !default;
 $popup-max-width:                 100% !default;
 $popup-max-height:                90% !default;

-$popup-sub-title-font-size:       11px !default;
-
 $popup-button-line-height:        20px !default;
 $popup-button-font-size:          14px !default;
 $popup-button-margin-right:       8px !default;
@@ -41,10 +39,6 @@ ion-popup {
  }
 }

-.popup-head {
-  padding: 15px 10px;
-}
-
 .popup-title {
  margin: 0;
  padding: 0;
@@ -54,11 +48,23 @@ ion-popup {
  margin: 5px 0 0 0;
  padding: 0;
  font-weight: normal;
-  font-size: $popup-sub-title-font-size;
 }

 .popup-body {
  overflow: auto;
+
+  // TODO is this needed, it is never empty
+  &:empty {
+    padding: 0;
+  }
+}
+
+.prompt-input {
+  @include placeholder();
+
+  border: 0;
+  background: inherit;
+  padding: 10px 0;
 }

 .popup-buttons {
@@ -66,15 +72,10 @@ ion-popup {
  flex-direction: row;

  button {
-    flex: 1;
    display: block;
    margin: 0;
    line-height: $popup-button-line-height;
    font-size: $popup-button-font-size;
    margin-right: $popup-button-margin-right;
-
-    &:last-child {
-      margin-right: 0;
-    }
  }
 }
--- a/ionic/components/popup/popup.ts
+++ b/ionic/components/popup/popup.ts
@@ -3,6 +3,7 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,

 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
+import {Ion} from '../ion';
 import * as util from 'ionic/util';


@@ -56,9 +57,10 @@ export class Popup extends Overlay {
     */
    popup(context, opts={}) {
    return new Promise((resolve, reject)=> {
+      let config = this.config;
      let defaults = {
-        enterAnimation: 'popup-pop-in',
-        leaveAnimation: 'popup-pop-out',
+        enterAnimation: config.setting('popupPopIn'),
+        leaveAnimation: config.setting('popupPopOut'),
      };

      context.promiseResolve = resolve;
@@ -81,7 +83,7 @@ export class Popup extends Overlay {
      };
    }
    let button = {
-      text: 'OK',
+      text: context.okText || 'OK',
      onTap: (event, popupRef) => {
        // Allow it to close
        //resolve();
@@ -112,13 +114,13 @@ export class Popup extends Overlay {
      }
    }
    let okButton = {
-      text: 'OK',
+      text: context.okText || 'OK',
      onTap: (event, popupRef) => {
        // Allow it to close
      }
    }
    let cancelButton = {
-      text: 'Cancel',
+      text: context.cancelText || 'Cancel',
      isCancel: true,
      onTap: (event, popupRef) => {
        // Allow it to close
@@ -146,16 +148,17 @@ export class Popup extends Overlay {
        title: context
      };
    }
-
    let okButton = {
-      text: 'Ok',
+      text: context.okText || 'OK',
+      type: context.okType,
      onTap: (event, popupRef) => {
        // Allow it to close
      }
    }

    let cancelButton = {
-      text: 'Cancel',
+      text: context.cancelText || 'Cancel',
+      type: context.cancelType,
      isCancel: true,
      onTap: (event, popupRef) => {
        // Allow it to close
@@ -201,14 +204,15 @@ const OVERLAY_TYPE = 'popup';
  '<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
  '<popup-wrapper>' +
    '<div class="popup-head">' +
-      '<h3 class="popup-title" [inner-html]="title"></h3>' +
-      '<h5 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h5>' +
+      '<h2 class="popup-title" [inner-html]="title" *ng-if="title"></h2>' +
+      '<h3 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h3>' +
    '</div>' +
    '<div class="popup-body">' +
-      '<input type="text" *ng-if="showPrompt" placeholder="{{promptPlaceholder}}">' +
+      '<div [inner-html]="template" *ng-if="template"></div>' +
+      '<input type="{{inputType || \'text\'}}" placeholder="{{inputPlaceholder}}" *ng-if="showPrompt" class="prompt-input">' +
    '</div>' +
    '<div class="popup-buttons" *ng-if="buttons.length">' +
-      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [ng-class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
+      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
    '</div>' +
  '</popup-wrapper>',
  directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor]
@@ -277,7 +281,6 @@ class PopupAnimation extends Animation {
 class PopupPopIn extends PopupAnimation {
  constructor(element) {
    super(element);
-
    this.wrapper.fromTo('opacity', '0', '1')
    this.wrapper.fromTo('scale', '1.1', '1');

@@ -286,7 +289,6 @@ class PopupPopIn extends PopupAnimation {
 }
 Animation.register('popup-pop-in', PopupPopIn);

-
 class PopupPopOut extends PopupAnimation {
  constructor(element) {
    super(element);
@@ -297,3 +299,19 @@ class PopupPopOut extends PopupAnimation {
  }
 }
 Animation.register('popup-pop-out', PopupPopOut);
+
+class PopupMdPopIn extends PopupPopIn {
+  constructor(element) {
+    super(element);
+    this.backdrop.fromTo('opacity', '0', '0.5')
+  }
+}
+Animation.register('popup-md-pop-in', PopupMdPopIn);
+
+class PopupMdPopOut extends PopupPopOut {
+  constructor(element) {
+    super(element);
+    this.backdrop.fromTo('opacity', '0.5', '0')
+  }
+}
+Animation.register('popup-md-pop-out', PopupMdPopOut);
--- a/ionic/components/popup/test/basic/index.ts
+++ b/ionic/components/popup/test/basic/index.ts
@@ -17,14 +17,23 @@ class E2EApp {

  doAlert() {
    this.alertOpen = true;
-    this.popup.alert('Alert').then(() => {
+    this.popup.alert({
+      title: "New Friend!",
+      template: "Your friend, Obi wan Kenobi, just accepted your friend request!"
+    }).then(() => {
      this.alertOpen = false;
    });
  }

  doPrompt() {
    this.promptOpen = true;
-    this.popup.prompt('What is your name?').then((name) => {
+    this.popup.prompt({
+      title: "New Album",
+      template: "Enter a name for this new album you're so keen on adding",
+      inputPlaceholder: "Title",
+      okText: "Save",
+      okType: "secondary"
+    }).then((name) => {
      this.promptResult = name;
      this.promptOpen = false;
    }, () => {
@@ -35,7 +44,13 @@ class E2EApp {

  doConfirm() {
    this.confirmOpen = true;
-    this.popup.confirm('Are you sure?').then((result, ev) => {
+    this.popup.confirm({
+      title: "Use this lightsaber?",
+      subTitle: "You can't exchange lightsabers",
+      template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+      cancelText: "Disagree",
+      okText: "Agree"
+    }).then((result, ev) => {
      console.log('CONFIRMED', result);
      this.confirmResult = result;
      this.confirmOpen = false;
--- a/ionic/config/modes.ts
+++ b/ionic/config/modes.ts
@@ -21,6 +21,8 @@ IonicConfig.modeConfig('ios', {
  tabBarPlacement: 'bottom',
  viewTransition: 'ios',

+  popupPopIn: 'popup-pop-in',
+  popupPopOut: 'popup-pop-out',
 });


@@ -43,6 +45,9 @@ IonicConfig.modeConfig('md', {
  tabBarPlacement: 'top',
  viewTransition: 'md',

+  popupPopIn: 'popup-md-pop-in',
+  popupPopOut: 'popup-md-pop-out',  
+
  type: 'overlay',
  mdRipple: true,
 });
--- a/ionic/platform/plugin.ts
+++ b/ionic/platform/plugin.ts
@@ -5,9 +5,12 @@ export class NativePluginDecorator {

    cls.ifPlugin = (cb, returnType=null) => {
      // Convert to boolean the plugin param
-      var exists = !!check;
+      var exists;
      if(typeof this.config.pluginCheck === 'function') {
        exists = this.config.pluginCheck();
+      } else {
+        console.error('Plugin "' + this.config.name + '" is missing a pluginCheck() function for plugin verification. Please add one."');
+        return false;
      }
      if(exists) {
        return cb();
@@ -20,7 +23,7 @@ export class NativePluginDecorator {
      if(returnType) {
        return (typeof returnType === 'function') ? returnType() : returnType;
      }
-      
+
      return false;
    };

--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
    "source-map-support": "^0.2.10",
    "through2": "^0.6.3",
    "traceur-runtime": "0.0.59",
-    "typescript": "^1.5.3",
+    "typescript": "1.5.3",
    "vinyl": "^0.4.6",
    "yargs": "^3.6.0"
  }
--- a/scripts/demos/docs.index.template.html
+++ b/scripts/demos/docs.index.template.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+  <link href="/css/v2-demos/css/ionic.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="app.css">
+
+</head>
+<body>
+
+  <ion-app>
+    <ion-loading-icon></ion-loading-icon>
+  </ion-app>
+
+  <script src="/js/ionic.bundle.js"></script>
+
+  <script>
+    System.config({
+      "paths": {
+        "*": "*.js",
+        "ionic/*": "ionic/*",
+        "angular2/*": "angular2/*",
+        "rx": "rx"
+      }
+    })
+    System.import("index");
+  </script>
+
+</body>
+</html>
--- a/scripts/demos/index.template.html
+++ b/scripts/demos/index.template.html
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <link href="../../css/ionic.css" rel="stylesheet">
+
 </head>
 <body>

--- a/scripts/docs/processors/jekyll.js
+++ b/scripts/docs/processors/jekyll.js
@@ -1,31 +1,47 @@
-module.exports = function jekyll(renderDocsProcessor){
+module.exports = function jekyll(renderDocsProcessor) {
  return {
    name: 'jekyll',
    description: 'Create jekyll includes',
-    $runAfter: ['adding-extra-docs'],
-    $runBefore: ['extra-docs-added'],
+    $runAfter: ['paths-computed'],
+    $runBefore: ['rendering-docs'],
    $process: function(docs) {
      var currentVersion = renderDocsProcessor.extraData.version.current.name;

+      // pretty up and sort the docs object for menu generation
+      docs = docs.filter(function(doc) {
+        return !!doc.name && !!doc.outputPath;
+      });
+      docs.sort(function(a, b) {
+        textA = a.name ? a.name.toUpperCase() : '';
+        textB = b.name ? b.name.toUpperCase() : '';
+        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+      });
+      docs.forEach(function(doc, i) {
+        docs[i].URL = doc.outputPath.replace('docs/v2//','docs/v2/')
+                                    .replace('/index.md','');
+      });
+
      docs.push({
        docType: 'api-menu',
        id: 'api-menu',
        template: 'api_menu.template.html',
-        outputPath: '_includes/v2/api_menu.html'
+        outputPath: '_includes/v2_fluid/api_menu.html'
      });
-     //TODO autogenerate this
      docs.push({
-        docType: 'api-menu-version',
-        id: 'api-menu-version',
-        template: 'api_menu_version.template.html',
-        outputPath: '_includes/v2/api_menu_' + currentVersion + '.html'
+        docType: 'api-menu-flat-version',
+        id: 'api-menu-flat-version',
+        template: 'api_menu_flat_version.template.html',
+        outputPath: '_includes/v2_fluid/api_menu_flat_' + currentVersion + '.html'
      });
      docs.push({
        docType: 'api-version-select',
        id: 'api-version-select',
        template: 'api_version_select.template.html',
-        outputPath: '_includes/v2/api_version_select.html'
+        outputPath: '_includes/v2_fluid/api_version_select.html'
      });
+
+      // returning docs will replace docs object in the next process
+      return docs;
    }
-  }
+  };
 };
--- a/scripts/docs/templates/api_index.template.html
+++ b/scripts/docs/templates/api_index.template.html
@@ -1,9 +1,10 @@
 ---
-layout: "v2/docs_base"
+layout: "v2_fluid/docs_base"
 version: "<$ version.current.name $>"
 versionHref: "<$ version.current.href $>"
 path: ""

+category: api
 id: api
 title: Javascript
 header_sub_title: Extend Ionic even further with the power of AngularJS
--- a/scripts/docs/templates/api_menu.template.html
+++ b/scripts/docs/templates/api_menu.template.html
@@ -5,10 +5,10 @@
    <@ else @>
 {% elsif page.versionHref == "<$ ver.href $>" %}
    <@ endif @>
-  {% include v2/api_menu_<$ ver.name $>.html %}
+  {% include v2_fluid/api_menu_flat_<$ ver.name $>.html %}
  <@ endif @>
 <@ endfor @>
 <# make the last case always be to show latest version #>
 {% else %}
-  {% include v2/api_menu_<$ version.latest.name $>.html %}
+  {% include v2_fluid/api_menu_flat_<$ version.latest.name $>.html %}
 {% endif %}
--- a/scripts/docs/templates/api_menu_flat_version.template.html
+++ b/scripts/docs/templates/api_menu_flat_version.template.html
@@ -0,0 +1,4 @@
+<@ for doc in docs @><@ if doc.URL @>
+<li class="{% if page.id == '{{<$ doc.name $> | slugify}}' %}active{% endif %}">
+  <a href="/<$ doc.URL $>"><$ doc.name $></a>
+</li><@ endif @><@ endfor @>
--- a/scripts/docs/templates/api_version_select.template.html
+++ b/scripts/docs/templates/api_version_select.template.html
@@ -1,4 +1,6 @@
-<select onchange="window.location.href=this.options[this.selectedIndex].value">
+<select name="version"
+        id="version-toggle"
+        onchange="window.location.href=this.options[this.selectedIndex].value">
 <@ for ver in version.list @>
  <option
   value="<$ ver.href $>/{% if page.path != ''%}{{page.path}}{% else %}api/{% endif %}"
@@ -7,5 +9,3 @@
  </option>
 <@ endfor @>
 </select>
-
-
--- a/scripts/docs/templates/common.template.html
+++ b/scripts/docs/templates/common.template.html
@@ -1,9 +1,10 @@
 ---
-layout: "v2/docs_base"
+layout: "v2_fluid/docs_base"
 version: "<$ version.current.name $>"
 versionHref: "<$ version.current.href $>"
 path: "<$ doc.path $>"
-id: api
+category: api
+id: "{{<$ doc.name $> | slugify}}"
 title: "<@ if doc.docType == "directive" @><$ doc.name | dashCase $><@ else @><$ doc.name $><@ endif @>"
 header_sub_title: "<$ doc.docType | capital $> in module <$ doc.module $>"
 doc: "<$ doc.name $>"