diff --git a/CHANGELOG.md b/CHANGELOG.md index d07d955933..5d2462125e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,107 @@ + +# [2.0.0-beta.6](https://github.com/driftyco/ionic/compare/v2.0.0-beta.5...v2.0.0-beta.6) (2016-04-21) + + +### Bug Fixes + +* **nav:** tabs should not dereg child navs ([f3ddb0b](https://github.com/driftyco/ionic/commit/f3ddb0b)), closes [#6267](https://github.com/driftyco/ionic/issues/6267) +* **sass:** fix sass errors ([219059c](https://github.com/driftyco/ionic/commit/219059c)) +* **toast:** create unique toast id ([e07f0ae](https://github.com/driftyco/ionic/commit/e07f0ae)) +* **toast:** remove default duration, allow close button click when bd disabled ([d6589e1](https://github.com/driftyco/ionic/commit/d6589e1)) +* **toast:** remove unused options ([f9ea2d8](https://github.com/driftyco/ionic/commit/f9ea2d8)) + +### Features + +* **toast:** add toast component ([3fb79cf](https://github.com/driftyco/ionic/commit/3fb79cf)) +* **toast:** display the toast even on page change unless `dismissOnPageChange` is passed ([0264532](https://github.com/driftyco/ionic/commit/0264532)), closes [#5582](https://github.com/driftyco/ionic/issues/5582) + + + + +# [2.0.0-beta.5](https://github.com/driftyco/ionic/compare/v2.0.0-beta.4...v2.0.0-beta.5) (2016-04-20) + + +### Bug Fixes + +* **alert:** remove justify content from buttons in an alert ([9412a7c](https://github.com/driftyco/ionic/commit/9412a7c)) +* **app:** add iOS status bar padding to each mode ([5a1c441](https://github.com/driftyco/ionic/commit/5a1c441)), closes [#5924](https://github.com/driftyco/ionic/issues/5924) +* **button:** add a category to buttons so they won't get the button styles ([35dd0ed](https://github.com/driftyco/ionic/commit/35dd0ed)), closes [#6237](https://github.com/driftyco/ionic/issues/6237) +* **button:** buttons don't get activated when ion-label contains exotic elements ([0521ce2](https://github.com/driftyco/ionic/commit/0521ce2)) +* **button:** remove classes from buttons with categories ([5f8edc2](https://github.com/driftyco/ionic/commit/5f8edc2)) +* **checkbox:** add `type="button"` to button tag ([7583ebf](https://github.com/driftyco/ionic/commit/7583ebf)) +* **content:** fix padding/margin attributes so all work on scroll-content ([9020d52](https://github.com/driftyco/ionic/commit/9020d52)) +* **cordova:** add status bar padding for content for all modes ([f45ddf9](https://github.com/driftyco/ionic/commit/f45ddf9)), closes [#5934](https://github.com/driftyco/ionic/issues/5934) +* **cordova:** only target navbar section when it has the statusbar-padding ([422c983](https://github.com/driftyco/ionic/commit/422c983)) +* **focus:** improve input focus control ([e27452b](https://github.com/driftyco/ionic/commit/e27452b)), closes [#5536](https://github.com/driftyco/ionic/issues/5536) +* **input:** add 'type="button"' to button tag ([f17f517](https://github.com/driftyco/ionic/commit/f17f517)) +* **input:** blur when tapping outside input on iOS ([f9b46c2](https://github.com/driftyco/ionic/commit/f9b46c2)), closes [#5020](https://github.com/driftyco/ionic/issues/5020) +* **input:** move nested function outside of if statment so as to fix issue related to strict ([c8e58e5](https://github.com/driftyco/ionic/commit/c8e58e5)) +* **keyboard:** remove content padding after input blur ([e21c4d5](https://github.com/driftyco/ionic/commit/e21c4d5)), closes [#5800](https://github.com/driftyco/ionic/issues/5800) +* **label:** remove flex-basis to fix floating/stacked labels on iOS/Safari ([cd62a4c](https://github.com/driftyco/ionic/commit/cd62a4c)), closes [#6109](https://github.com/driftyco/ionic/issues/6109) +* **loading:** present loading from root nav controller ([f972908](https://github.com/driftyco/ionic/commit/f972908)), closes [#6121](https://github.com/driftyco/ionic/issues/6121) +* **platform:** fire cordova platform.ready using zone ([ba5624b](https://github.com/driftyco/ionic/commit/ba5624b)), closes [#6186](https://github.com/driftyco/ionic/issues/6186) +* **platform:** run zone after cordova deviceready ([e082bd1](https://github.com/driftyco/ionic/commit/e082bd1)), closes [#6087](https://github.com/driftyco/ionic/issues/6087) +* **sass:** move the `@at-root` font import to the components file ([8f08de1](https://github.com/driftyco/ionic/commit/8f08de1)), closes [#5931](https://github.com/driftyco/ionic/issues/5931) +* **searchbar:** only show clear icon when focused on the searchbar ([ecf9302](https://github.com/driftyco/ionic/commit/ecf9302)), closes [#5922](https://github.com/driftyco/ionic/issues/5922) +* **showHideWhen:** remove hidden attribute on directives and use classes ([5692abe](https://github.com/driftyco/ionic/commit/5692abe)), closes [#5836](https://github.com/driftyco/ionic/issues/5836) +* **slides:** add id to the slide component to grab the correct pagination ([7263728](https://github.com/driftyco/ionic/commit/7263728)), closes [#5745](https://github.com/driftyco/ionic/issues/5745) [#5508](https://github.com/driftyco/ionic/issues/5508) +* **tabs:** do not init w/ tab that is hidden or disabled ([8d8cc4c](https://github.com/driftyco/ionic/commit/8d8cc4c)), closes [#6226](https://github.com/driftyco/ionic/issues/6226) +* **tabs:** remove tabbarIcons and fix windows styling to use tabbarLayout ([81dd1cc](https://github.com/driftyco/ionic/commit/81dd1cc)), closes [#6126](https://github.com/driftyco/ionic/issues/6126) +* **toolbar:** add border-top when toolbar is positioned to the bottom ([29e6242](https://github.com/driftyco/ionic/commit/29e6242)), closes [#5967](https://github.com/driftyco/ionic/issues/5967) +* **virtualScroll:** load async data ([16a283e](https://github.com/driftyco/ionic/commit/16a283e)), closes [#6124](https://github.com/driftyco/ionic/issues/6124) + +### Features + +* **app:** getActiveNav() method ([7777237](https://github.com/driftyco/ionic/commit/7777237)) +* **backbutton:** add hardware back button ([68278b0](https://github.com/driftyco/ionic/commit/68278b0)), closes [#5071](https://github.com/driftyco/ionic/issues/5071) +* **changeDetection:** detach Tabs when not active ([0c4171e](https://github.com/driftyco/ionic/commit/0c4171e)) +* **changeDetection:** detach ViewControllers when not active ([b282e90](https://github.com/driftyco/ionic/commit/b282e90)) +* **config:** create a method to access the global app injector which contains references the ([17a9e6d](https://github.com/driftyco/ionic/commit/17a9e6d)), closes [#5973](https://github.com/driftyco/ionic/issues/5973) +* **content:** add scrollToBottom ([bef4a67](https://github.com/driftyco/ionic/commit/bef4a67)) +* **directives:** auto provide IONIC_DIRECTIVES to all components ([0a83f2f](https://github.com/driftyco/ionic/commit/0a83f2f)), closes [#6092](https://github.com/driftyco/ionic/issues/6092) +* **platform:** add backbutton event ([156fdc3](https://github.com/driftyco/ionic/commit/156fdc3)) +* **platform:** default desktop to use material design ([51032d2](https://github.com/driftyco/ionic/commit/51032d2)), closes [#6003](https://github.com/driftyco/ionic/issues/6003) +* **select:** fallback to alert interface when more than 6 opts ([1c67b02](https://github.com/driftyco/ionic/commit/1c67b02)) +* **select:** using action-sheet as ion-select interface ([81096f1](https://github.com/driftyco/ionic/commit/81096f1)) +* **slides:** add ability to slide to specific index ([a6091bd](https://github.com/driftyco/ionic/commit/a6091bd)) +* **slides:** add method to get previous index ([a54361c](https://github.com/driftyco/ionic/commit/a54361c)) +* **statusbarPadding:** add statusbar-padding css to content ([98c2aab](https://github.com/driftyco/ionic/commit/98c2aab)) +* **statusbarPadding:** add statusbar-padding css to toolbars ([44403d1](https://github.com/driftyco/ionic/commit/44403d1)) +* **tabs:** enabled and show inputs ([1b085e3](https://github.com/driftyco/ionic/commit/1b085e3)), closes [#5768](https://github.com/driftyco/ionic/issues/5768) +* **toggle:** add animation for windows mode toggle ([f841bef](https://github.com/driftyco/ionic/commit/f841bef)), closes [#5981](https://github.com/driftyco/ionic/issues/5981) + +### Performance Improvements + +* **img:** do not reuse img elements ([b744275](https://github.com/driftyco/ionic/commit/b744275)), closes [#6112](https://github.com/driftyco/ionic/issues/6112) + + +### BREAKING CHANGES + +* **tabs:** `tabbarIcons` is officially removed, please use `tabbarLayout` instead. View the [Tabs API docs](http://ionicframework.com/docs/v2/api/components/tabs/Tabs/) for more information. +* **slides:** The Slides component has been refactored. Many methods and events were + renamed. + + The following events have been renamed: + + - `slideChangeStart` has been renamed `willChange` + - `change` has been renamed `didChange` + + The following methods have been renamed: + + - `next()` has been renamed to `slideNext()` + - `prev()` has been renamed to `slidePrev()` + - `getIndex()` has been renamed to `getActiveIndex()` + - `getNumSlides()` has been renamed to `length()` + - `isAtEnd()` has been renamed to `isEnd()` + - `isAtBeginning()` has been renamed to `isBeginning()` + - `getSliderWidget()` has been renamed to `getSlider()` + + All methods have been documented in the API docs: + http://ionicframework.com/docs/v2/api/components/slides/Slides/ + +* **platform:** `platform.versions()` no longer accepts an optional parameter for platform name +and now returns only an object containing all of the platforms and their versions. + # [2.0.0-beta.4](https://github.com/driftyco/ionic/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2016-04-07) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1b5e0ba37b..323fecfe18 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,118 +1,115 @@ -### Creating an Issue +# Contributing -If you have a question on how something works, or its expected functionality, you might want to visit the [Ionic Forum](http://forum.ionicframework.com/) first. - -If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?state=open). You can search through existing issues to see if someone's reported one similar to yours. - -Next [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem, how to reproduce the issue, and provide any additional information such as code examples and error logs. - -### Issue Etiquette Guidelines - -Poor attitude, ranting, name-calling, bullying, being a jerk, complaining, or spamming are fruitless and unacceptable. Issues that violate the open source spirit of this community, or any of the guidelines listed here, may result in your Issue being deleted or reposted to our Forum, a better place for debate and discussion. If you wish to contribute, either make your response respectful or do not bother to respond. You’ll find it’s pretty ineffective. - -Simply put: be respectful and act like an adult. Critiques are better made on the Forum. If you can’t do that, this isn’t a community for you. - -See our [Code of Conduct](./CODE_OF_CONDUCT.md) for more info. +Thanks for your interest in contributing to the Ionic Framework! :tada: -### Pull Request Guidelines +## Contributing Etiquette -Please use [Commitizen](https://github.com/commitizen/cz-cli#installing-the-command-line-tool) to commit to this repository. This ensures your commits will match our git conventions. It can be installed by running the following command (add sudo if on OSX/Linux): - -``` -npm install -g commitizen -``` - -Then, when you want to commit, instead of writing `git commit` you will write: - -``` -git cz -``` - -This will prompt you with some questions. - -When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, do not bundle more than one "feature" or bug fix per PR. Doing so makes it very hard to accept it if one of the fixes has issues. - -It's always best to create two smaller PRs than one big one. - -### Style - -Always use two spaces, no tabs. This goes for any HTML, CSS, or Javascript. - -#### Sass Guidelines - -##### Sass Linter - -Run [Sass Linter](https://github.com/brigade/scss-lint) to ensure the css/sass matches our conventions (requires Ruby) - -1. Install the linter: `gem install scss_lint` -2. Make sure to run the linter at the root of the repository where the `.scss-lint.yml` file is located -3. For all component Sass files: `scss-lint ionic/**/**/*.scss` -4. For a specific Sass file: `scss-lint ionic/components/toolbar/toolbar.ios.scss` +Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for information on our rules of conduct. -##### Variable Naming Conventions +## Creating an Issue -The Sass variable should start with the component name: +If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) group. -``` -$alert -$action-sheet -$badge -$toolbar -``` +If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution. -Then it should use the mode abbreviation (ios, md, wp): +Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue. -``` -$alert-md -$action-sheet-ios -$badge-md -$toolbar-wp -``` -Next should be the css property it is affecting, for example: +## Creating a Pull Request -``` -$alert-md-max-width -$action-sheet-ios-background -$badge-md-border-radius -$toolbar-wp-padding -``` +We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. -If it is affecting a component inside of the top level component, that should come next instead of the css property: +Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label! -``` -$alert-md-title -$alert-md-sub-title -$alert-md-message -$action-sheet-ios-title -$action-sheet-ios-button -``` +### Setup -Followed by the css property of that component: +1. Fork the repo. +2. Clone your fork. +3. Make a branch for your change. +4. Run `npm install` (make sure you have [node](https://nodejs.org/en/) and [npm](http://blog.npmjs.org/post/85484771375/how-to-install-npm) installed first) -``` -$alert-md-title-font-size -$alert-md-sub-title-font-size -$alert-md-message-padding -$action-sheet-ios-title-color -$action-sheet-ios-button-background -``` -If the variable only applies to a specific state, that should come last (hover, focused, activated, etc): +### Modifying Components -``` -$action-sheet-ios-button-background-activated -$alert-md-input-border-width-focused -``` +1. Make any changes to the component. +2. Modify the e2e test in the `test/` directory under the component directory, if possible. If the test does not exist and it is possible to show the change, please create a new test in a directory called `basic/`. -**Should I use `background` or `bg`?** -`background` +#### TypeScript Changes -**Should I use `background` or `background-color`?** -`background` so users can override backgrounds in Sass variables using images and etc +1. If there is a `*.spec.ts` file located in the `test/` folder, update it to include a karma test for your change, if needed. If this file doesn't exist, please notify us. +2. Run `gulp karma` to make sure all tests are working, regardless if a test was added. +3. Run `gulp tslint` and fix any linter errors. -### License +#### Sass Changes + +1. If the css property is something that the user may want to override and it won't break the component layout, it should be given a Sass variable. See our [doc on naming Sass variables](https://docs.google.com/document/d/1OyOyrRE5lpB_9mdkF0HWVQLV97fHma450N8XqE4mjZQ/edit?usp=sharing). +2. After any changes to the Sass files run the [Sass Linter](https://github.com/brigade/scss-lint), and fix any linter errors: + - Requires [Ruby](https://www.ruby-lang.org/en/documentation/installation/). **Skip this step entirely if you are unable to install Ruby.** + - Install the linter: `gem install scss_lint` + - Make sure to run the linter at the root of the repository. + - To check all component Sass files: `scss-lint ionic/**/**/*.scss` + - To check a specific Sass file: `scss-lint ionic/components/toolbar/toolbar.ios.scss` + + +#### Viewing Changes + +1. Run the gulp watch task for e2e tests: `gulp watch.e2e` +2. Launch your browser and navigate to `http://localhost:8000/dist/e2e` +3. From here, navigate to the component you are changing. +4. Any changes to the e2e tests in the `test/` directory will show here. +5. If your changes look good, you're ready to [commit](#committing)! + + +#### Adding Documentation + +1. To add or modify API Documentation for a component, it should be added/changed in the component's TypeScript (`*.ts`) file, prior to the Class definition. For example, `Badge` looks similar to this: + + ``` + /** + * @name Badge + * @module ionic + * @description + * Badges are simple components in Ionic containing numbers or text. + * + * @see {@link /docs/v2/components/#badges Badges Component Docs} + * @demo /docs/v2/demos/badge/ + **/ + ``` + + where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder. +2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build +3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update. +4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues + + +#### Adding Demos + +1. Create or modify the demo in the `demos/` folder. +2. If it is new, link to the demo in the component's TypeScript (`*.ts`) file (under `ionic/components`) by adding a link to it in the documentation using `@demo`, for example: + + ``` + /** + * @name Badge + * + * ... + * + * @demo /docs/v2/demos/badge/ + **/ + ``` +3. Run `gulp watch.demos` to watch for changes to the demo +4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it. +5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues + +### Committing + +1. Install [Commitizen](https://github.com/commitizen/cz-cli#installing-the-command-line-tool) (add sudo if on OSX/Linux): `npm install -g commitizen` +2. Use commitizen to commit instead of `git commit`: `git cz` +3. This will prompt you with questions and commit when you are finished. +4. Submit the Pull Request! + + +## License By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license. diff --git a/demos/blur/bg.jpg b/demos/blur/bg.jpg deleted file mode 100644 index c3298fcb99..0000000000 Binary files a/demos/blur/bg.jpg and /dev/null differ diff --git a/demos/blur/index.ts b/demos/blur/index.ts deleted file mode 100644 index 64f6d23af8..0000000000 --- a/demos/blur/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {App} from 'ionic-angular'; - -@App({ - templateUrl: 'main.html' -}) -class ApiDemoApp {} diff --git a/demos/blur/main.html b/demos/blur/main.html deleted file mode 100644 index d54b9c1a36..0000000000 --- a/demos/blur/main.html +++ /dev/null @@ -1,34 +0,0 @@ - - - Blur - - - -
- - - Card - - - This card will blur the content behind it. - - -
- - - diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html index 276139286a..bcc127dc9d 100644 --- a/demos/hide-when/main.html +++ b/demos/hide-when/main.html @@ -6,12 +6,28 @@
Hide Icon Per Platform

