javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into sticky-header-chrome

Browse Source
This commit is contained in:
jbavari
2015-10-02 13:04:49 -06:00
parent 82ef03b346 59713e6bb2
commit d63fbc1787
4 changed files with 172 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/list/test/sticky/main.html
View File

@ -1,8 +1,4 @@
<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-view>

36
ionic/components/popup/modes/ios.scss
View File

@ -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: 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;
}

179
ionic/components/popup/popup.ts
View File

@ -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
* @returns {TODO} TODO
* @param {TODO} opts TODO
* @returns {object} A promise
*/
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;
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) {

1
ionic/config/modes.ts
View File

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