diff --git a/ionic/components/list/test/sticky/main.html b/ionic/components/list/test/sticky/main.html index 67f6307cce..bdff3d4ca6 100644 --- a/ionic/components/list/test/sticky/main.html +++ b/ionic/components/list/test/sticky/main.html @@ -1,18 +1,10 @@ - - - - - - - - {{group.title}} - - {{item.title}} - - - - - - - - + + + + {{group.title}} + + {{item.title}} + + + + diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss index 04ddd2379e..13267449c5 100644 --- a/ionic/components/popup/modes/ios.scss +++ b/ionic/components/popup/modes/ios.scss @@ -2,22 +2,27 @@ // iOS Popups // -------------------------------------------------- -$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: rgba(255,255,255,0.85) !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: #f8f8f8 !default; -$popup-ios-head-text-align: center !default; -$popup-ios-title-font-size: 17px !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-body-text-align: center !default; -$popup-ios-body-font-size: 13px !default; +$popup-ios-head-text-align: center !default; +$popup-ios-title-font-size: 17px !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-body-text-align: center !default; +$popup-ios-body-font-size: 13px !default; -$popup-ios-button-text-color: color(primary) !default; -$popup-ios-button-min-height: 44px !default; -$popup-ios-button-font-size: 17px !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: 5px; + padding: 6px; 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; } diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index 60d877fb7b..90bbd9f0af 100644 --- a/ionic/components/popup/popup.ts +++ b/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!'); @@ -49,13 +65,12 @@ import * as util from 'ionic/util'; @Injectable() export class Popup extends Overlay { - /** - * TODO - * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO - * @returns {TODO} TODO - */ - popup(context, opts={}) { + /** + * TODO + * @param {TODO} opts TODO + * @returns {object} A promise + */ + 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; - context.promiseReject = reject; + opts.promiseResolve = resolve; + opts.promiseReject = reject; - return this.create(OVERLAY_TYPE, StandardPopup, util.extend(defaults, opts), context); + return this.create(OVERLAY_TYPE, StandardPopup, defaults, opts); }); } /** - * TODO - * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO - * @returns {TODO} TODO + * Show a simple alert popup with a message and one button + * that the user can tap to close the popup. + * + * @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={}) { - console.log(context, opts); - if (typeof context === 'string') { - context = { - title: context + alert(opts={}) { + if (typeof opts === 'string') { + opts = { + title: opts }; } let button = { - text: context.okText || 'OK', - type: context.okType || 'primary', + text: opts.okText || 'OK', + 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 - * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO - * @returns {TODO} TODO + * Show a simple confirm popup with a message, Cancel and OK button. + * + * Resolves the promise with true if the user presses the OK button, and false if the user presses the Cancel button. + * + * @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={}) { - if (typeof context === 'string') { - context = { - title: context + confirm(opts={}) { + if (typeof opts === 'string') { + opts = { + title: opts } } let okButton = { - text: context.okText || 'OK', - type: context.okType || 'primary', + text: opts.okText || 'OK', + type: opts.okType || 'primary', onTap: (event, popupRef) => { // Allow it to close } } let cancelButton = { - text: context.cancelText || 'Cancel', - type: context.cancelType || 'primary', + text: opts.cancelText || 'Cancel', + type: opts.cancelType || 'primary', isCancel: true, onTap: (event, popupRef) => { // Allow it to close } } - context = util.extend({ + opts = util.extend({ cancel: () => { }, buttons: [ cancelButton, okButton ] - }, context); - return this.popup(context, opts); + }, opts); + return this.popup(opts); } /** - * TODO - * @param {TODO} [context={}] TODO - * @param {TODO} [opts={}] TODO - * @returns {TODO} TODO + * Show a simple prompt popup with a message, input, Cancel and OK button. + * + * Resolves the promise with the value of the input if the user presses OK, and with undefined if the user presses Cancel. + * + * @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={}) { - if (typeof context === 'string') { - context = { - title: context + prompt(opts={}) { + if (typeof opts === 'string') { + opts = { + title: opts }; } let okButton = { - text: context.okText || 'OK', - type: context.okType || 'primary', + text: opts.okText || 'OK', + type: opts.okType || 'primary', onTap: (event, popupRef) => { // Allow it to close } } let cancelButton = { - text: context.cancelText || 'Cancel', - type: context.cancelType || 'primary', + text: opts.cancelText || 'Cancel', + 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} [opts={}] TODO + * @param {TODO} handle TODO * @returns {TODO} TODO */ get(handle) { diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts index 353c80a8ee..292e71b721 100644 --- a/ionic/config/modes.ts +++ b/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',