Merge branch 'master' into sticky-header-chrome

ionic/components/list/test/sticky/main.html

@@ -1,8 +1,4 @@
-
+<ion-content>
-<ion-view nav-title="List">
-
-  <ion-content>
-
   <ion-list>
     <ion-item-group *ng-for="#group of groups">
       <ion-item-group-title>{{group.title}}</ion-item-group-title>
@@ -10,9 +6,5 @@
         {{item.title}}
       </ion-item>
     </ion-item-group>
-
   </ion-list>
-
+</ion-content>
-  </ion-content>
-
-</ion-view>

ionic/components/popup/modes/ios.scss

@@ -2,10 +2,10 @@
 // iOS Popups
 // --------------------------------------------------
 
-$popup-ios-max-width:             84% !default;
+$popup-ios-max-width:                           270px !default;
 $popup-ios-background:                          rgba(0,0,0,0) !default;
 $popup-ios-border-radius:                       13px !default;
-$popup-ios-background-color:      rgba(255,255,255,0.85) !default;
+$popup-ios-background-color:                    #f8f8f8 !default;
 
 $popup-ios-head-text-align:                     center !default;
 $popup-ios-title-font-size:                     17px !default;
@@ -15,9 +15,14 @@ $popup-ios-body-text-color:       inherit !default;
 $popup-ios-body-text-align:                     center !default;
 $popup-ios-body-font-size:                      13px !default;
 
-$popup-ios-button-text-color:     color(primary) !default;
+$popup-ios-prompt-input-background-color:       #fff !default;
+$popup-ios-prompt-input-border:                 1px solid #ccc !default;
+$popup-ios-prompt-input-border-radius:          4px !default;
+
 $popup-ios-button-min-height:                   44px !default;
 $popup-ios-button-font-size:                    17px !default;
+$popup-ios-button-border-color:                 #c8c7cc !default;
+$popup-ios-button-activated-background-color:   #e9e9e9 !default;
 
 
 ion-popup {
@@ -27,6 +32,7 @@ ion-popup {
     border-radius: $popup-ios-border-radius;
     background-color: $popup-ios-background-color;
     max-width: $popup-ios-max-width;
+    overflow: hidden;
   }
 }
 
