diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b83d833be..b9ac72d5b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,36 @@ + +# 2.0.0-beta.0 + +Enjoy! + +<3 The Ionic Team + + + + +# [2.0.0-alpha.57](https://github.com/driftyco/ionic/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2016-02-10) + + +### Bug Fixes + +* **button:** bar-button uses inner span as flexbox ([38a3be4](https://github.com/driftyco/ionic/commit/38a3be4)) + +### Features + +* Improved transitions and animations +* hairlines width can be configured with a sass variable ([06b3a5b](https://github.com/driftyco/ionic/commit/06b3a5b)) +* **ion-item-sliding:** style icons on top of text in an option button ([4e57fcf](https://github.com/driftyco/ionic/commit/4e57fcf)), closes [#5352](https://github.com/driftyco/ionic/issues/5352) + +### Refactor + +* **animations:** no longer using Web Animations polyfill ([da18868](https://github.com/driftyco/ionic/commit/da18868)) + +### Breaking Changes + +The Web Animations polyfill is no longer shipped with the framework and may cause build errors. + +Projects will need to be [updated accordingly](https://github.com/driftyco/ionic-conference-app/commit/2ed59e6fd275c4616792c7b2e5aa9da4a20fb188). + # [2.0.0-alpha.56](https://github.com/driftyco/ionic/compare/v2.0.0-alpha.55...v2.0.0-alpha.56) (2016-02-05) diff --git a/README.md b/README.md index eb30dde795..3bc3426ac3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) -# Ionic 2: Alpha +# Ionic 2: Beta Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies. diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss index e4bb68342e..2c1fe9381c 100644 --- a/ionic/components/button/button.ios.scss +++ b/ionic/components/button/button.ios.scss @@ -97,7 +97,6 @@ $button-ios-small-icon-font-size: 1.3em !default; margin-right: 0; } - // iOS Full Button // -------------------------------------------------- @@ -105,11 +104,10 @@ $button-ios-small-icon-font-size: 1.3em !default; margin-right: 0; margin-left: 0; border-radius: 0; - border-left: none; - border-right: none; + border-right-width: 0; + border-left-width: 0; } - // iOS Outline Button // -------------------------------------------------- diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss index 5b34f4e215..18cc26ed72 100644 --- a/ionic/components/button/button.md.scss +++ b/ionic/components/button/button.md.scss @@ -58,7 +58,7 @@ $button-md-small-icon-font-size: 1.4em !default; color $button-md-transition-duration $button-md-animation-curve; &:hover:not(.disable-hover) { - background-color: $button-md-clear-hover-background-color; + background-color: $button-md-color; } &.activated { @@ -85,6 +85,10 @@ $button-md-small-icon-font-size: 1.4em !default; color: $fg-color; background-color: $bg-color; + &:hover:not(.disable-hover) { + background-color: $bg-color; + } + &.activated { opacity: 1; background-color: $bg-color-activated; @@ -117,28 +121,25 @@ $button-md-small-icon-font-size: 1.4em !default; font-size: $button-md-small-icon-font-size; } +// Material Design Block Button +// -------------------------------------------------- + +.button-block { + margin-left: 0; + margin-right: 0; +} // Material Design Full Button // -------------------------------------------------- .button-full { - border-radius: 0; margin-right: 0; margin-left: 0; + border-radius: 0; border-right-width: 0; border-left-width: 0; } - -// Material Design Block Button -// -------------------------------------------------- - -.button-block { - margin-right: 0; - margin-left: 0; -} - - // Material Design Outline Button // -------------------------------------------------- @@ -150,6 +151,10 @@ $button-md-small-icon-font-size: 1.4em !default; color: $button-md-color; box-shadow: none; + &:hover:not(.disable-hover) { + background-color: $button-md-clear-hover-background-color; + } + &.activated { opacity: 1; box-shadow: none; @@ -173,6 +178,10 @@ $button-md-small-icon-font-size: 1.4em !default; background-color: transparent; color: $fg-color; + &:hover:not(.disable-hover) { + background-color: $button-md-clear-hover-background-color; + } + &.activated { background-color: transparent; } @@ -201,7 +210,7 @@ $button-md-small-icon-font-size: 1.4em !default; } &:hover:not(.disable-hover) { - color: $button-md-color; + background-color: $button-md-clear-hover-background-color; } ion-button-effect { diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 8184beac68..ac4eeaf672 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -30,16 +30,16 @@ $button-round-border-radius: 64px !default; } .button-inner { - width: 100%; - height: 100%; - display: flex; - flex-shrink: 0; - flex-flow: row nowrap; - align-items: center; - justify-content: center; + display: flex; + flex-shrink: 0; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; } -a.button { +a.button, a[button] { text-decoration: none; } @@ -54,7 +54,7 @@ a.button { // -------------------------------------------------- .button-block { - display: flex; + display: block; clear: both; width: 100%; @@ -68,6 +68,7 @@ a.button { // -------------------------------------------------- .button-full { + display: block; width: 100%; } diff --git a/ionic/components/card/test/map/main.html b/ionic/components/card/test/map/main.html index 96572af045..51b6fcb4a5 100644 --- a/ionic/components/card/test/map/main.html +++ b/ionic/components/card/test/map/main.html @@ -9,17 +9,17 @@ - +