In this example we're using the hideWhen directive to decide whether to hide an icon based on the platform.

- - - + + + - + <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon> + + + + + + + + <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon> + + + + + + + + <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon> @@ -20,7 +36,10 @@ .hide-when-demo ion-col { background: #f8f8f8; border: 1px solid #ddd; - margin: 5px; + margin: 1%; + max-width: 48%; + flex: 0 0 48%; + min-height: 120px; } .hide-when-demo code { @@ -28,6 +47,6 @@ } .hide-when-demo ion-icon { - font-size: 200px; + font-size: 100px; } diff --git a/demos/platform/index.ts b/demos/platform/index.ts index 9d386daa91..f44bff5517 100644 --- a/demos/platform/index.ts +++ b/demos/platform/index.ts @@ -7,12 +7,10 @@ class ApiDemoApp { isIos: boolean; isAndroid: boolean; isWindows: boolean; - userAgent: string; constructor(platform: Platform) { this.isIos = platform.is('ios'); this.isAndroid = platform.is('android'); this.isWindows = platform.is('windows'); - this.userAgent = platform.userAgent(); } } diff --git a/demos/platform/main.html b/demos/platform/main.html index 252c4cfbfd..ee64912631 100644 --- a/demos/platform/main.html +++ b/demos/platform/main.html @@ -9,14 +9,6 @@ Name Value - - - 
platform.is('android')
- - - 
{{isAndroid}}
- - 
platform.is('ios')
@@ -27,18 +19,18 @@ - 
platform.is('windows')
+ 
platform.is('android')
 - 
{{isWindows}}
+ 
{{isAndroid}}
 - 
platform.userAgent()
+ 
platform.is('windows')
 - 
{{userAgent}}
+ 
{{isWindows}}
 diff --git a/demos/show-when/main.html b/demos/show-when/main.html index 34de682560..0407f2d803 100644 --- a/demos/show-when/main.html +++ b/demos/show-when/main.html @@ -6,12 +6,28 @@
Show Icon Per Platform

In this example we're using the showWhen directive to decide whether to show an icon based on the platform.

- + + + + + <ion-icon name="logo-apple" showWhen="ios"></ion-icon> + + + + - + <ion-icon name="logo-android" showWhen="android"></ion-icon> + + + + + + + + <ion-icon name="logo-windows" showWhen="windows"></ion-icon> @@ -20,7 +36,10 @@ .show-when-demo ion-col { background: #f8f8f8; border: 1px solid #ddd; - margin: 5px; + margin: 1%; + max-width: 48%; + flex: 0 0 48%; + min-height: 120px; } .show-when-demo code { @@ -28,6 +47,6 @@ } .show-when-demo ion-icon { - font-size: 200px; + font-size: 100px; } diff --git a/demos/toast/index.ts b/demos/toast/index.ts new file mode 100644 index 0000000000..d49af6a0cb --- /dev/null +++ b/demos/toast/index.ts @@ -0,0 +1,59 @@ +import {App, Page, Toast, NavController} from 'ionic-angular'; + +@Page({ + templateUrl: 'main.html' +}) +class ApiPage { + constructor(private nav: NavController) { } + + showToast() { + const toast = Toast.create({ + message: 'User was created successfully', + }); + + toast.onDismiss(this.dismissHandler); + this.nav.present(toast); + } + + showLongToast() { + const toast = Toast.create({ + message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', + }); + + toast.onDismiss(this.dismissHandler); + this.nav.present(toast); + } + + showDismissDurationToast() { + const toast = Toast.create({ + message: 'I am dismissed after 1.5 seconds', + duration: 1500 + }); + toast.onDismiss(this.dismissHandler); + this.nav.present(toast); + } + + showToastWithCloseButton() { + const toast = Toast.create({ + message: 'Your internet connection appears to be offline. Data integrity is not guaranteed.', + showCloseButton: true, + closeButtonText: 'Ok' + }); + toast.onDismiss(this.dismissHandler); + this.nav.present(toast); + } + + private dismissHandler(toast: Toast) { + console.info('Toast onDismiss()'); + } + +} + + +@App({ + template: '' +}) +class ApiDemoApp { + root = ApiPage; + constructor() { } +} diff --git a/demos/toast/main.html b/demos/toast/main.html new file mode 100644 index 0000000000..42341c5178 --- /dev/null +++ b/demos/toast/main.html @@ -0,0 +1,11 @@ + + Toast + + + + + + + + + diff --git a/ionic/components.core.scss b/ionic/components.core.scss index 7252f4a8ad..5c03c0d153 100644 --- a/ionic/components.core.scss +++ b/ionic/components.core.scss @@ -29,8 +29,5 @@ "components/virtual-scroll/virtual-scroll"; -// Ionicons (to be replaced with SVGs) -$ionicons: true !default; -@if ($ionicons) { - @import "fonts/ionicons"; -} +// Ionicons +@import "fonts/ionicons"; diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss index aa02af24f1..b37c65aff0 100644 --- a/ionic/components.ios.scss +++ b/ionic/components.ios.scss @@ -27,6 +27,7 @@ "components/select/select.ios", "components/tabs/tabs.ios", "components/toggle/toggle.ios", + "components/toast/toast.ios", "components/toolbar/toolbar.ios"; diff --git a/ionic/components.md.scss b/ionic/components.md.scss index 91911f4c62..4515f65aa1 100644 --- a/ionic/components.md.scss +++ b/ionic/components.md.scss @@ -27,6 +27,7 @@ "components/select/select.md", "components/tabs/tabs.md", "components/toggle/toggle.md", + "components/toast/toast.md", "components/toolbar/toolbar.md"; diff --git a/ionic/components.ts b/ionic/components.ts index 86455e54bb..49dc914bf8 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -4,7 +4,6 @@ export * from './components/app/id' export * from './components/action-sheet/action-sheet' export * from './components/alert/alert' export * from './components/badge/badge' -export * from './components/blur/blur' export * from './components/button/button' export * from './components/checkbox/checkbox' export * from './components/content/content' @@ -47,5 +46,6 @@ export * from './components/tabs/tabs' export * from './components/tabs/tab' export * from './components/tap-click/tap-click' export * from './components/toggle/toggle' +export * from './components/toast/toast' export * from './components/toolbar/toolbar' export * from './components/virtual-scroll/virtual-scroll' diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss index 5cdf5f81d1..e1e423801f 100644 --- a/ionic/components.wp.scss +++ b/ionic/components.wp.scss @@ -27,6 +27,7 @@ "components/select/select.wp", "components/tabs/tabs.wp", "components/toggle/toggle.wp", + "components/toast/toast.wp", "components/toolbar/toolbar.wp"; diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss index 4eba06bbd3..14c5a70e74 100644 --- a/ionic/components/action-sheet/action-sheet.ios.scss +++ b/ionic/components/action-sheet/action-sheet.ios.scss @@ -91,7 +91,7 @@ ion-action-sheet { .action-sheet-selected { font-weight: bold; - background: white; + background: #fff; } .action-sheet-destructive { diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss index fb00fc0dd5..908dcdfdce 100644 --- a/ionic/components/action-sheet/action-sheet.md.scss +++ b/ionic/components/action-sheet/action-sheet.md.scss @@ -70,6 +70,10 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; &:last-child .action-sheet-button { margin-bottom: $action-sheet-md-group-margin-bottom; } + + .button-inner { + justify-content: flex-start; + } } .action-sheet-selected { diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 6479980f95..e6578d9bc9 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -75,6 +75,62 @@ import {ViewController} from '../nav/view-controller'; * } * ``` * + * + * ### Dismissing And Async Navigation + * + * After an action sheet has been dismissed, the app may need to also transition + * to another page depending on the handler's logic. However, because multiple + * transitions were fired at roughly the same time, it's difficult for the + * nav controller to cleanly animate multiple transitions that may + * have been kicked off asynchronously. This is further described in the + * [`Nav Transition Promises`](../../nav/NavController) section. For action sheets, + * this means it's best to wait for the action sheet to finish its transition + * out before starting a new transition on the same nav controller. + * + * In the example below, after the button has been clicked, its handler + * waits on async operation to complete, *then* it uses `pop` to navigate + * back a page in the same stack. The potential problem is that the async operation + * may have been completed before the action sheet has even finished its transition + * out. In this case, it's best to ensure the action sheet has finished its transition + * out first, *then* start the next transition. + * + * ```ts + * let actionSheet = ActionSheet.create({ + * title: 'Hello', + * buttons: [{ + * text: 'Ok', + * handler: () => { + * // user has clicked the action sheet button + * // begin the action sheet's dimiss transition + * let navTransition = actionSheet.dismiss(); + * + * // start some async method + * someAsyncOperation().then(() => { + * // once the async operation has completed + * // then run the next nav transition after the + * // first transition has finished animating out + * + * navTransition.then(() => { + * this.nav.pop(); + * }); + * }); + * return false; + * } + * }] + * }); + * + * this.nav.present(actionSheet); + * ``` + * + * It's important to note that the handler returns `false`. A feature of + * button handlers is that they automatically dismiss the action sheet when their button + * was clicked, however, we'll need more control regarding the transition. Because + * the handler returns `false`, then the action sheet does not automatically dismiss + * itself. Instead, you now have complete control of when the action sheet has finished + * transitioning, and the ability to wait for the action sheet to finish transitioning + * out before starting a new transition. + * + * * @demo /docs/v2/demos/action-sheet/ * @see {@link /docs/v2/components#action-sheets ActionSheet Component Docs} */ @@ -166,14 +222,14 @@ export class ActionSheet extends ViewController { '
' + '
{{d.title}}
' + '
{{d.subTitle}}
' + - '' + '
' + '
' + - '