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

Merge branch '2.0' into windows-mode

Browse Source
This commit is contained in:
Brandy Carney
2016-03-03 13:12:52 -05:00
parent 1d95e6c339 a2a9e3846f
commit 62c7199fd1
45 changed files with 558 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
CHANGELOG.md
View File

@ -1,3 +1,101 @@
<a name="2.0.0-beta.2"></a>
# [2.0.0-beta.2](https://github.com/driftyco/ionic/compare/v2.0.0-beta.1...v2.0.0-beta.2) (2016-03-01)
### Bug Fixes
* **alert:** add max height to alert body so it will overflow ([9c0eebd](https://github.com/driftyco/ionic/commit/9c0eebd)), closes [#5316](https://github.com/driftyco/ionic/issues/5316)
* **animation:** ensure final inline styles applied when fallback runs ([4524e5a](https://github.com/driftyco/ionic/commit/4524e5a)), closes [#5484](https://github.com/driftyco/ionic/issues/5484)
* **generate:** output correct Sass import for pages ([3784f47](https://github.com/driftyco/ionic/commit/3784f47)), closes [#5641](https://github.com/driftyco/ionic/issues/5641)
* **menu:** fix enabled check ([8564d79](https://github.com/driftyco/ionic/commit/8564d79))
* **nav:** immediately stop if view removed before trans finished ([4fabade](https://github.com/driftyco/ionic/commit/4fabade))
* **overlay:** do not dom cache views before overlays ([4cae151](https://github.com/driftyco/ionic/commit/4cae151)), closes [#5483](https://github.com/driftyco/ionic/issues/5483)
* **refresher:** get scrollTop from the scroll element to prevent refreshing when dragging up ([ea884de](https://github.com/driftyco/ionic/commit/ea884de)), closes [#5207](https://github.com/driftyco/ionic/issues/5207)
* **sass:** rename brightness/inverse sass functions ([892b007](https://github.com/driftyco/ionic/commit/892b007)), closes [#5542](https://github.com/driftyco/ionic/issues/5542)
* **tabs:** pop tab page to parent nav ([b9eec24](https://github.com/driftyco/ionic/commit/b9eec24)), closes [#5196](https://github.com/driftyco/ionic/issues/5196)
* **toolbar:** add a min-width to the toolbar content so that it won't overlap buttons ([5fb1e08](https://github.com/driftyco/ionic/commit/5fb1e08)), closes [#5657](https://github.com/driftyco/ionic/issues/5657)
### Features
* **checkbox:** add change event ([2596731](https://github.com/driftyco/ionic/commit/2596731))
* **infiniteScroll:** add infinite scroll ([0480fa3](https://github.com/driftyco/ionic/commit/0480fa3)), closes [#5415](https://github.com/driftyco/ionic/issues/5415)
* **input:** default autocomplete/autocorrect=off, fix autofocus ([b53d707](https://github.com/driftyco/ionic/commit/b53d707))
* **menu:** grab the menu by side only if it is enabled ([a2b7a21](https://github.com/driftyco/ionic/commit/a2b7a21))
* **NavController:** prevent other lifecycle events from firing ([6b9e59d](https://github.com/driftyco/ionic/commit/6b9e59d)), closes [#5516](https://github.com/driftyco/ionic/issues/5516)
* **prodMode:** set isProd() when prodMode set in @App config ([3c8daa0](https://github.com/driftyco/ionic/commit/3c8daa0))
* **spinner:** SVG spinners ([6c73446](https://github.com/driftyco/ionic/commit/6c73446))
* **toggle:** add change event ([730cccd](https://github.com/driftyco/ionic/commit/730cccd))
### Refactor
* **alert:** remove tabbarIcons and add tabbarLayout which accepts different values ([8cfebe1](https://github.com/driftyco/ionic/commit/8cfebe1)), closes [#5625](https://github.com/driftyco/ionic/issues/5625)
* **menu:** improve menu get lookup ([004e635](https://github.com/driftyco/ionic/commit/004e635)), closes [#5535](https://github.com/driftyco/ionic/issues/5535)
* **tabs:** remove duplicated styles from imports ([d5ebf3f](https://github.com/driftyco/ionic/commit/d5ebf3f)), closes [#5624](https://github.com/driftyco/ionic/issues/5624)
* **searchbar:** add class to searchbar when hideCancel is passed ([a0f0004](https://github.com/driftyco/ionic/commit/a0f0004))
### Breaking Changes
#### New npm module
The npm module has been renamed from `ionic-framework` to `ionic-angular`.
Update package.json to reflect this:
```
"ionic-angular": "2.0.0-beta.2",
```
imports from the framework were:
```js
import {Platform} from 'ionic-framework/ionic';
```
and are now:
```js
import {Platform} from 'ionic-angular';
```
#### Infinite Scroll
Infinite Scroll has been added: [docs](http://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/)
#### Refresher:
- `<ion-refresher>` now takes a child `<ion-refresher-content>`
component.
- Custom refresh content components can now be replaced for Ionic's
default refresher content.
- Properties `pullingIcon`, `pullingText` and `refreshingText` have
been moved to the `<ion-refresher-content>` component.
- `spinner` property has been renamed to `refreshingSpinner` and now
goes on the `<ion-refresher-content>` component.
- `refreshingIcon` property is no longer an input, but instead
`refreshingSpinner` should be used.
Was:
```
<ion-refresher (refresh)="doRefresh($event)"
pullingIcon="arrow-dropdown">
</ion-refresher>
```
Now:
```
<ion-refresher (refresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"></ion-refresher-content>
</ion-refresher>
```
#### Tabs
Input property `tabbarIcons` has been replaced by `tabbarLayout` and accepts the following values: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
<a name="2.0.0-beta.1"></a> <a name="2.0.0-beta.1"></a>
# [2.0.0-beta.1](https://github.com/driftyco/ionic/compare/v2.0.0-beta.0...v2.0.0-beta.1) (2016-02-18) # [2.0.0-beta.1](https://github.com/driftyco/ionic/compare/v2.0.0-beta.0...v2.0.0-beta.1) (2016-02-18)

30
demos/action-sheet/index.ts
View File

@ -25,6 +25,14 @@ export class InitialPage {
var androidSheet = { var androidSheet = {
title: 'Albums', title: 'Albums',
buttons: [ buttons: [
{
text: 'Delete',
style: 'destructive',
icon: 'md-trash',
handler: () => {
console.log('Destructive clicked');
}
},
{ text: 'Share', { text: 'Share',
icon: 'share', icon: 'share',
handler: () => { handler: () => {
@ -43,14 +51,6 @@ export class InitialPage {
console.log('Favorite clicked'); console.log('Favorite clicked');
} }
}, },
{
text: 'Delete',
style: 'destructive',
icon: 'md-trash',
handler: () => {
console.log('Destructive clicked');
}
},
{ {
text: 'Cancel', text: 'Cancel',
style: 'cancel', style: 'cancel',
@ -65,6 +65,13 @@ export class InitialPage {
let actionSheet = ActionSheet.create( androidSheet || { let actionSheet = ActionSheet.create( androidSheet || {
buttons: [ buttons: [
{
text: 'Delete',
style: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
},
{ {
text: 'Share', text: 'Share',
handler: () => { handler: () => {
@ -83,13 +90,6 @@ export class InitialPage {
console.log('Favorite clicked'); console.log('Favorite clicked');
} }
}, },
{
text: 'Delete',
style: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
},
{ {
text: 'Cancel', text: 'Cancel',
style: 'cancel', style: 'cancel',

3
gulpfile.js
View File

@ -671,12 +671,13 @@ function buildDemoSass(isProductionMode) {
*/ */
require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig); require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig);
// requires bundle.system to be run once
gulp.task('karma', ['tests'], function() { gulp.task('karma', ['tests'], function() {
var karma = require('karma').server; var karma = require('karma').server;
return karma.start({ configFile: __dirname + '/scripts/karma/karma.conf.js' }) return karma.start({ configFile: __dirname + '/scripts/karma/karma.conf.js' })
}); });
gulp.task('karma-watch', function() { gulp.task('karma-watch', ['tests'], function() {
var karma = require('karma').server; var karma = require('karma').server;
return karma.start({ configFile: __dirname + '/scripts/karma/karma-watch.conf.js' }) return karma.start({ configFile: __dirname + '/scripts/karma/karma-watch.conf.js' })
}); });

80
ionic/components/action-sheet/action-sheet.ios.scss
View File

@ -4,85 +4,91 @@
// iOS Action Sheet // iOS Action Sheet
// -------------------------------------------------- // --------------------------------------------------
$action-sheet-ios-group-margin: 10px !default; $action-sheet-ios-text-align: center !default;
$action-sheet-ios-background-color: #f9f9f9 !default; $action-sheet-ios-padding: 0 10px !default;
$action-sheet-ios-group-margin-bottom: 10px !default;
$action-sheet-ios-background: #f9f9f9 !default;
$action-sheet-ios-border-color: #d6d6da !default; $action-sheet-ios-border-color: #d6d6da !default;
$action-sheet-ios-border-radius: 13px !default; $action-sheet-ios-border-radius: 13px !default;
$action-sheet-ios-title-color: #8f8f8f !default; $action-sheet-ios-title-padding: 1.5rem !default;
$action-sheet-ios-title-font-size: 1.3rem !default; $action-sheet-ios-title-color: #8f8f8f !default;
$action-sheet-ios-title-font-size: 1.3rem !default;
$action-sheet-ios-title-font-weight: 400 !default;
$action-sheet-ios-title-border-radius: 0 !default;
$action-sheet-ios-button-height: 5.6rem !default; $action-sheet-ios-button-min-height: 5.6rem !default;
$action-sheet-ios-button-padding: 18px !default; $action-sheet-ios-button-padding: 18px !default;
$action-sheet-ios-button-text-color: #007aff !default; $action-sheet-ios-button-text-color: #007aff !default;
$action-sheet-ios-button-font-size: 2rem !default; $action-sheet-ios-button-font-size: 2rem !default;
$action-sheet-ios-button-border-color: #d1d3d6 !default; $action-sheet-ios-button-border-width: 1px !default;
$action-sheet-ios-button-background-active-color: #ebebeb !default; $action-sheet-ios-button-border-style: solid !default;
$action-sheet-ios-button-border-color: #d1d3d6 !default;
$action-sheet-ios-button-background: transparent !default;
$action-sheet-ios-button-background-activated: #ebebeb !default;
$action-sheet-ios-destructive-button-text-color: #f53d3d !default; $action-sheet-ios-button-destructive-text-color: #f53d3d !default;
$action-sheet-ios-cancel-button-background-color: #fff !default; $action-sheet-ios-button-cancel-background: #fff !default;
$action-sheet-ios-button-cancel-font-weight: 600 !default;
ion-action-sheet { ion-action-sheet {
text-align: center; text-align: $action-sheet-ios-text-align;
} }
.action-sheet-container { .action-sheet-container {
padding: 0 $action-sheet-ios-group-margin; padding: $action-sheet-ios-padding;
} }
.action-sheet-group { .action-sheet-group {
overflow: hidden; overflow: hidden;
margin-bottom: $action-sheet-ios-group-margin - 2; margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
border-radius: $action-sheet-ios-border-radius; border-radius: $action-sheet-ios-border-radius;
background: $action-sheet-ios-background-color; background: $action-sheet-ios-background;
&:last-child { &:last-child {
margin-bottom: $action-sheet-ios-group-margin; margin-bottom: $action-sheet-ios-group-margin-bottom;
} }
} }
.action-sheet-title { .action-sheet-title {
padding: 1.5rem; padding: $action-sheet-ios-title-padding;
font-size: $action-sheet-ios-title-font-size; font-size: $action-sheet-ios-title-font-size;
font-weight: 400;
color: $action-sheet-ios-title-color; color: $action-sheet-ios-title-color;
border-radius: 0; font-weight: $action-sheet-ios-title-font-weight;
text-align: center; border-radius: $action-sheet-ios-title-border-radius;
} text-align: $action-sheet-ios-text-align;
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
.action-sheet-title {
border-bottom: 1px solid $action-sheet-ios-border-color;
} }
.action-sheet-button { .action-sheet-button {
padding: $action-sheet-ios-button-padding; padding: $action-sheet-ios-button-padding;
min-height: $action-sheet-ios-button-height; min-height: $action-sheet-ios-button-min-height;
border-bottom: 1px solid $action-sheet-ios-border-color; border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
font-size: $action-sheet-ios-button-font-size; font-size: $action-sheet-ios-button-font-size;
color: $action-sheet-ios-button-text-color; color: $action-sheet-ios-button-text-color;
background: transparent; background: $action-sheet-ios-button-background;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&.activated { &.activated {
margin-top:-1px; margin-top: -$action-sheet-ios-button-border-width;
background: $action-sheet-ios-button-background-active-color; background: $action-sheet-ios-button-background-activated;
border-bottom-color: $action-sheet-ios-button-background-active-color; border-bottom-color: $action-sheet-ios-button-background-activated;
border-top:1px solid $action-sheet-ios-button-background-active-color; border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
} }
} }
.action-sheet-destructive { .action-sheet-destructive {
color: $action-sheet-ios-destructive-button-text-color; color: $action-sheet-ios-button-destructive-text-color;
} }
.action-sheet-cancel { .action-sheet-cancel {
font-weight: 600; font-weight: $action-sheet-ios-button-cancel-font-weight;
background: $action-sheet-ios-cancel-button-background-color; background: $action-sheet-ios-button-cancel-background;
} }
&.hairlines { &.hairlines {

61
ionic/components/action-sheet/action-sheet.md.scss
View File

@ -4,68 +4,61 @@
// Material Design Action Sheet // Material Design Action Sheet
// -------------------------------------------------- // --------------------------------------------------
$action-sheet-md-background-color: #fafafa !default; $action-sheet-md-text-align: left !default;
$action-sheet-md-background: #fafafa !default;
$action-sheet-md-group-margin-bottom: 8px !default;
$action-sheet-md-title-color: #757575 !default; $action-sheet-md-title-color: #757575 !default;
$action-sheet-md-title-font-size: 1.6rem !default; $action-sheet-md-title-font-size: 1.6rem !default;
$action-sheet-md-title-padding: 19px 16px 17px !default; $action-sheet-md-title-padding: 19px 16px 17px !default;
$action-sheet-md-button-height: 4.8rem !default; $action-sheet-md-button-min-height: 4.8rem !default;
$action-sheet-md-button-text-color: #222 !default; $action-sheet-md-button-text-color: #222 !default;
$action-sheet-md-button-font-size: 1.6rem !default; $action-sheet-md-button-font-size: 1.6rem !default;
$action-sheet-md-button-padding: 0 16px !default; $action-sheet-md-button-padding: 0 16px !default;
$action-sheet-md-button-background-active-color: #f1f1f1 !default; $action-sheet-md-button-background: transparent !default;
$action-sheet-md-button-background-activated: #f1f1f1 !default;
$action-sheet-md-icon-font-size: 2.4rem !default; $action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !default; $action-sheet-md-icon-min-width: 24px !default;
$action-sheet-md-icon-text-align: center !default;
$action-sheet-md-icon-vertical-align: middle !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !default;
.action-sheet-title { .action-sheet-title {
padding: $action-sheet-md-title-padding; padding: $action-sheet-md-title-padding;
font-size: $action-sheet-md-title-font-size; font-size: $action-sheet-md-title-font-size;
color: $action-sheet-md-title-color; color: $action-sheet-md-title-color;
text-align: left; text-align: $action-sheet-md-text-align;
} }
.action-sheet-button { .action-sheet-button {
position: relative;
overflow: hidden;
padding: $action-sheet-md-button-padding; padding: $action-sheet-md-button-padding;
min-height: $action-sheet-md-button-height; min-height: $action-sheet-md-button-min-height;
font-size: $action-sheet-md-button-font-size; font-size: $action-sheet-md-button-font-size;
font-weight: normal;
color: $action-sheet-md-button-text-color; color: $action-sheet-md-button-text-color;
background-color: transparent; background: $action-sheet-md-button-background;
text-align: left; text-align: $action-sheet-md-text-align;
&.activated { &.activated {
background: $action-sheet-md-button-background-active-color; background: $action-sheet-md-button-background-activated;
border-radius: 0;
box-shadow: none;
} }
} }
.action-sheet-icon { .action-sheet-icon {
display: inline-block;
margin: $action-sheet-md-icon-margin; margin: $action-sheet-md-icon-margin;
min-width: 24px; min-width: $action-sheet-md-icon-min-width;
text-align: center; text-align: $action-sheet-md-icon-text-align;
vertical-align: middle; vertical-align: $action-sheet-md-icon-vertical-align;
font-size: $action-sheet-md-icon-font-size; font-size: $action-sheet-md-icon-font-size;
} }
.action-sheet-group { .action-sheet-group {
overflow: hidden; overflow: hidden;
margin: 0; background: $action-sheet-md-background;
border-radius: 0;
background-color: $action-sheet-md-background-color;
&:last-child .action-sheet-button { &:last-child .action-sheet-button {
margin-bottom: 8px; margin-bottom: $action-sheet-md-group-margin-bottom;
} }
} }
.action-sheet-cancel {
background-color: $action-sheet-md-background-color;
border: none;
}

26
ionic/components/action-sheet/action-sheet.scss
View File

@ -4,45 +4,33 @@
// -------------------------------------------------- // --------------------------------------------------
$action-sheet-width: 100% !default; $action-sheet-width: 100% !default;
$action-sheet-max-width: 520px !default; $action-sheet-max-width: 500px !default;
ion-action-sheet { ion-action-sheet {
position: absolute; position: absolute;
width: $action-sheet-width;
height: $action-sheet-width;
z-index: $z-index-overlay;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
height: 100%;
display: block; display: block;
z-index: $z-index-overlay;
} }
.action-sheet-wrapper { .action-sheet-wrapper {
position: absolute; position: absolute;
width: $action-sheet-width;
max-width: $action-sheet-max-width;
z-index: $z-index-overlay-wrapper; z-index: $z-index-overlay-wrapper;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: 100%;
display: block; display: block;
max-width: 500px;
margin: auto; margin: auto;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.action-sheet-container {
width: auto;
overflow: hidden;
}
.action-sheet-button { .action-sheet-button {
display: block; width: $action-sheet-width;
width: 100%;
margin: 0;
border-radius: 0;
&.activated {
box-shadow: none;
}
} }

12
ionic/components/action-sheet/action-sheet.ts
View File

@ -16,7 +16,7 @@ import {ViewController} from '../nav/view-controller';
* An Action Sheet is a dialog that lets the user choose from a set of * An Action Sheet is a dialog that lets the user choose from a set of
* options. It appears on top of the app's content, and must be manually * options. It appears on top of the app's content, and must be manually
* dismissed by the user before they can resume interaction with the app. * dismissed by the user before they can resume interaction with the app.
* Dangerous (destructive) options are made obvious. There are easy * Dangerous (destructive) options are made obvious in `ios` mode. There are easy
* ways to cancel out of the action sheet, such as tapping the backdrop or * ways to cancel out of the action sheet, such as tapping the backdrop or
* hitting the escape key on desktop. * hitting the escape key on desktop.
* *
@ -26,16 +26,16 @@ import {ViewController} from '../nav/view-controller';
* action sheet can also optionally have a `title` and a `subTitle`. * action sheet can also optionally have a `title` and a `subTitle`.
* *
* A button's `role` property can either be `destructive` or `cancel`. Buttons * A button's `role` property can either be `destructive` or `cancel`. Buttons
* without a role property will have a default look for its platform. Buttons * without a role property will have the default look for the platform. Buttons
* with the `cancel` role will always load as the bottom button, no matter where * with the `cancel` role will always load as the bottom button, no matter where
* it shows up in the array. All other buttons will show up in the order they * they are in the array. All other buttons will be displayed in the order they
* have been added to the `buttons` array. Note: We recommend that `destructive` * have been added to the `buttons` array. Note: We recommend that `destructive`
* buttons show be the first button in the array, making it the button on top. * buttons are always the first button in the array, making them the top button.
* Additionally, if the action sheet is dismissed by tapping the backdrop, then * Additionally, if the action sheet is dismissed by tapping the backdrop, then
* it will fire the handler from the button with the cancel role. * it will fire the handler from the button with the cancel role.
* *
* Its shorthand is to add all the action sheet's options from within the * You can pass all of the action sheet's options in the first argument of
* `ActionSheet.create(opts)` first argument. Otherwise the action sheet's * the create method: `ActionSheet.create(opts)`. Otherwise the action sheet's
* instance has methods to add options, like `setTitle()` or `addButton()`. * instance has methods to add options, like `setTitle()` or `addButton()`.
* *
* @usage * @usage

34
ionic/components/action-sheet/test/basic/index.ts
View File

@ -1,4 +1,4 @@
import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ionic-angular'; import {App, Page, ActionSheet, Modal, NavController, ViewController, Platform} from 'ionic-angular';
@Page({ @Page({
@ -7,31 +7,34 @@ import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ioni
class E2EPage { class E2EPage {
result: string = ''; result: string = '';
constructor(private nav: NavController) {} constructor(private nav: NavController, private platform: Platform) {}
presentActionSheet1() { presentActionSheet1() {
this.result = ''; this.result = '';
let actionSheet = ActionSheet.create({ let actionSheet = ActionSheet.create({
title: 'Modify your album', title: 'Albums',
buttons: [ buttons: [
{ {
text: 'Destructive', text: 'Delete',
role: 'destructive', role: 'destructive',
icon: this.platform.is('android') ? 'trash' : null,
handler: () => { handler: () => {
console.log('Destructive clicked'); console.log('Delete clicked');
this.result = 'Destructive'; this.result = 'Deleted';
} }
}, },
{ {
text: 'Archive', text: 'Share',
icon: this.platform.is('android') ? 'share' : null,
handler: () => { handler: () => {
console.log('Archive clicked'); console.log('Share clicked');
this.result = 'Archived'; this.result = 'Shared';
} }
}, },
{ {
text: 'Open Modal', text: 'Play',
icon: this.platform.is('android') ? 'arrow-dropright-circle' : null,
handler: () => { handler: () => {
let modal = Modal.create(ModalPage); let modal = Modal.create(ModalPage);
this.nav.present(modal); this.nav.present(modal);
@ -40,9 +43,18 @@ class E2EPage {
return false; return false;
} }
}, },
{
text: 'Favorite',
icon: this.platform.is('android') ? 'heart' : null,
handler: () => {
console.log('Favorite clicked');
this.result = 'Favorited';
}
},
{ {
text: 'Cancel', text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom role: 'cancel', // will always sort to be on the bottom
icon: this.platform.is('android') ? 'close' : null,
handler: () => { handler: () => {
console.log('Cancel clicked'); console.log('Cancel clicked');
this.result = 'Canceled'; this.result = 'Canceled';
@ -94,7 +106,7 @@ class E2EPage {
@Page({ @Page({
template: ` template: `
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons start>
<button (click)="dismiss()">Close</button> <button (click)="dismiss()">Close</button>
</ion-buttons> </ion-buttons>
<ion-title>Modal</ion-title> <ion-title>Modal</ion-title>

117
ionic/components/alert/alert.ios.scss
View File

@ -5,12 +5,12 @@
// -------------------------------------------------- // --------------------------------------------------
$alert-ios-max-width: 270px !default; $alert-ios-max-width: 270px !default;
$alert-ios-background: rgba(0,0,0,0) !default;
$alert-ios-border-radius: 13px !default; $alert-ios-border-radius: 13px !default;
$alert-ios-background-color: #f8f8f8 !default; $alert-ios-background: #f8f8f8 !default;
$alert-ios-box-shadow: none !default;
$alert-ios-head-padding: 12px 16px 7px !default;
$alert-ios-head-text-align: center !default; $alert-ios-head-text-align: center !default;
$alert-ios-head-padding: 12px 16px 7px !default;
$alert-ios-title-margin-top: 8px !default; $alert-ios-title-margin-top: 8px !default;
$alert-ios-title-font-weight: 600 !default; $alert-ios-title-font-weight: 600 !default;
@ -22,6 +22,9 @@ $alert-ios-message-padding: 0px 16px 21px !default;
$alert-ios-message-text-color: inherit !default; $alert-ios-message-text-color: inherit !default;
$alert-ios-message-text-align: center !default; $alert-ios-message-text-align: center !default;
$alert-ios-message-font-size: 13px !default; $alert-ios-message-font-size: 13px !default;
$alert-ios-message-padding-empty: 0 0 12px 0 !default;
$alert-ios-content-max-height: 240px !default;
$alert-ios-input-padding: 6px !default; $alert-ios-input-padding: 6px !default;
$alert-ios-input-margin-top: 10px !default; $alert-ios-input-margin-top: 10px !default;
@ -29,35 +32,46 @@ $alert-ios-input-background-color: #fff !default;
$alert-ios-input-border: 1px solid #ccc !default; $alert-ios-input-border: 1px solid #ccc !default;
$alert-ios-input-border-radius: 4px !default; $alert-ios-input-border-radius: 4px !default;
$alert-ios-button-group-flex-wrap: wrap !default;
$alert-ios-button-margin: 0 !default;
$alert-ios-button-flex: 1 1 auto !default;
$alert-ios-button-min-height: 44px !default; $alert-ios-button-min-height: 44px !default;
$alert-ios-button-min-width: 50% !default;
$alert-ios-button-font-size: 17px !default; $alert-ios-button-font-size: 17px !default;
$alert-ios-button-text-color: map-get($colors-ios, primary) !default; $alert-ios-button-text-color: map-get($colors-ios, primary) !default;
$alert-ios-button-background-color: transparent !default; $alert-ios-button-background-color: transparent !default;
$alert-ios-button-background-color-activated: #e9e9e9 !default;
$alert-ios-button-border-radius: 0 !default; $alert-ios-button-border-radius: 0 !default;
$alert-ios-button-border-width: 1px !default;
$alert-ios-button-border-style: solid !default;
$alert-ios-button-border-color: #dbdbdf !default; $alert-ios-button-border-color: #dbdbdf !default;
$alert-ios-button-activated-background-color: #e9e9e9 !default;
$alert-checkbox-ios-icon-size: 21px !default; $alert-ios-button-main-font-weight: bold !default;
$alert-checkbox-ios-icon-border-radius: 50% !default;
$alert-checkbox-ios-icon-border-width: 1px !default;
$alert-checkbox-ios-icon-border-style: solid !default;
$alert-checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
$alert-checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
$alert-checkbox-ios-background-color-off: $list-ios-background-color !default;
$alert-checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
$alert-checkbox-ios-icon-checkmark-width: $alert-checkbox-ios-icon-border-width !default;
$alert-checkbox-ios-icon-checkmark-style: $alert-checkbox-ios-icon-border-style !default;
$alert-checkbox-ios-icon-checkmark-color: $background-ios-color !default;
$alert-ios-radio-label-padding: 13px !default;
$alert-ios-radio-icon-min-width: 30px !default;
$alert-ios-checkbox-icon-size: 21px !default;
$alert-ios-checkbox-icon-border-radius: 50% !default;
$alert-ios-checkbox-icon-border-width: 1px !default;
$alert-ios-checkbox-icon-border-style: solid !default;
$alert-ios-checkbox-icon-border-color-off: $list-ios-border-color !default;
$alert-ios-checkbox-icon-border-color-on: map-get($colors-ios, primary) !default;
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
$alert-ios-checkbox-background-color-on: map-get($colors-ios, primary) !default;
$alert-ios-checkbox-icon-checkmark-width: $alert-ios-checkbox-icon-border-width !default;
$alert-ios-checkbox-icon-checkmark-style: $alert-ios-checkbox-icon-border-style !default;
$alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
ion-alert {
background: $alert-ios-background;
}
.alert-wrapper { .alert-wrapper {
border-radius: $alert-ios-border-radius;
background-color: $alert-ios-background-color;
max-width: $alert-ios-max-width; max-width: $alert-ios-max-width;
border-radius: $alert-ios-border-radius;
background-color: $alert-ios-background;
box-shadow: $alert-ios-box-shadow;
overflow: hidden; overflow: hidden;
} }
@ -66,8 +80,8 @@ ion-alert {
// -------------------------------------------------- // --------------------------------------------------
.alert-head { .alert-head {
padding: $alert-ios-head-padding;
text-align: $alert-ios-head-text-align; text-align: $alert-ios-head-text-align;
padding: $alert-ios-head-padding;
} }
.alert-title { .alert-title {
@ -94,10 +108,10 @@ ion-alert {
} }
.alert-message { .alert-message {
max-height: 240px; max-height: $alert-ios-content-max-height;
&:empty { &:empty {
padding: 0 0 12px 0; padding: $alert-ios-message-padding-empty;
} }
} }
@ -120,8 +134,8 @@ ion-alert {
.alert-radio-group, .alert-radio-group,
.alert-checkbox-group { .alert-checkbox-group {
max-height: 240px; max-height: $alert-ios-content-max-height;
border-top: 1px solid $alert-ios-button-border-color; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
overflow: scroll; overflow: scroll;
} }
@ -138,8 +152,7 @@ ion-alert {
.alert-radio-label { .alert-radio-label {
flex: 1; flex: 1;
order: 0; order: 0;
padding: 13px; padding: $alert-ios-radio-label-padding;
text-align: auto;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -148,7 +161,7 @@ ion-alert {
.alert-radio-icon { .alert-radio-icon {
position: relative; position: relative;
order: 1; order: 1;
min-width: 30px; min-width: $alert-ios-radio-icon-min-width;
} }
.alert-radio[aria-checked=true] { .alert-radio[aria-checked=true] {
@ -187,24 +200,24 @@ ion-alert {
.alert-checkbox-icon { .alert-checkbox-icon {
margin: 10px 6px 10px 16px; margin: 10px 6px 10px 16px;
position: relative; position: relative;
width: $alert-checkbox-ios-icon-size; width: $alert-ios-checkbox-icon-size;
height: $alert-checkbox-ios-icon-size; height: $alert-ios-checkbox-icon-size;
border-radius: $alert-checkbox-ios-icon-border-radius; border-radius: $alert-ios-checkbox-icon-border-radius;
border-width: $alert-checkbox-ios-icon-border-width; border-width: $alert-ios-checkbox-icon-border-width;
border-style: $alert-checkbox-ios-icon-border-style; border-style: $alert-ios-checkbox-icon-border-style;
border-color: $alert-checkbox-ios-icon-border-color-off; border-color: $alert-ios-checkbox-icon-border-color-off;
background-color: $alert-checkbox-ios-background-color-off; background-color: $alert-ios-checkbox-background-color-off;
} }
.alert-checkbox[aria-checked=true] .alert-checkbox-icon { .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
background-color: $alert-checkbox-ios-background-color-on; background-color: $alert-ios-checkbox-background-color-on;
border-color: $alert-checkbox-ios-icon-border-color-on; border-color: $alert-ios-checkbox-icon-border-color-on;
.alert-checkbox-inner { .alert-checkbox-inner {
position: absolute; position: absolute;
border-width: $alert-checkbox-ios-icon-checkmark-width; border-width: $alert-ios-checkbox-icon-checkmark-width;
border-style: $alert-checkbox-ios-icon-checkmark-style; border-style: $alert-ios-checkbox-icon-checkmark-style;
border-color: $alert-checkbox-ios-icon-checkmark-color; border-color: $alert-ios-checkbox-icon-checkmark-color;
top: 4px; top: 4px;
left: 7px; left: 7px;
width: 4px; width: 4px;
@ -220,34 +233,30 @@ ion-alert {
// -------------------------------------------------- // --------------------------------------------------
.alert-button-group { .alert-button-group {
flex-wrap: wrap; flex-wrap: $alert-ios-button-group-flex-wrap;
margin-right: -1px; margin-right: -$alert-ios-button-border-width;
} }
.alert-button { .alert-button {
margin: 0; margin: $alert-ios-button-margin;
flex: 1 1 auto; flex: $alert-ios-button-flex;
min-width: 50%; min-width: $alert-ios-button-min-width;
font-size: $alert-ios-button-font-size; font-size: $alert-ios-button-font-size;
height: $alert-ios-button-min-height; height: $alert-ios-button-min-height;
border-radius: $alert-ios-button-border-radius; border-radius: $alert-ios-button-border-radius;
border-top: 1px solid $alert-ios-button-border-color; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
border-right: 1px solid $alert-ios-button-border-color; border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
color: $alert-ios-button-text-color; color: $alert-ios-button-text-color;
background-color: $alert-ios-button-background-color; background-color: $alert-ios-button-background-color;
overflow: hidden;
&:last-child { &:last-child {
font-weight: bold; font-weight: $alert-ios-button-main-font-weight;
border-right: 0; border-right: 0;
} }
&.activated { &.activated {
opacity: 1; background-color: $alert-ios-button-background-color-activated;
background-color: $alert-ios-button-activated-background-color;
}
&:hover:not(.disable-hover) {
opacity: 1;
} }
} }

60
ionic/components/alert/alert.md.scss
View File

@ -18,19 +18,36 @@ $alert-md-sub-title-font-size: 16px !default;
$alert-md-message-font-size: 15px !default; $alert-md-message-font-size: 15px !default;
$alert-md-message-padding: 0 24px 24px 24px !default; $alert-md-message-padding: 0 24px 24px 24px !default;
$alert-md-message-text-color: rgba(0,0,0,.5) !default; $alert-md-message-text-color: rgba(0,0,0,.5) !default;
$alert-md-message-padding-empty: 0 !default;
$alert-md-content-max-height: 240px !default;
$alert-md-input-border-width: 1px !default;
$alert-md-input-border-style: solid !default;
$alert-md-input-border-color: #dedede !default; $alert-md-input-border-color: #dedede !default;
$alert-md-input-text-color: #000000 !default; $alert-md-input-text-color: #000000 !default;
$alert-md-input-highlight-color: map-get($colors-md, primary) !default;
$alert-md-input-margin-top: 5px !default;
$alert-md-input-margin-bottom: 5px !default;
$alert-md-input-border-width-focused: 2px !default;
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
$alert-md-input-border-color-focused: map-get($colors-md, primary) !default;
$alert-md-input-margin-top: 5px !default;
$alert-md-input-margin-right: 0 !default;
$alert-md-input-margin-bottom: 5px !default;
$alert-md-input-margin-left: 0 !default;
$alert-md-button-group-flex-wrap: wrap-reverse !default;
$alert-md-button-group-padding: 8px 8px 8px 24px !default;
$alert-md-button-group-justify-content: flex-end !default;
$alert-md-button-padding: 10px !default;
$alert-md-button-font-weight: 500 !default;
$alert-md-button-text-color: map-get($colors-md, primary) !default; $alert-md-button-text-color: map-get($colors-md, primary) !default;
$alert-md-button-background-color: transparent !default; $alert-md-button-background-color: transparent !default;
$alert-md-button-background-color-activated: rgba(158, 158, 158, 0.2) !default; $alert-md-button-background-color-activated: rgba(158, 158, 158, 0.2) !default;
$alert-md-button-border-radius: 2px !default; $alert-md-button-border-radius: 2px !default;
$alert-md-buttons-padding: 8px 8px 8px 24px !default; $alert-md-button-text-transform: uppercase !default;
$alert-md-buttons-justify-content: flex-end !default; $alert-md-button-text-align: right !default;
.alert-wrapper { .alert-wrapper {
@ -69,10 +86,10 @@ $alert-md-buttons-justify-content: flex-end !default;
.alert-message { .alert-message {
font-size: $alert-md-message-font-size; font-size: $alert-md-message-font-size;
max-height: 240px; max-height: $alert-md-content-max-height;
&:empty { &:empty {
padding: 0; padding: $alert-md-message-padding-empty;
} }
} }
@ -81,12 +98,12 @@ $alert-md-buttons-justify-content: flex-end !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-input { .alert-input {
border-bottom: 1px solid $alert-md-input-border-color; border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
color: $alert-md-input-text-color; color: $alert-md-input-text-color;
margin: $alert-md-input-margin-top 0 $alert-md-input-margin-bottom 0; margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
&:focus { &:focus {
border-bottom: 2px solid $alert-md-input-highlight-color; border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
margin-bottom: $alert-md-input-margin-bottom - 1; margin-bottom: $alert-md-input-margin-bottom - 1;
} }
} }
@ -100,7 +117,7 @@ $alert-md-buttons-justify-content: flex-end !default;
position: relative; position: relative;
border-top: 1px solid $alert-md-input-border-color; border-top: 1px solid $alert-md-input-border-color;
border-bottom: 1px solid $alert-md-input-border-color; border-bottom: 1px solid $alert-md-input-border-color;
max-height: 240px; max-height: $alert-md-content-max-height;
overflow: auto; overflow: auto;
} }
@ -215,24 +232,25 @@ $alert-md-buttons-justify-content: flex-end !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-button-group { .alert-button-group {
padding: $alert-md-buttons-padding; padding: $alert-md-button-group-padding;
justify-content: $alert-md-buttons-justify-content; justify-content: $alert-md-button-group-justify-content;
flex-wrap: wrap-reverse; flex-wrap: $alert-md-button-group-flex-wrap;
} }
.alert-button { .alert-button {
position: relative; padding: $alert-md-button-padding;
overflow: hidden; font-weight: $alert-md-button-font-weight;
padding: 10px;
font-weight: 500;
color: $alert-md-button-text-color; color: $alert-md-button-text-color;
background-color: $alert-md-button-background-color; background-color: $alert-md-button-background-color;
border-radius: $alert-md-button-border-radius; border-radius: $alert-md-button-border-radius;
text-transform: uppercase; text-transform: $alert-md-button-text-transform;
text-align: right; text-align: $alert-md-button-text-align;
// necessary for ripple to work properly
position: relative;
overflow: hidden;
&.activated { &.activated {
background-color: $alert-md-button-background-color-activated; background-color: $alert-md-button-background-color-activated;
opacity: 1;
} }
} }

10
ionic/components/alert/alert.ts
View File

@ -12,8 +12,8 @@ import {ViewController} from '../nav/view-controller';
/** /**
* @name Alert * @name Alert
* @description * @description
* An Alert is a dialog that presents users with either information, or used * An Alert is a dialog that presents users with information or collects
* to receive information from the user using inputs. An alert appears on top * information from the user using inputs. An alert appears on top
* of the app's content, and must be manually dismissed by the user before * of the app's content, and must be manually dismissed by the user before
* they can resume interaction with the app. * they can resume interaction with the app.
* *
@ -31,11 +31,11 @@ import {ViewController} from '../nav/view-controller';
* by tapping the backdrop, then it will fire the handler from the button * by tapping the backdrop, then it will fire the handler from the button
* with a cancel role. * with a cancel role.
* *
* Alerts can also include inputs whos data can be passed back to the app. * Alerts can also include inputs whose data can be passed back to the app.
* Inputs can be used to prompt users for information. * Inputs can be used to prompt users for information.
* *
* Its shorthand is to add all the alert's options from within the * You can pass all of the alert's options in the first argument of
* `Alert.create(opts)` first argument. Otherwise the alert's instance * the create method: `Alert.create(opts)`. Otherwise the alert's instance
* has methods to add options, such as `setTitle()` or `addButton()`. * has methods to add options, such as `setTitle()` or `addButton()`.
* *
* @usage * @usage

76
ionic/components/alert/test/basic/e2e.ts Normal file
View File

@ -0,0 +1,76 @@
it('should open basic alert', function() {
element(by.css('.e2eOpenAlert')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open alert long message', function() {
element(by.css('.e2eOpenAlertLongMessage')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open alert multiple buttons', function() {
element(by.css('.e2eOpenMultipleButtons')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open alert no message', function() {
element(by.css('.e2eOpenAlertNoMessage')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open confirm alert', function() {
element(by.css('.e2eOpenConfirm')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open prompt alert', function() {
element(by.css('.e2eOpenPrompt')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open radio alert', function() {
element(by.css('.e2eOpenRadio')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open checkbox alert', function() {
element(by.css('.e2eOpenCheckbox')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});
it('should open and close fast close alert', function() {
element(by.css('.e2eFastClose')).click();
});
it('should open disabled backdrop alert', function() {
element(by.css('.e2eDisabledBackdrop')).click();
});
it('should close with button click', function() {
element(by.css('.alert-button:last-child')).click();
});

4
ionic/components/app/id.ts
View File

@ -5,9 +5,9 @@ import {IonicApp} from './app';
/** /**
* @name Id * @name Id
* @description * @description
* IdRef is an easy way to identify unique components in an app and access them * The `id` attribute is an easy way to identify unique components in an app and access them
* no matter where in the UI hierarchy you are. For example, this makes toggling * no matter where in the UI hierarchy you are. For example, this makes toggling
* a global side menu feasible from any place in the application. * a global side menu possible from any place in the application.
* *
* See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of * See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of
* the Component docs for an example of how Menus rely on ID's. * the Component docs for an example of how Menus rely on ID's.

10
ionic/components/button/button.ios.scss
View File

@ -55,15 +55,15 @@ $button-ios-small-icon-font-size: 1.3em !default;
@mixin ios-button-default($color-name, $color-value) { @mixin ios-button-default($color-name, $color-value) {
.button-#{$color-name} { .button-#{$color-name} {
$bg-color: $color-value; $background-color: $color-value;
$bg-color-activated: color-shade($bg-color); $background-color-activated: color-shade($background-color);
$fg-color: color-inverse($bg-color); $fg-color: color-inverse($background-color);
color: $fg-color; color: $fg-color;
background-color: $bg-color; background-color: $background-color;
&.activated { &.activated {
background-color: $bg-color-activated; background-color: $background-color-activated;
} }
} }

12
ionic/components/button/button.md.scss
View File

@ -78,20 +78,20 @@ $button-md-small-icon-font-size: 1.4em !default;
@mixin md-button-default($color-name, $color-value) { @mixin md-button-default($color-name, $color-value) {
.button-#{$color-name} { .button-#{$color-name} {
$bg-color: $color-value; $background-color: $color-value;
$bg-color-activated: color-shade($bg-color); $background-color-activated: color-shade($background-color);
$fg-color: color-inverse($bg-color); $fg-color: color-inverse($background-color);
color: $fg-color; color: $fg-color;
background-color: $bg-color; background-color: $background-color;
&:hover:not(.disable-hover) { &:hover:not(.disable-hover) {
background-color: $bg-color; background-color: $background-color;
} }
&.activated { &.activated {
opacity: 1; opacity: 1;
background-color: $bg-color-activated; background-color: $background-color-activated;
} }
ion-button-effect { ion-button-effect {

37
ionic/components/button/button.ts
View File

@ -7,26 +7,29 @@ import {Toolbar} from '../toolbar/toolbar';
/** /**
* @name Button * @name Button
* @module ionic * @module ionic
* @property [outline] - for an unfilled outline button *
* @property [clear] - for a transparent button that only shows text and icons
* @property [round] - for a button with rounded corners
* @property [block] - for a block button that fills it's parent container
* @property [full] - for a full width button
* @property [small] - sets button size to small
* @property [large] - sets button size to large
* @property [disabled] - disables the button
* @property [fab] - for a floating action button
* @property [fab-left] - position a fab button to the left
* @property [fab-right] - position a fab button to the right
* @property [fab-center] - position a fab button towards the center
* @property [fab-top] - position a fab button towards the top
* @property [fab-bottom] - position a fab button towards the bottom
* @property [color] - Dynamically set which color attribute this button should use.
* @description * @description
* Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes. * Buttons are simple components in Ionic. They can consist of text and icons
* and be enhanced by a wide range of attributes.
*
* @property [outline] - A transparent button with a border.
* @property [clear] - A transparent button without a border.
* @property [round] - A button with rounded corners.
* @property [block] - A button that fills its parent container with a border-radius.
* @property [full] - A button that fills its parent container without a border-radius or borders on the left/right.
* @property [small] - A button with size small.
* @property [large] - A button with size large.
* @property [disabled] - A disabled button.
* @property [fab] - A floating action button.
* @property [fab-left] - Position a fab button to the left.
* @property [fab-right] - Position a fab button to the right.
* @property [fab-center] - Position a fab button towards the center.
* @property [fab-top] - Position a fab button towards the top.
* @property [fab-bottom] - Position a fab button towards the bottom.
* @property [color] - Dynamically set which color attribute this button should use.
*
* @demo /docs/v2/demos/button/ * @demo /docs/v2/demos/button/
* @see {@link /docs/v2/components#buttons Button Component Docs} * @see {@link /docs/v2/components#buttons Button Component Docs}
*/ */
@Component({ @Component({
selector: 'button:not([ion-item]),[button]', selector: 'button:not([ion-item]),[button]',

2
ionic/components/button/test/button.spec.ts
View File

@ -1,4 +1,4 @@
import {Button, Config} from 'ionic-angular'; import {Button, Config} from '../../../../ionic';
export function run() { export function run() {

10
ionic/components/checkbox/checkbox.ts
View File

@ -10,9 +10,12 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
/** /**
* The checkbox is no different than the HTML checkbox input, except * @name Checkbox
* it's styled accordingly to the the platform and design mode, such * @module ionic
* as iOS or Material Design. *
* @description
* The Checkbox is a simple component styled based on the mode. It can be
* placed in an `ion-item` or used as a stand-alone checkbox.
* *
* See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html) * See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
* for more info on forms and inputs. * for more info on forms and inputs.
@ -40,6 +43,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
* *
* </ion-list> * </ion-list>
* ``` * ```
*
* @demo /docs/v2/demos/checkbox/ * @demo /docs/v2/demos/checkbox/
* @see {@link /docs/v2/components#checkbox Checkbox Component Docs} * @see {@link /docs/v2/components#checkbox Checkbox Component Docs}
*/ */

2
ionic/components/content/content.ts
View File

@ -98,7 +98,7 @@ export class Content extends Ion {
* ngAfterViewInit() { * ngAfterViewInit() {
* // Here 'my-content' is the ID of my ion-content * // Here 'my-content' is the ID of my ion-content
* this.content = this.app.getComponent('my-content'); * this.content = this.app.getComponent('my-content');
* this.content.addScrollEventListener(this.myScroll); * this.content.addScrollListener(this.myScroll);
* } * }
* myScroll() { * myScroll() {
* console.info('They see me scrolling...'); * console.info('They see me scrolling...');

6
ionic/components/icon/icon.ts
View File

@ -10,12 +10,12 @@ import {Config} from '../../config/config';
* For a full list of available icons, check out the * For a full list of available icons, check out the
* [Ionicons resource docs](../../../../resources/ionicons). * [Ionicons resource docs](../../../../resources/ionicons).
* *
* One feature of Ionicons is that when icon names are set, the actual icon * One feature of Ionicons in Ionic is when icon names are set, the actual icon
* which is rendered can change slightly depending on the mode the app is * which is rendered can change slightly depending on the mode the app is
* running from. For example, by setting the icon name of `alarm`, on iOS the * running from. For example, by setting the icon name of `alarm`, on iOS the
* icon will automatically apply `ios-alarm`, and on Material Design it will * icon will automatically apply `ios-alarm`, and on Material Design it will
* automatically apply `md-alarm`. This allow the developer to write the * automatically apply `md-alarm`. This allows the developer to write the
* markup once, and let Ionic automatically apply the appropriate icon. * markup once while Ionic applies the appropriate icon based on the mode.
* *
* @usage * @usage
* ```html * ```html

2
ionic/components/infinite-scroll/test/infinite-scroll.spec.ts
View File

@ -1,4 +1,4 @@
import {InfiniteScroll, Content, Config} from 'ionic-angular'; import {InfiniteScroll, Content, Config} from '../../../../ionic';
export function run() { export function run() {

2
ionic/components/input/test/text-input.spec.ts
View File

@ -1,4 +1,4 @@
import {TextInput} from 'ionic-angular'; import {TextInput} from '../../../../ionic';
export function run() { export function run() {

17
ionic/components/label/label.ts
View File

@ -4,10 +4,8 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
/** /**
* @name Label * @name Label
* @description * @description
* Labels describe the data that the user should enter in to an input * Labels are placed inside of an `ion-item` element and can be used
* element. You can give `ion-label` attributes to tell it how to * to describe an `ion-input`, `ion-toggle`, `ion-checkbox`, and more.
* handle its display type, which is especially useful for an
* `ion-item` which contains a text input.
* *
* @property [fixed] - a persistant label that sits next the the input * @property [fixed] - a persistant label that sits next the the input
* @property [floating] - a label that will float about the input if the input is empty of looses focus * @property [floating] - a label that will float about the input if the input is empty of looses focus
@ -22,7 +20,7 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
* </ion-item> * </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-labe fixed>Website</ion-label> * <ion-label fixed>Website</ion-label>
* <ion-input type="url"></ion-input> * <ion-input type="url"></ion-input>
* </ion-item> * </ion-item>
* *
@ -36,6 +34,15 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
* <ion-input type="tel"></ion-input> * <ion-input type="tel"></ion-input>
* </ion-item> * </ion-item>
* *
* <ion-item>
* <ion-label>Toggle</ion-label>
* <ion-toggle></ion-toggle>
* </ion-item>
*
* <ion-item>
* <ion-label>Checkbox</ion-label>
* <ion-checkbox></ion-checkbox>
* </ion-item>
* ``` * ```
* *
* @demo /docs/v2/demos/label/ * @demo /docs/v2/demos/label/

2
ionic/components/menu/menu-controller.ts
View File

@ -8,7 +8,7 @@ import {MenuType} from './menu-types';
* _For basic Menu usage, see the [Menu section](../../../../components/#menus) * _For basic Menu usage, see the [Menu section](../../../../components/#menus)
* of the Component docs._ * of the Component docs._
* *
* Menu is a side-menu interface that can be dragged out or toggled to open or closed. * Menu is a side-menu interface that can be dragged and toggled to open or close.
* An Ionic app can have numerous menus, all of which can be controlled within * An Ionic app can have numerous menus, all of which can be controlled within
* template HTML, or programmatically. * template HTML, or programmatically.
* *

2
ionic/components/menu/test/menu.spec.ts
View File

@ -1,4 +1,4 @@
import {MenuController, Menu} from 'ionic-angular'; import {MenuController, Menu} from '../../../../ionic';
export function run() { export function run() {
describe('MenuController', () => { describe('MenuController', () => {

2
ionic/components/nav/test/nav-controller.spec.ts
View File

@ -1,4 +1,4 @@
import {NavController, Tabs, NavOptions, Config, ViewController} from 'ionic-angular'; import {NavController, Tabs, NavOptions, Config, ViewController} from '../../../../ionic';
export function run() { export function run() {
describe('NavController', () => { describe('NavController', () => {

13
ionic/components/navbar/navbar.ts
View File

@ -63,17 +63,14 @@ class ToolbarBackground {
* @name Navbar * @name Navbar
* @description * @description
* Navbar is a global level toolbar that gets updated every time a page gets * Navbar is a global level toolbar that gets updated every time a page gets
* loaded. You can pass the navbar a `ion-title` or any number of buttons. * loaded. You can pass the navbar an `ion-title`, any number of buttons, a segment, or a searchbar.
* *
* @usage * @usage
* ```html * ```html
* <ion-navbar *navbar> * <ion-navbar *navbar>
* * <button menuToggle>
* <ion-buttons start> * <ion-icon name="menu"></ion-icon>
* <button (click)="toggleItems()"> * </button>
* toggle
* </button>
* </ion-buttons>
* *
* <ion-title> * <ion-title>
* Page Title * Page Title
@ -81,7 +78,7 @@ class ToolbarBackground {
* *
* <ion-buttons end> * <ion-buttons end>
* <button (click)="openModal()"> * <button (click)="openModal()">
* Modal * <ion-icon name="options"></ion-icon>
* </button> * </button>
* </ion-buttons> * </ion-buttons>
* </ion-navbar> * </ion-navbar>

2
ionic/components/refresher/test/refresher.spec.ts
View File

@ -1,4 +1,4 @@
import {Refresher, Content, Config, Ion} from 'ionic-angular'; import {Refresher, Content, Config, Ion} from '../../../../ionic';
export function run() { export function run() {

18
ionic/components/segment/segment.ios.scss
View File

@ -4,10 +4,10 @@
// iOS Segment // iOS Segment
// -------------------------------------------------- // --------------------------------------------------
$segment-button-ios-bg-color: transparent !default; $segment-button-ios-background-color: transparent !default;
$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default; $segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
$segment-button-ios-text-color: color-inverse($segment-button-ios-bg-color-activated) !default; $segment-button-ios-text-color: color-inverse($segment-button-ios-background-color-activated) !default;
$segment-button-ios-activated-transition: 100ms all linear !default; $segment-button-ios-activated-transition: 100ms all linear !default;
$segment-button-ios-hover-transition: 100ms all linear !default; $segment-button-ios-hover-transition: 100ms all linear !default;
$segment-button-ios-active-transition: 100ms all linear !default; $segment-button-ios-active-transition: 100ms all linear !default;
@ -37,10 +37,10 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
border-width: $segment-button-ios-border-width; border-width: $segment-button-ios-border-width;
border-style: solid; border-style: solid;
border-color: $segment-button-ios-bg-color-activated; border-color: $segment-button-ios-background-color-activated;
color: $segment-button-ios-bg-color-activated; color: $segment-button-ios-background-color-activated;
background-color: $segment-button-ios-bg-color; background-color: $segment-button-ios-background-color;
flex: 1; flex: 1;
width: 0; width: 0;
@ -53,17 +53,17 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
&.segment-activated { &.segment-activated {
opacity: 1; opacity: 1;
color: $segment-button-ios-text-color; color: $segment-button-ios-text-color;
background-color: $segment-button-ios-bg-color-activated; background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-activated-transition; transition: $segment-button-ios-activated-transition;
} }
&:hover:not(.segment-activated) { &:hover:not(.segment-activated) {
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity); background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-hover-opacity);
transition: $segment-button-ios-hover-transition; transition: $segment-button-ios-hover-transition;
} }
&:active:not(.segment-activated) { &:active:not(.segment-activated) {
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-active-opacity); background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-active-opacity);
transition: $segment-button-ios-active-transition; transition: $segment-button-ios-active-transition;
} }

41
ionic/components/show-hide-when/show-hide-when.ts
View File

@ -65,7 +65,25 @@ export class DisplayWhen {
* Complements the [hideWhen attribute](../HideWhen). * Complements the [hideWhen attribute](../HideWhen).
* @usage * @usage
* ```html * ```html
* <div showWhen="ios">I am only visible on iOS!</div> * <div showWhen="android">
* I am visible on Android!
* </div>
*
* <div showWhen="ios">
* I am visible on iOS!
* </div>
*
* <div showWhen="android,ios">
* I am visible on Android and iOS!
* </div>
*
* <div showWhen="portrait">
* I am visible on Portrait!
* </div>
*
* <div showWhen="landscape">
* I am visible on Landscape!
* </div>
* ``` * ```
* @demo /docs/v2/demos/show-when/ * @demo /docs/v2/demos/show-when/
* @see {@link ../HideWhen HideWhen API Docs} * @see {@link ../HideWhen HideWhen API Docs}
@ -103,8 +121,27 @@ export class ShowWhen extends DisplayWhen {
* Complements the [showWhen attribute](../ShowWhen). * Complements the [showWhen attribute](../ShowWhen).
* @usage * @usage
* ```html * ```html
* <div hideWhen="android">I am hidden on Android!</div> * <div hideWhen="android">
* I am hidden on Android!
* </div>
*
* <div hideWhen="ios">
* I am hidden on iOS!
* </div>
*
* <div hideWhen="android,ios">
* I am hidden on Android and iOS!
* </div>
*
* <div hideWhen="portrait">
* I am hidden on Portrait!
* </div>
*
* <div hideWhen="landscape">
* I am hidden on Landscape!
* </div>
* ``` * ```
*
* @demo /docs/v2/demos/hide-when/ * @demo /docs/v2/demos/hide-when/
* @see {@link ../ShowWhen ShowWhen API Docs} * @see {@link ../ShowWhen ShowWhen API Docs}
*/ */

2
ionic/components/tap-click/test/tapClick.spec.ts
View File

@ -1,4 +1,4 @@
import * as tapClick from 'ionic-angular'; import * as tapClick from '../../../../ionic';
export function run() { export function run() {

9
ionic/config/config.ts
View File

@ -13,7 +13,8 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* @name Config * @name Config
* @demo /docs/v2/demos/config/ * @demo /docs/v2/demos/config/
* @description * @description
* Config lets you change multiple or a single value in an apps mode configuration. Things such as tab placement, icon changes, and view animations can be set here. * The Config lets you configure your entire app or specific platforms.
* You can set the tab placement, icon mode, animations, and more here.
* *
* ```ts * ```ts
* @App({ * @App({
@ -29,7 +30,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* }) * })
* ``` * ```
* *
* Or change the whole mode * To change the mode to always use Material Design (md).
* *
* ```ts * ```ts
* @App({ * @App({
@ -40,7 +41,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* }) * })
* ``` * ```
* *
* Config can be overwritting at multiple levels, allowing deeper configuration. Taking the example from earlier, we can override any setting we want based on a platform. * Config can be overwritten at multiple levels allowing for more configuration. Taking the example from earlier, we can override any setting we want based on a platform.
* ```ts * ```ts
* @App({ * @App({
* template: `<ion-nav [root]="root"></ion-nav>` * template: `<ion-nav [root]="root"></ion-nav>`
@ -63,8 +64,6 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* </ion-tabs> * </ion-tabs>
* ``` * ```
* *
* The property will override anything else set in the apps.
*
* The last way we could configure is through URL query strings. This is useful for testing while in the browser. * The last way we could configure is through URL query strings. This is useful for testing while in the browser.
* Simply add `?ionic<PROPERTYNAME>=<value>` to the url. * Simply add `?ionic<PROPERTYNAME>=<value>` to the url.
* *

2
ionic/config/test/config.spec.ts
View File

@ -1,4 +1,4 @@
import {Config, Platform, ionicProviders} from 'ionic-angular'; import {Config, Platform, ionicProviders} from '../../../ionic';
export function run() { export function run() {

2
ionic/platform/test/platform.spec.ts
View File

@ -1,4 +1,4 @@
import {Platform} from 'ionic-angular'; import {Platform} from '../../../ionic';
export function run() { export function run() {

3
ionic/util/events.ts
View File

@ -1,8 +1,9 @@
/** /**
* @name Events * @name Events
* @description * @description
* Events is a pub/sub style event system for sending and responding to application-level * Events is a publish-subscribe style event system for sending and responding to application-level
* events across your app. * events across your app.
*
* @usage * @usage
* ```ts * ```ts
* // first page (publish an event when a user is created) * // first page (publish an event when a user is created)

2
ionic/util/keyboard.ts
View File

@ -7,7 +7,7 @@ import {hasFocusedTextInput, raf, rafFrames} from './dom';
/** /**
* @name Keyboard * @name Keyboard
* @description * @description
* The `Keyboard` class allows you to work with the keyboard events provide by the Ionic keyboard plugin. * The `Keyboard` class allows you to work with the keyboard events provided by the Ionic keyboard plugin.
* *
* @usage * @usage
* ```ts * ```ts

2
ionic/util/test/util.spec.ts
View File

@ -1,4 +1,4 @@
import * as util from 'ionic-angular/util'; import * as util from '../../../ionic/util';
export function run() { export function run() {
describe('extend', function() { describe('extend', function() {

5
package.json
View File

@ -1,7 +1,7 @@
{ {
"private": "true", "private": "true",
"name": "ionic2", "name": "ionic2",
"version": "2.0.0-beta.1", "version": "2.0.0-beta.2",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
@ -58,6 +58,7 @@
"html-entities": "^1.1.3", "html-entities": "^1.1.3",
"htmlparser2": "^3.8.3", "htmlparser2": "^3.8.3",
"ionic-cz-conventional-changelog": "^1.0.0", "ionic-cz-conventional-changelog": "^1.0.0",
"jasmine-core": "^2.4.1",
"jasmine-node": "^1.14.5", "jasmine-node": "^1.14.5",
"js-yaml": "^3.4.2", "js-yaml": "^3.4.2",
"karma": "^0.12.31", "karma": "^0.12.31",
@ -88,4 +89,4 @@
"path": "node_modules/ionic-cz-conventional-changelog" "path": "node_modules/ionic-cz-conventional-changelog"
} }
} }
} }

4
scripts/README.md
View File

@ -37,10 +37,10 @@ From `ionic` directory:
From your app directory: From your app directory:
1. `npm link ionic-framework` 1. `npm link ionic-angular`
2. `ionic serve` or `ionic run` or `ionic emulate` 2. `ionic serve` or `ionic run` or `ionic emulate`
To remove the linked version of `ionic-framework` do `npm rm ionic-framework`, and then reinstall using `npm install ionic-framework`. To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and then reinstall using `npm install ionic-angular`.
### Running Snapshot ### Running Snapshot

5
scripts/karma/karma.conf.js
View File

@ -1,5 +1,7 @@
var buildConfig = require('../build/config'); var buildConfig = require('../build/config');
module.exports = function(config) { module.exports = function(config) {
config.set({ config.set({
singleRun: true, singleRun: true,
@ -8,7 +10,8 @@ module.exports = function(config) {
frameworks: ['jasmine'], frameworks: ['jasmine'],
files: [ files: [
'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js', 'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js', //npm2
'node_modules/es6-module-loader/dist/es6-module-loader.src.js', //npm3
'node_modules/systemjs/dist/system.js', 'node_modules/systemjs/dist/system.js',
'scripts/karma/system.config.js', 'scripts/karma/system.config.js',
'node_modules/angular2/bundles/angular2-polyfills.min.js', 'node_modules/angular2/bundles/angular2-polyfills.min.js',

3
scripts/karma/system.config.js
View File

@ -1,6 +1,7 @@
System.config({ System.config({
map: { map: {
'angular2': '/base/angular2' 'angular2': '/base/angular2',
'ionic-angular': '/base/ionic'
}, },
packages: { packages: {
'ionic-angular': { 'ionic-angular': {

4
scripts/npm/README.md
View File

@ -11,7 +11,7 @@ In the root of the package are ES5 sources in the CommonJS module format, their
Usually, the only Javascript file required by the user is `ionic.js`, as everything from Ionic can be imported from this file: Usually, the only Javascript file required by the user is `ionic.js`, as everything from Ionic can be imported from this file:
``` ```
import {App, Page} from 'ionic-framework/ionic'; import {App, Page} from 'ionic-angular';
``` ```
### Bundles ### Bundles
@ -20,7 +20,7 @@ Minified and unminified CommonJS and System.register module format bundles, as w
### Installation and More ### Installation and More
To use Ionic 2, we recommend installing and utilizing the Ionic CLI which will help you create pre-configured Ionic apps. To use Ionic 2, we recommend installing and utilizing the Ionic CLI which will help you create pre-configured Ionic apps.
For full instructions on using Ionic 2, please visit the [Ionic 2 Documentation](http://ionicframework.com/docs/v2/) For full instructions on using Ionic 2, please visit the [Ionic 2 Documentation](http://ionicframework.com/docs/v2/)

7
tooling/generators/page/page.tmpl.js
View File

@ -1,5 +1,4 @@
import {Page, NavController} from 'ionic-angular'; import {Page, NavController} from 'ionic-angular';
import {Inject} from 'angular2/core';
/* /*
Generated class for the <%= jsClassName %> page. Generated class for the <%= jsClassName %> page.
@ -11,7 +10,11 @@ import {Inject} from 'angular2/core';
templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html', templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html',
}) })
export class <%= jsClassName %> { export class <%= jsClassName %> {
constructor(@Inject(NavController) nav) { static get parameters() {
return [[NavController]];
}
constructor(nav) {
this.nav = nav; this.nav = nav;
} }
} }

7
tooling/generators/tabs/tabs.tmpl.js
View File

@ -1,5 +1,4 @@
import {NavController, Page} from 'ionic-angular'; import {NavController, Page} from 'ionic-angular';
import {Inject} from 'angular2/core';
<% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>'; <% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>';
<% }); %> <% }); %>
@ -7,7 +6,11 @@ import {Inject} from 'angular2/core';
templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html' templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html'
}) })
export class <%= jsClassName %> { export class <%= jsClassName %> {
constructor(@Inject(NavController) nav) { static get parameters() {
return [[NavController]];
}
constructor(nav) {
// set the root pages for each tab // set the root pages for each tab
<% _.forEach(tabs, function(tab, i) { %>this.tab<%= ++i %>Root = <%= tab.jsClassName %>; <% _.forEach(tabs, function(tab, i) { %>this.tab<%= ++i %>Root = <%= tab.jsClassName %>;
<% }); %> <% }); %>

6
tsconfig.json
View File

@ -7,8 +7,10 @@
"declaration": true, "declaration": true,
"outDir": "dist" "outDir": "dist"
}, },
"files": [ "exclude": [
"ionic/index.ts", "node_modules",
"scripts",
"typings/main",
"typings/main.d.ts" "typings/main.d.ts"
], ],
"compileOnSave" : false, "compileOnSave" : false,