From f158bf95a8814dfb5c1f4fca81dc6e92a2dec540 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Oct 2015 12:19:59 -0400 Subject: [PATCH 1/7] chore(popup): Removing opts variable as it isn't used Fixing iOS styling. References #183 --- ionic/components/popup/modes/ios.scss | 2 +- ionic/components/popup/popup.ts | 22 ++++++++-------------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss index 04ddd2379e..9729194054 100644 --- a/ionic/components/popup/modes/ios.scss +++ b/ionic/components/popup/modes/ios.scss @@ -5,7 +5,7 @@ $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-background-color: #f8f8f8 !default; $popup-ios-head-text-align: center !default; $popup-ios-title-font-size: 17px !default; diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index 60d877fb7b..a3d3871af6 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -52,10 +52,9 @@ export class Popup extends Overlay { /** * TODO * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO * @returns {TODO} TODO */ - popup(context, opts={}) { + popup(context) { return new Promise((resolve, reject)=> { let config = this.config; let defaults = { @@ -66,18 +65,16 @@ export class Popup extends Overlay { context.promiseResolve = resolve; context.promiseReject = reject; - return this.create(OVERLAY_TYPE, StandardPopup, util.extend(defaults, opts), context); + return this.create(OVERLAY_TYPE, StandardPopup, defaults, context); }); } /** * TODO * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO * @returns {TODO} TODO */ - alert(context={}, opts={}) { - console.log(context, opts); + alert(context={}) { if (typeof context === 'string') { context = { title: context @@ -100,16 +97,15 @@ export class Popup extends Overlay { ] }, context); - return this.popup(context, opts); + return this.popup(context); } /** * TODO * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO * @returns {TODO} TODO */ - confirm(context={}, opts={}) { + confirm(context={}) { if (typeof context === 'string') { context = { title: context @@ -137,16 +133,15 @@ export class Popup extends Overlay { cancelButton, okButton ] }, context); - return this.popup(context, opts); + return this.popup(context); } /** * TODO * @param {TODO} [context={}] TODO - * @param {TODO} [opts={}] TODO * @returns {TODO} TODO */ - prompt(context={}, opts={}) { + prompt(context={}) { if (typeof context === 'string') { context = { title: context @@ -179,13 +174,12 @@ export class Popup extends Overlay { ] }, context); - return this.popup(context, opts); + return this.popup(context); } /** * TODO * @param {TODO} context TODO - * @param {TODO} [opts={}] TODO * @returns {TODO} TODO */ get(handle) { From dcc76f7e8d11ec61cdb4a87bcf3b051dd8458816 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Oct 2015 12:22:14 -0400 Subject: [PATCH 2/7] chore(popup): Renaming context to opts References #183 --- ionic/components/popup/popup.ts | 80 ++++++++++++++++----------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index a3d3871af6..6b6fafa2fb 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -51,10 +51,10 @@ export class Popup extends Overlay { /** * TODO - * @param {TODO} context TODO + * @param {TODO} opts TODO * @returns {TODO} TODO */ - popup(context) { + popup(opts) { return new Promise((resolve, reject)=> { let config = this.config; let defaults = { @@ -62,109 +62,109 @@ 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, defaults, context); + return this.create(OVERLAY_TYPE, StandardPopup, defaults, opts); }); } /** * TODO - * @param {TODO} context TODO + * @param {TODO} opts TODO * @returns {TODO} TODO */ - alert(context={}) { - 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); + return this.popup(opts); } /** * TODO - * @param {TODO} context TODO + * @param {TODO} opts TODO * @returns {TODO} TODO */ - confirm(context={}) { - 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); + return this.popup(opts); } /** * TODO - * @param {TODO} [context={}] TODO + * @param {TODO} [opts={}] TODO * @returns {TODO} TODO */ - prompt(context={}) { - 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: () => { @@ -172,14 +172,14 @@ export class Popup extends Overlay { buttons: [ cancelButton, okButton ] - }, context); + }, opts); - return this.popup(context); + return this.popup(opts); } /** * TODO - * @param {TODO} context TODO + * @param {TODO} opts TODO * @returns {TODO} TODO */ get(handle) { From 78224f35ea75a30bb8f77fe018daa48434a44afd Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Oct 2015 14:20:20 -0400 Subject: [PATCH 3/7] fix(popup): Fixed iOS styling References #183 --- ionic/components/popup/modes/ios.scss | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss index 9729194054..7fc74783cb 100644 --- a/ionic/components/popup/modes/ios.scss +++ b/ionic/components/popup/modes/ios.scss @@ -2,7 +2,7 @@ // 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: #f8f8f8 !default; @@ -27,6 +27,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 +38,7 @@ ion-popup { .popup-title { margin-top: 12px; + font-weight: bold; font-size: $popup-ios-title-font-size; } @@ -54,10 +56,11 @@ ion-popup { .prompt-input { background-color: #fff; - padding: 5px; + padding: 6px; margin-top: 24px; border-radius: 4px; border: 1px solid #ccc; + -webkit-appearance: none; } .popup-buttons { @@ -71,6 +74,15 @@ ion-popup { min-height: $popup-ios-button-min-height; border-right: 1px solid #c8c7cc; + &.activated { + opacity: 1; + background-color: #DEDEDE; + } + + &:hover:not(.disable-hover) { + opacity: 1; + } + &:before { position: absolute; top: 0; From 3b2eb8452ec1fbfc71b33f7d16059392f9affc9a Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Oct 2015 14:40:15 -0400 Subject: [PATCH 4/7] chore(popup): Adding API comments for docs for popups References #183 --- ionic/components/popup/popup.ts | 111 ++++++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 21 deletions(-) diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index 6b6fafa2fb..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,12 +65,12 @@ import * as util from 'ionic/util'; @Injectable() export class Popup extends Overlay { - /** - * TODO - * @param {TODO} opts TODO - * @returns {TODO} TODO - */ - popup(opts) { + /** + * TODO + * @param {TODO} opts TODO + * @returns {object} A promise + */ + popup(opts) { return new Promise((resolve, reject)=> { let config = this.config; let defaults = { @@ -70,9 +86,24 @@ export class Popup extends Overlay { } /** - * 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(opts={}) { if (typeof opts === 'string') { @@ -101,9 +132,27 @@ export class Popup extends Overlay { } /** - * 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(opts={}) { if (typeof opts === 'string') { @@ -137,9 +186,29 @@ export class Popup extends Overlay { } /** - * 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(opts={}) { if (typeof opts === 'string') { @@ -179,7 +248,7 @@ export class Popup extends Overlay { /** * TODO - * @param {TODO} opts TODO + * @param {TODO} handle TODO * @returns {TODO} TODO */ get(handle) { From 34b063550c44e735c8f2070e794cfd3024a07dcf Mon Sep 17 00:00:00 2001 From: mhartington Date: Fri, 2 Oct 2015 14:36:27 -0400 Subject: [PATCH 5/7] fix(config): don't hide tab icons for MD --- ionic/config/modes.ts | 1 - 1 file changed, 1 deletion(-) 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', From e013c2687982b84353f412c06710b489d101abaf Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 2 Oct 2015 14:55:14 -0400 Subject: [PATCH 6/7] fix(popup): Fix iOS button hover, convert some values to sass variables Fix indentations of sass values, references #183 --- ionic/components/popup/modes/ios.scss | 46 +++++++++++++++------------ 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss index 7fc74783cb..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: 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-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 { @@ -55,11 +60,12 @@ ion-popup { } .prompt-input { - background-color: #fff; 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; } @@ -72,11 +78,11 @@ 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: #DEDEDE; + background-color: $popup-ios-button-activated-background-color; } &:hover:not(.disable-hover) { @@ -88,7 +94,7 @@ ion-popup { top: 0; right: 0; left: 0; - border-top: 1px solid #c8c7cc; + border-top: 1px solid $popup-ios-button-border-color; content: ''; pointer-events: none; } From 59713e6bb206cd999e4f6f57025606ebe00362a9 Mon Sep 17 00:00:00 2001 From: jbavari Date: Fri, 2 Oct 2015 13:04:35 -0600 Subject: [PATCH 7/7] Fix(demo): update the sticky list demo, remove ion-view, only have ion-content. --- ionic/components/list/test/sticky/main.html | 28 ++++++++------------- 1 file changed, 10 insertions(+), 18 deletions(-) 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}} + + + +