Museum of Football

11 N. Way St, Madison, WI 53703

 - +

Institute of Fine Cocktails

14 S. Hop Avenue, Madison, WI 53703

 @@ -28,7 +28,7 @@ 18 min (2.6 mi) @@ -39,17 +39,17 @@ - +

Yoshi's Island

Iggy Koopa

 - +

Forest of Illusion

Roy Koopa

 @@ -58,7 +58,7 @@ 3 hr (4.8 mi) @@ -69,17 +69,17 @@ - +

Museum of Information

44 Rue de Info, 75010 Paris, France

 - +

General Pharmacy

1 Avenue Faux, 75010 Paris, France

 @@ -88,7 +88,7 @@ 26 min (8.1 mi) diff --git a/ionic/components/card/test/social/main.html b/ionic/components/card/test/social/main.html index 5486f8df90..7175493542 100644 --- a/ionic/components/card/test/social/main.html +++ b/ionic/components/card/test/social/main.html @@ -23,11 +23,11 @@ @@ -56,11 +56,11 @@ @@ -88,11 +88,11 @@ diff --git a/ionic/components/label/test/basic/index.ts b/ionic/components/label/test/basic/index.ts deleted file mode 100644 index ac2d757460..0000000000 --- a/ionic/components/label/test/basic/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {App} from 'ionic/ionic'; - - -@App({ - templateUrl: 'main.html' -}) -class E2EApp { - constructor() { - } -} diff --git a/ionic/components/label/test/basic/main.html b/ionic/components/label/test/basic/main.html deleted file mode 100644 index b57fb20282..0000000000 --- a/ionic/components/label/test/basic/main.html +++ /dev/null @@ -1,13 +0,0 @@ - - - Icons - - - - - - Username - - - - diff --git a/ionic/components/list/test/infinite/index.ts b/ionic/components/list/test/infinite/index.ts index 9164945f91..ffb2f827d0 100644 --- a/ionic/components/list/test/infinite/index.ts +++ b/ionic/components/list/test/infinite/index.ts @@ -1,42 +1,9 @@ -import {ProtoViewRef, ViewContainerRef} from 'angular2/core' -import {Directive, Host, forwardRef} from 'angular2/core'; - -import {App, List} from 'ionic/ionic'; - +import {App} from 'ionic/ionic'; @App({ - templateUrl: 'main.html', - directives: [forwardRef(() => ItemCellTemplate)] + templateUrl: 'main.html' }) class E2EApp { - constructor() { - - this.items = [] - for(let i = 0; i < 1000; i++) { - this.items.push({ - title: 'Item ' + i - }) - } - } -} - - -/* - Used to find and register headers in a view, and this directive's - content will be moved up to the common navbar location, and created - using the same context as the view's content area. -*/ -@Directive({ - selector: 'template[cell]' -}) -export class ItemCellTemplate { - constructor(@Host() list: List, viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) { - console.log('Item cell template', list, viewContainer, protoViewRef); - - this.protoViewRef = protoViewRef; - this.viewContainer = viewContainer; - - list.setItemTemplate(this); - } + // TODO } diff --git a/ionic/components/list/test/infinite/main.html b/ionic/components/list/test/infinite/main.html index d6f233e191..0b680180a1 100644 --- a/ionic/components/list/test/infinite/main.html +++ b/ionic/components/list/test/infinite/main.html @@ -1,10 +1,7 @@ - +Infinite List - - - {{item.title}} - - - + + +TODO diff --git a/ionic/components/menu/test/disable-swipe/index.ts b/ionic/components/menu/test/disable-swipe/index.ts index c255978493..cd306e0502 100644 --- a/ionic/components/menu/test/disable-swipe/index.ts +++ b/ionic/components/menu/test/disable-swipe/index.ts @@ -14,13 +14,13 @@ class Page1 { toggleLeftMenuSwipeable() { this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled; - this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'leftMenu'); + this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'left'); } toggleRightMenuSwipeable() { this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled; - this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'rightMenu'); + this.menu.swipeEnable(this.rightMenuSwipeEnabled, 'right'); } } diff --git a/ionic/components/menu/test/disable-swipe/main.html b/ionic/components/menu/test/disable-swipe/main.html index b687ca825e..71b314b01c 100644 --- a/ionic/components/menu/test/disable-swipe/main.html +++ b/ionic/components/menu/test/disable-swipe/main.html @@ -7,11 +7,9 @@ - - @@ -27,11 +25,9 @@ - - diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index c4144aa706..6fb0c07fb2 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -1,5 +1,5 @@ import {App, Page, Config, Platform} from 'ionic/ionic'; -import {Modal, ActionSheet, NavController, NavParams, Animation, ViewController} from 'ionic/ionic'; +import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOptions, ViewController} from 'ionic/ionic'; @Page({ @@ -284,10 +284,11 @@ class E2EApp { } -class FadeIn extends Animation { - constructor(enteringView, leavingView) { - super(enteringView.pageRef()); +class FadeIn extends Transition { + constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { + super(opts); this + .element(enteringView.pageRef()) .easing('ease') .duration(1000) .fromTo('translateY', '0%', '0%') @@ -295,16 +296,17 @@ class FadeIn extends Animation { .before.addClass('show-page'); } } -Animation.register('my-fade-in', FadeIn); +Transition.register('my-fade-in', FadeIn); -class FadeOut extends Animation { - constructor(enteringView, leavingView) { - super(leavingView.pageRef()); +class FadeOut extends Transition { + constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { + super(opts); this + .element(leavingView.pageRef()) .easing('ease') .duration(500) .fadeOut() .before.addClass('show-page'); } } -Animation.register('my-fade-out', FadeOut); +Transition.register('my-fade-out', FadeOut); diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index d2e96c6e9b..bf39b8c762 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -416,6 +416,8 @@ export class NavController extends Ion { return; } + enteringView.setNav(rootNav); + opts.keyboardClose = false; opts.direction = 'forward'; diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index c45476d72a..f75bb8a2bb 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/ionic/components/nav/test/basic/index.ts @@ -20,7 +20,7 @@ class MyCmpTest{} - + @@ -74,7 +74,7 @@ class FirstPage { setPages() { let items = [ - {page: PrimaryHeaderPage} + { page: PrimaryHeaderPage } ]; this.nav.setPages(items); @@ -89,7 +89,7 @@ class FirstPage { } pushFullPage() { - this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } ); + this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] }); } pushAnother() { @@ -139,8 +139,8 @@ class FullPage { setPages() { let items = [ - {page: FirstPage}, - {page: PrimaryHeaderPage} + { page: FirstPage }, + { page: PrimaryHeaderPage } ]; this.nav.setPages(items); @@ -190,6 +190,9 @@ class FullPage { template: ` Primary Color Page Header + + +

@@ -218,7 +221,7 @@ class PrimaryHeaderPage { } pushFullPage() { - this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } ); + this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] }); } insert() { diff --git a/ionic/components/nav/test/insert-views/index.ts b/ionic/components/nav/test/insert-views/index.ts index eabc724299..f27dc027e9 100644 --- a/ionic/components/nav/test/insert-views/index.ts +++ b/ionic/components/nav/test/insert-views/index.ts @@ -9,14 +9,14 @@ import {App, Page, NavController} from 'ionic/ionic'; - `, }) class FirstPage { constructor(nav: NavController) { this.nav = nav; } - pushPage(){ + pushPage() { this.nav.push(SecondPage) } } @@ -30,7 +30,7 @@ class FirstPage {

Second page

- ` }) @@ -38,7 +38,7 @@ class SecondPage { constructor(nav: NavController) { this.nav = nav; } - insertPage(){ + insertPage() { this.nav.insert(1, InsertPage) } } @@ -55,7 +55,7 @@ class SecondPage { ` }) class InsertPage { - constructor() {} + constructor() { } } diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts index eddd5e575d..ea43804530 100644 --- a/ionic/components/navbar/navbar.ts +++ b/ionic/components/navbar/navbar.ts @@ -94,9 +94,11 @@ class ToolbarBackground { template: '
' + '' + diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts index cb020b52ff..a2181da18e 100644 --- a/ionic/components/slides/test/basic/index.ts +++ b/ionic/components/slides/test/basic/index.ts @@ -22,14 +22,13 @@ class MyApp { this.http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&nojsoncallback=1&format=json&tags=' + tags) - .map(res => res.json()) .subscribe(data => { - this.images = data.photos.photo.slice(0, 20); + this.images = data.json().photos.photo.slice(0, 20); setTimeout(() => { this.slider.update(); }); }, (err) => { - alert('Unable to load images'); + console.info('Unable to load images'); console.error(err); }) } diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts index bd293e6257..9131f30381 100644 --- a/ionic/components/tabs/test/basic/index.ts +++ b/ionic/components/tabs/test/basic/index.ts @@ -23,9 +23,10 @@ Tracks - - Toggle {{i}} - + + Toggle {{i}} + + diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html index 66a5faf63e..be6f13db2c 100644 --- a/ionic/components/toolbar/test/scenarios/main.html +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -1,4 +1,3 @@ - This is the title that never ends. It just goes on and on my friend. @@ -62,9 +61,9 @@ - + - + Icon/Color Attr + + + + + + + Edit + + + Text Only + + - + + + Right side menu toggle - + Something - + Else @@ -178,13 +190,13 @@ - + Light - + Toolbar - + Default Segment @@ -195,4 +207,4 @@ .toolbar { border-bottom: 1px solid black; } - + \ No newline at end of file diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss index 9f14aa5fc3..6532b06070 100644 --- a/ionic/components/toolbar/toolbar-button.scss +++ b/ionic/components/toolbar/toolbar-button.scss @@ -5,11 +5,7 @@ .bar-button { position: relative; - display: inline-flex; - flex-shrink: 0; - flex-flow: row nowrap; - align-items: center; - justify-content: center; + display: inline-block; margin: 0; padding: 0; @@ -19,6 +15,7 @@ text-align: center; text-transform: none; + line-height: 1; vertical-align: top; // the better option for most scenarios vertical-align: -webkit-baseline-middle; // the best for those that support it @@ -54,7 +51,7 @@ .back-button { display: none; &.show-back-button { - display: flex; + display: inline-block; } } diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss index 50c96fa9ce..8c142ed261 100644 --- a/ionic/components/toolbar/toolbar.ios.scss +++ b/ionic/components/toolbar/toolbar.ios.scss @@ -17,7 +17,7 @@ $toolbar-order-ios: ( ); $toolbar-ios-padding: 4px !default; -$toolbar-ios-height: 4.4rem !default; +$toolbar-ios-height: 44px !default; $toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default; $navbar-ios-height: $toolbar-ios-height !default; @@ -62,7 +62,6 @@ ion-navbar-section { .toolbar-title { font-size: $toolbar-ios-title-font-size; font-weight: 600; - margin-top: 1px; text-align: center; pointer-events: auto; color: $toolbar-ios-text-color; @@ -123,10 +122,8 @@ ion-buttons[right] { // -------------------------------------------------- .bar-button { - margin-top: 0; - margin-bottom: 0; padding: 0 5px; - min-height: 32px; + height: 32px; border: 0; font-size: $toolbar-ios-button-font-size; border-radius: $bar-button-ios-border-radius; @@ -225,7 +222,6 @@ ion-buttons[right] { // -------------------------------------------------- .bar-button-icon-left ion-icon { - margin-left: -0.1em; padding-right: 0.3em; font-size: 1.4em; line-height: 0.67; @@ -257,7 +253,6 @@ ion-buttons[right] { .back-button { margin: 0; - margin-top: 2px; min-height: 3.2rem; line-height: 1; order: map-get($toolbar-order-ios, back-button); @@ -268,8 +263,9 @@ ion-buttons[right] { .back-button-icon { display: inherit; margin: 0; + margin-top: -1px; min-width: 18px; - font-size: 3.3rem; + font-size: 3.4rem; } .back-button-text { diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss index db48f26cfa..a5cc3a2f0a 100644 --- a/ionic/components/toolbar/toolbar.md.scss +++ b/ionic/components/toolbar/toolbar.md.scss @@ -133,7 +133,7 @@ ion-buttons[right] { margin-left: 0.2rem; margin-right: 0.2rem; padding: 0 5px; - min-height: 32px; + height: 32px; border: 0; font-size: $toolbar-md-button-font-size; border-radius: $bar-button-md-border-radius; @@ -233,7 +233,6 @@ ion-buttons[right] { // -------------------------------------------------- .bar-button-icon-left ion-icon { - margin-left: -0.1em; padding-right: 0.3em; font-size: 1.4em; line-height: 0.67; diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 09a711e29b..6de072e823 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -9,7 +9,7 @@ import {Button} from '../button/button'; /** * @private */ -export class ToolbarBase extends Ion { +export class ToolbarBase extends Ion { itemRefs = []; titleRef = null; titleCmp: any; @@ -155,9 +155,9 @@ export class ToolbarTitle extends Ion { toolbar && toolbar.setTitleCmp(this); navbar && navbar.setTitleCmp(this); } -/** - * @private - */ + /** + * @private + */ getTitleText() { return this.getNativeElement().textContent; } diff --git a/ionic/ionic.ts b/ionic/ionic.ts index 821c0aba60..cbb0b9dcfe 100644 --- a/ionic/ionic.ts +++ b/ionic/ionic.ts @@ -16,6 +16,7 @@ export * from './util/events' export * from './util/keyboard' export * from './animations/animation' +export * from './transitions/transition' export * from './translation/translate' export * from './translation/translate_pipe' diff --git a/ionic/platform/cordova.ios.scss b/ionic/platform/cordova.ios.scss index 25b7e84b1a..71587b9a8b 100644 --- a/ionic/platform/cordova.ios.scss +++ b/ionic/platform/cordova.ios.scss @@ -3,7 +3,7 @@ // iOS Cordova // -------------------------------------------------- -$cordova-ios-toolbar-padding: 2rem !default; +$cordova-ios-toolbar-padding: 20px !default; &.platform-cordova.platform-ios { @@ -30,7 +30,7 @@ $cordova-ios-toolbar-padding: 2rem !default; ion-page.modal > ion-toolbar:first-child ion-segment, { min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding; height: $toolbar-ios-height + $cordova-ios-toolbar-padding; - padding-top: $cordova-ios-toolbar-padding; + padding-top: $toolbar-ios-padding + $cordova-ios-toolbar-padding; } } diff --git a/ionic/platform/storage/sql.ts b/ionic/platform/storage/sql.ts index 69b58a9027..c01bda6706 100644 --- a/ionic/platform/storage/sql.ts +++ b/ionic/platform/storage/sql.ts @@ -186,7 +186,6 @@ export class SqlStorage extends StorageEngine { /** * Remove the value in the database for the given key. * @param {string} key the key - * @param {string} value The value (as a string) * @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)} */ remove(key: string): Promise { diff --git a/package.json b/package.json index d785bcaa9f..323357707c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": "true", "name": "ionic2", - "version": "2.0.0-alpha.56", + "version": "2.0.0-beta.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -88,4 +88,4 @@ "path": "node_modules/ionic-cz-conventional-changelog" } } -} \ No newline at end of file +} diff --git a/scripts/docs/templates/api_index.template.html b/scripts/docs/templates/api_index.template.html index 3884ecbbe1..97ab962a48 100644 --- a/scripts/docs/templates/api_index.template.html +++ b/scripts/docs/templates/api_index.template.html @@ -11,7 +11,7 @@ header_sub_title: Extend Ionic even further with the power of AngularJS searchable: false --- -# Ionic 2 Components +# Ionic 2 API Docs