@@ -37,6 +43,7 @@ ion-popup {
 
 .popup-title {
   margin-top: 12px;
+  font-weight: bold;
   font-size: $popup-ios-title-font-size;
 }
 
@@ -53,11 +60,13 @@ ion-popup {
 }
 
 .prompt-input {
-  background-color: #fff;
+  padding: 6px;
-  padding: 5px;
   margin-top: 24px;
-  border-radius: 4px;
+
-  border: 1px solid #ccc;
+  background-color: $popup-ios-prompt-input-background-color;
+  border: $popup-ios-prompt-input-border;
+  border-radius: $popup-ios-prompt-input-border-radius;
+  -webkit-appearance: none;
 }
 
 .popup-buttons {
@@ -69,14 +78,23 @@ ion-popup {
     border-radius: 0;
     font-size: $popup-ios-button-font-size;
     min-height: $popup-ios-button-min-height;
-    border-right: 1px solid #c8c7cc;
+    border-right: 1px solid $popup-ios-button-border-color;
+
+    &.activated {
+      opacity: 1;
+      background-color: $popup-ios-button-activated-background-color;
+    }
+
+    &:hover:not(.disable-hover) {
+      opacity: 1;
+    }
 
     &:before {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
-      border-top: 1px solid #c8c7cc;
+      border-top: 1px solid $popup-ios-button-border-color;
       content: '';
       pointer-events: none;
     }

ionic/components/popup/popup.ts

@@ -10,9 +10,9 @@ import * as util from 'ionic/util';
 /**
  * @name Popup
  * @description
- * The Ionic Popup service allows programmatically creating and showing popup windows that require the user to respond in order to continue.
+ * The Ionic Popup service allows the creation of popup windows that require the user to respond in order to continue.
  *
- * The popup system has support for more flexible versions of the built in `alert()`, `prompt()`, and `confirm()` functions that users are used to, in addition to allowing popups with completely custom content and look.
+ * The popup service has support for more flexible versions of the built in `alert()`, `prompt()`, and `confirm()` functions that users are used to, in addition to allowing popups with completely custom content and look.
  *
  * @usage
  * ```ts
@@ -23,13 +23,23 @@ import * as util from 'ionic/util';
  *   }
  *
  *   doAlert() {
- *     this.popup.alert('Alert').then(() => {
+ *     this.popup.alert({
+ *       title: "New Friend!",
+ *       template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+ *       cssClass: 'my-alert'
+ *     }).then(() => {
  *       console.log('Alert closed');
  *     });
  *   }
  *
  *   doPrompt() {
- *     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) => {
  *       console.log('Name entered:', name);
  *     }, () => {
  *       console.error('Prompt closed');
@@ -37,7 +47,13 @@ import * as util from 'ionic/util';
  *   }
  *
  *   doConfirm() {
- *     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);
  *     }, () => {
  *       console.error('Not confirmed!');
@@ -51,11 +67,10 @@ export class Popup extends Overlay {
 
   /**
    * TODO
-     * @param {TODO} context  TODO
+   * @param {TODO} opts  TODO
-     * @param {TODO} [opts={}]  TODO
+   * @returns {object} A promise
-     * @returns {TODO} TODO
    */
-    popup(context, opts={}) {
+  popup(opts) {
     return new Promise((resolve, reject)=> {
       let config = this.config;
       let defaults = {
@@ -63,113 +78,162 @@ export class Popup extends Overlay {
         leaveAnimation: config.setting('popupPopOut'),
       };
 
-      context.promiseResolve = resolve;
+      opts.promiseResolve = resolve;
-      context.promiseReject = reject;
+      opts.promiseReject = reject;
 
-      return this.create(OVERLAY_TYPE, StandardPopup, util.extend(defaults, opts), context);
+      return this.create(OVERLAY_TYPE, StandardPopup, defaults, opts);
     });
   }
 
   /**
-   * TODO
+   * Show a simple alert popup with a message and one button
-   * @param {TODO} context  TODO
+   * that the user can tap to close the popup.
-   * @param {TODO} [opts={}]  TODO
+   *
-   * @returns {TODO} TODO
+   * @param {object} opts The options for showing the alert, of the form:
+   *
+   * ```
+   * {
+   *   title: '', // String. The title of the popup.
+   *   cssClass: '', // String (optional). The custom CSS class name.
+   *   subTitle: '', // String (optional). The sub-title of the popup.
+   *   template: '', // String (optional). The html template to place in the popup body.
+   *   templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
+   *   okText: '', // String (default: 'OK'). The text of the OK button.
+   *   okType: '', // String (default: 'primary'). The type of the OK button.
+   * }
+   * ```
+   *
+   * @returns {object} A promise which is resolved when the popup is closed.
    */
-  alert(context={}, opts={}) {
+  alert(opts={}) {
-    console.log(context, opts);
+    if (typeof opts === 'string') {
-    if (typeof context === 'string') {
+      opts = {
-      context = {
+        title: opts
-        title: context
       };
     }
     let button = {
-      text: context.okText || 'OK',
+      text: opts.okText || 'OK',
-      type: context.okType || 'primary',
+      type: opts.okType || 'primary',
       onTap: (event, popupRef) => {
         // Allow it to close
         //resolve();
       }
     };
-    context = util.extend({
+    opts = util.extend({
       cancel: () => {
         //reject();
       },
       buttons: [
         button
       ]
-    }, context);
+    }, opts);
 
-    return this.popup(context, opts);
+    return this.popup(opts);
   }
 
   /**
-   * TODO
+   * Show a simple confirm popup with a message, Cancel and OK button.
-   * @param {TODO} context  TODO
+   *
-   * @param {TODO} [opts={}]  TODO
+   * Resolves the promise with true if the user presses the OK button, and false if the user presses the Cancel button.
-   * @returns {TODO} TODO
+   *
+   * @param {object} opts The options for showing the confirm, of the form:
+   *
+   * ```
+   * {
+   *   title: '', // String. The title of the popup.
+   *   cssClass: '', // String (optional). The custom CSS class name.
+   *   subTitle: '', // String (optional). The sub-title of the popup.
+   *   template: '', // String (optional). The html template to place in the popup body.
+   *   templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
+   *   cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
+   *   cancelType: '', // String (default: 'primary'). The type of the Cancel button.
+   *   okText: '', // String (default: 'OK'). The text of the OK button.
+   *   okType: '', // String (default: 'primary'). The type of the OK button.
+   * }
+   * ```
+   *
+   * @returns {object} A promise which is resolved when the popup is closed.
    */
-  confirm(context={}, opts={}) {
+  confirm(opts={}) {
-    if (typeof context === 'string') {
+    if (typeof opts === 'string') {
-      context = {
+      opts = {
-        title: context
+        title: opts
       }
     }
     let okButton = {
-      text: context.okText || 'OK',
+      text: opts.okText || 'OK',
-      type: context.okType || 'primary',
+      type: opts.okType || 'primary',
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
     let cancelButton = {
-      text: context.cancelText || 'Cancel',
+      text: opts.cancelText || 'Cancel',
-      type: context.cancelType || 'primary',
+      type: opts.cancelType || 'primary',
       isCancel: true,
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
-    context = util.extend({
+    opts = util.extend({
       cancel: () => {
       },
       buttons: [
         cancelButton, okButton
       ]
-    }, context);
+    }, opts);
-    return this.popup(context, opts);
+    return this.popup(opts);
   }
 
   /**
-   * TODO
+   * Show a simple prompt popup with a message, input, Cancel and OK button.
-   * @param {TODO} [context={}]  TODO
+   *
-   * @param {TODO} [opts={}]  TODO
+   * Resolves the promise with the value of the input if the user presses OK, and with undefined if the user presses Cancel.
-   * @returns {TODO} TODO
+   *
+   * @param {object} opts The options for showing the prompt, of the form:
+   *
+   * ```
+   * {
+   *   title: '', // String. The title of the popup.
+   *   cssClass: '', // String (optional). The custom CSS class name.
+   *   subTitle: '', // String (optional). The sub-title of the popup.
+   *   template: '', // String (optional). The html template to place in the popup body.
+   *   templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
+   *   inputType: // String (default: 'text'). The type of input to use.
+   *   inputPlaceholder: // String (default: ''). A placeholder to use for the input.
+   *   cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
+   *   cancelType: '', // String (default: 'primary'). The type of the Cancel button.
+   *   okText: '', // String (default: 'OK'). The text of the OK button.
+   *   okType: '', // String (default: 'primary'). The type of the OK button.
+   * }
+   * ```
+   *
+   * @returns {object} A promise which is resolved when the popup is closed.
    */
-  prompt(context={}, opts={}) {
+  prompt(opts={}) {
-    if (typeof context === 'string') {
+    if (typeof opts === 'string') {
-      context = {
+      opts = {
-        title: context
+        title: opts
       };
     }
     let okButton = {
-      text: context.okText || 'OK',
+      text: opts.okText || 'OK',
-      type: context.okType || 'primary',
+      type: opts.okType || 'primary',
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
 
     let cancelButton = {
-      text: context.cancelText || 'Cancel',
+      text: opts.cancelText || 'Cancel',
-      type: context.cancelType || 'primary',
+      type: opts.cancelType || 'primary',
       isCancel: true,
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
 
-    context = util.extend({
+    opts = util.extend({
       showPrompt: true,
       promptPlaceholder: '',
       cancel: () => {
@@ -177,15 +241,14 @@ export class Popup extends Overlay {
       buttons: [
         cancelButton, okButton
       ]
-    }, context);
+    }, opts);
 
-    return this.popup(context, opts);
+    return this.popup(opts);
   }
 
   /**
    * TODO
-   * @param {TODO} context  TODO
+   * @param {TODO} handle  TODO
-   * @param {TODO} [opts={}]  TODO
    * @returns {TODO} TODO
    */
   get(handle) {

ionic/config/modes.ts

@@ -43,7 +43,6 @@ IonicConfig.modeConfig('md', {
   modalLeave: 'modal-md-slide-out',
 
   tabBarPlacement: 'top',
-  tabBarIcons: 'hide',
   viewTransition: 'md',
 
   popupPopIn: 'popup-md-pop-in',