Merge branch '2.0' of github.com:driftyco/ionic into 2.0

CHANGELOG.md

@@ -1,3 +1,33 @@
+<a name="2.0.0-alpha.51"></a>
+# 2.0.0-alpha.51 (2016-1-21)
+
+### Breaking Changes
+
+##### Angular was updated to Beta 1
+
+* Update the version of Angular in your `package.json` file:
+
+  ```
+  "angular2": "2.0.0-beta.1",
+  ```
+
+##### Ionicons were moved
+
+* Install ionicons (this will be added in the starters): `npm install --save ionicons`
+* Modify the sass `include` in your `ionic.config.js` file:
+
+  ```
+    sass: {
+      src: ['app/theme/app.+(ios|md).scss'],
+      dest: 'www/build/css',
+      include: [
+        'node_modules/ionic-framework',
+        'node_modules/ionicons/dist/scss'
+      ]
+    },
+  ```
+
+
 <a name="2.0.0-alpha.48"></a>
 # 2.0.0-alpha.48 (2016-1-7)
 

gulpfile.js

@@ -396,7 +396,16 @@ gulp.task('copy.scss', function() {
 
 gulp.task('copy.libs', function() {
   var merge = require('merge2');
-  var webAnimations = gulp.src('scripts/resources/web-animations-js/web-animations.min.js')
+  var webAnimations = gulp.src([
+      'scripts/resources/web-animations-js/web-animations.min.js',
+      'node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js',
+      'node_modules/systemjs/dist/system.src.js',
+      'node_modules/angular2/bundles/angular2-polyfills.js',
+      'node_modules/angular2/bundles/angular2.dev.js',
+      'node_modules/angular2/bundles/router.dev.js',
+      'node_modules/angular2/bundles/http.dev.js',
+      'node_modules/rxjs/bundles/Rx.js'
+    ])
     .pipe(gulp.dest('dist/js'));
 
   var libs = gulp.src([
@@ -447,40 +456,39 @@ gulp.task('package', ['src.release'], function(done){
     ])
     .pipe(gulp.dest(distDir));
 
-  var inquirer = require('inquirer');
+  var templateVars = {};
-  inquirer.prompt([
+  var packageJSON = require('./package.json');
-    {
+  templateVars.ionicVersion = packageJSON.version;
-      type: 'input',
+  templateVars.angularVersion = packageJSON.dependencies.angular2;
-      name: 'ionicVersion',
+	var packageTemplate = _.template(fs.readFileSync('scripts/npm/package.json'));
-      message: '\n\nWhat ionic-framework alpha version number will this be?'
+  fs.writeFileSync(distDir + '/package.json', packageTemplate(templateVars));
-    },
+  done();
-    {
-      type: 'input',
-      name: 'angularVersion',
-      message: '\nWhat angular2 beta version number is a peer dependency?'
-    }
-  ], function(answers) {
-  	var packageTemplate = _.template(fs.readFileSync('scripts/npm/package.json'));
-    fs.writeFileSync(distDir + '/package.json', packageTemplate(answers));
-
-    done();
-  });
 });
 
 gulp.task('publish', ['package'], function(done){
-
   var spawn = require('child_process').spawn;
-  var npmCmd = spawn('npm', ['publish', './dist']);
+  var semver = require('semver');
+  var fs = require('fs');
+  var err = false;
+
+  var npmCmd = spawn('npm', ['pack', './dist']);
 
   npmCmd.stdout.on('data', function (data) {
     console.log(data.toString());
   });
 
   npmCmd.stderr.on('data', function (data) {
+    err = true;
     console.log('npm err: ' + data.toString());
   });
 
   npmCmd.on('close', function() {
+    // update package.json
+    if (!err) {
+      var packageJSON = require('./package.json');
+      packageJSON.version = semver.inc(packageJSON.version, 'prerelease', 'alpha');
+      fs.writeFileSync('package.json', JSON.stringify(packageJSON, null, 2));
+    }
     done();
   });
 

ionic/components/button/button-fab.scss

@@ -19,9 +19,6 @@ $button-fab-size:           56px !default;
 
   overflow: hidden;
 
-  transition: .2s linear;
-  transition-property: background-color;
-
   font-size: 14px;
 
   ion-icon {

ionic/components/button/button.ios.scss

@@ -157,7 +157,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
 
 .button-clear {
   border-color: transparent;
-  color: color-shade($button-ios-color);
+  color: $button-ios-color;
   background-color: transparent;
 
   &.activated {
@@ -167,7 +167,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
 
   &:hover:not(.disable-hover) {
     opacity: 0.6;
-    color: color-shade($button-ios-color);
+    color: $button-ios-color;
   }
 }
 
@@ -178,7 +178,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
 @mixin ios-button-clear($color-name, $color-value) {
 
   .button-clear-#{$color-name} {
-    $fg-color: color-shade($color-value);
+    $fg-color: $color-value;
     border-color: transparent;
     background-color: transparent;
     color: $fg-color;
@@ -188,7 +188,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
     }
 
     &:hover:not(.disable-hover) {
-      color: color-shade($fg-color);
+      color: $fg-color;
     }
   }
 

ionic/components/button/button.md.scss

@@ -18,6 +18,8 @@ $button-md-transition-duration:            300ms !default;
 $button-md-clear-hover-background-color:   rgba(158, 158, 158, 0.1) !default;
 $button-md-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
 
+$button-md-outline-ripple-opacity:         0.25 !default;
+
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
@@ -143,13 +145,12 @@ $button-md-small-icon-font-size:           1.4em !default;
 
   &.activated {
     opacity: 1;
-    color: $background-md-color;
-    background-color: $button-md-color;
     box-shadow: none;
+    background-color: transparent;
   }
 
   md-ripple {
-    background-color: ripple-background-color($button-md-color);
+    background-color: rgba($button-md-color, $button-md-outline-ripple-opacity);
   }
 }
 
@@ -166,8 +167,11 @@ $button-md-small-icon-font-size:           1.4em !default;
     color: $fg-color;
 
     &.activated {
-      color: $background-md-color;
+      background-color: transparent;
-      background-color: $fg-color;
+    }
+
+    md-ripple {
+      background-color: rgba($fg-color, $button-md-outline-ripple-opacity);
     }
   }
 
@@ -182,7 +186,7 @@ $button-md-small-icon-font-size:           1.4em !default;
   opacity: 1;
   box-shadow: none;
   background-color: transparent;
-  color: color-shade($button-md-color);
+  color: $button-md-color;
 
   &.activated {
     background-color: $button-md-clear-active-background-color;
@@ -190,7 +194,8 @@ $button-md-small-icon-font-size:           1.4em !default;
   }
 
   &:hover:not(.disable-hover) {
-    color: color-shade($button-md-color);
+
+    color: $button-md-color;
   }
 }
 
@@ -201,7 +206,7 @@ $button-md-small-icon-font-size:           1.4em !default;
 @mixin md-button-clear($color-name, $color-value) {
 
   .button-clear-#{$color-name} {
-    $fg-color: color-shade($color-value);
+    $fg-color: $color-value;
     border-color: transparent;
     background-color: transparent;
     color: $fg-color;
@@ -213,7 +218,7 @@ $button-md-small-icon-font-size:           1.4em !default;
     }
 
     &:hover:not(.disable-hover) {
-      color: color-shade($fg-color);
+      color: $fg-color;
     }
   }
 }
@@ -235,6 +240,10 @@ $button-md-small-icon-font-size:           1.4em !default;
   border-radius: 50%;
   box-shadow: $button-md-fab-box-shadow;
 
+  transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
+              background-color $button-md-transition-duration $button-md-animation-curve,
+              color $button-md-transition-duration $button-md-animation-curve;
+
   &.activated {
     box-shadow: $button-md-fab-box-shadow-active;
   }

ionic/components/button/button.scss

@@ -15,6 +15,7 @@ $button-round-border-radius:      64px !default;
   align-items: center;
   justify-content: center;
   transition: background-color, opacity 100ms linear;
+  z-index: 0;
 
   white-space: nowrap;
   text-overflow: ellipsis;

ionic/components/ion.ts

@@ -14,7 +14,7 @@ export class Ion {
   private _id: string;
 
   constructor(protected elementRef: ElementRef) {
-    this._id = 'i-' + ids++;
+    this._id = 'i' + ids++;
   }
 
   getElementRef() {

ionic/components/menu/test/basic/index.ts

@@ -5,13 +5,12 @@ import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
   templateUrl: 'page1.html'
 })
 class Page1 {
-  constructor(nav: NavController) {
+  constructor(private nav: NavController) {}
-    this.nav = nav;
+
-  }
   presentAlert() {
     let alert = Alert.create({
       title: "New Friend!",
-      body: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+      message: "Your friend, Obi wan Kenobi, just accepted your friend request!",
       cssClass: 'my-alert',
       buttons: ['Ok']
     });
@@ -26,9 +25,8 @@ class Page3 {}
 
 @Page({templateUrl: 'page2.html'})
 class Page2 {
-  constructor(nav: NavController) {
+  constructor(private nav: NavController) {}
-    this.nav = nav;
+
-  }
   page3() {
     this.nav.push(Page3);
   }
@@ -40,8 +38,7 @@ class Page2 {
 })
 class E2EApp {
 
-  constructor(app: IonicApp) {
+  constructor(private app: IonicApp) {
-    this.app = app;
     this.rootView = Page1;
     this.changeDetectionCount = 0;
 

ionic/components/nav/nav-controller.ts

@@ -254,6 +254,11 @@ export class NavController extends Ion {
     let views = pages.map(p => new ViewController(p.page, p.params));
     let enteringView = this._insert(0, views);
 
+    // if animation wasn't set to true then default it to NOT animate
+    if (opts.animate !== true) {
+      opts.animate = false;
+    }
+
     // set the nav direction to "back" if it wasn't set
     opts.direction = opts.direction || 'back';
 
@@ -458,7 +463,7 @@ export class NavController extends Ion {
    * in and become the active page.
    *
    * @param {number} insertIndex  The index where you want to insert the page
-   * @param {Array<{page: Type, params?: any}>} insertPages  An array of objects, each with a `page` and optionally `params` property
+   * @param {Array<{page: Type, params=: any}>} insertPages  An array of objects, each with a `page` and optionally `params` property
    * @param {object} [opts={}] Any options you want to use pass to transtion
    * @returns {Promise} Returns a promise when the pages have been inserted into the navigation stack
    */
@@ -1187,7 +1192,7 @@ export class NavController extends Ion {
 
         // remove the page from its container
         let index = viewContainer.indexOf(hostViewRef);
-        if (index !== -1) {
+        if (!hostViewRef.destroyed && index !== -1) {
           viewContainer.remove(index);
         }
       });
@@ -1205,11 +1210,11 @@ export class NavController extends Ion {
 
       let navbarTemplateRef = view.getNavbarTemplateRef();
       if (navbarContainerRef && navbarTemplateRef) {
-        let navbarView = navbarContainerRef.createEmbeddedView(navbarTemplateRef);
+        let navbarViewRef = navbarContainerRef.createEmbeddedView(navbarTemplateRef);
 
         view.addDestroy(() => {
-          let index = navbarContainerRef.indexOf(navbarView);
+          let index = navbarContainerRef.indexOf(navbarViewRef);
-          if (index > -1) {
+          if (!navbarViewRef.destroyed && index > -1) {
             navbarContainerRef.remove(index);
           }
         });

ionic/components/tabs/tab-button.ts

@@ -1,6 +1,7 @@
 import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, HostListener, EventEmitter, Output, Input, Renderer} from 'angular2/core';
 
 import {Tab} from './tab';
+import {Ion} from '../ion';
 import {Config} from '../../config/config';
 
 
@@ -20,7 +21,7 @@ import {Config} from '../../config/config';
     '[class.disable-hover]': 'disHover'
   }
 })
-export class TabButton {
+export class TabButton extends Ion {
   private disHover: boolean;
   private hasTitle: boolean;
   private hasIcon: boolean;
@@ -30,7 +31,8 @@ export class TabButton {
   @Input() tab: Tab;
   @Output() select: EventEmitter<Tab> = new EventEmitter();
 
-  constructor(config: Config) {
+  constructor(config: Config, elementRef: ElementRef) {
+    super(elementRef);
     this.disHover = (config.get('hoverCSS') === false);
   }
 

ionic/components/tabs/tabs.ios.scss

@@ -41,7 +41,6 @@ ion-tabs[tabbarPlacement=top] tabbar {
 }
 
 .tab-button-text {
-  margin-bottom: 0;
   min-height: $tabbar-ios-item-font-size + 1;
   font-size: $tabbar-ios-item-font-size;
 }

ionic/components/toolbar/toolbar.ios.scss

@@ -61,7 +61,8 @@ ion-navbar-section {
 
 .toolbar-title {
   font-size: $toolbar-ios-title-font-size;
-  font-weight: 500;
+  font-weight: 600;
+  margin-top: 1px;
   text-align: center;
   pointer-events: auto;
   color: $toolbar-ios-text-color;
@@ -134,12 +135,12 @@ ion-buttons[right] {
 @mixin ios-bar-button-default($color-name, $color-value) {
 
   .bar-button-#{$color-name} {
-    $fg-color: color-shade($color-value);
+    $fg-color: $color-value;
     color: $fg-color;
     background-color: transparent;
 
     &:hover:not(.disable-hover) {
-      color: color-shade($fg-color);
+      color: $fg-color;
     }
 
     &.activated {
@@ -256,6 +257,7 @@ 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);
@@ -267,7 +269,11 @@ ion-buttons[right] {
   display: inherit;
   margin: 0;
   min-width: 18px;
-  font-size: 3.2rem;
+  font-size: 3.3rem;
+}
+
+.back-button-text {
+  letter-spacing: -0.01em;
 }
 
 
@@ -284,6 +290,12 @@ ion-buttons[right] {
     padding: 0 6px;
     font-size: 2.8rem;
   }
+
+  // TODO remove the !important flag - temporary hack until we can remove the element style
+  // on transition
+  &.activated {
+    opacity: 0.4 !important;
+  }
 }
 
 .bar-button-menutoggle[end],

ionic/components/toolbar/toolbar.md.scss

@@ -136,16 +136,12 @@ ion-buttons[right] {
 @mixin md-bar-button-default($color-name, $color-value) {
 
   .bar-button-#{$color-name} {
-    $fg-color: color-shade($color-value);
+    $fg-color: $color-value;
     color: $fg-color;
     background-color: transparent;
 
     &:hover:not(.disable-hover) {
-      color: color-shade($fg-color);
+      color: $fg-color;
-    }
-
-    &.activated {
-      opacity: 0.4;
     }
   }
 

ionic/platform/storage/local-storage.ts

@@ -30,7 +30,7 @@ import {StorageEngine} from './storage';
  * @see {@link /docs/v2/platform/storage/ Storage Platform Docs}
  */
 export class LocalStorage extends StorageEngine {
-  constructor() {
+  constructor(options={}) {
     super();
   }
 

ionic/platform/storage/storage.ts

@@ -56,7 +56,6 @@ export interface IStorageEngine {
 */
 export class StorageEngine {
   constructor(options={}) {
-    throw Error("constructor(options={}) not implemented for this storage engine");
   }
   get(key, value) {
     throw Error("get() not implemented for this storage engine");

ionic/themes/default.scss

@@ -4,7 +4,7 @@
 
 $colors: (
 
-  primary:    #387ef5,
+  primary:    #327eff,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,

package.json

@@ -1,7 +1,7 @@
 {
   "private": "true",
   "name": "ionic2",
-  "version": "2.0.0-alpha.48",
+  "version": "2.0.0-alpha.52",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -54,7 +54,7 @@
     "gulp-watch": "^4.2.4",
     "html-entities": "^1.1.3",
     "htmlparser2": "^3.8.3",
-    "ionic-cz-conventional-changelog": "^0.2.0",
+    "ionic-cz-conventional-changelog": "^1.0.0",
     "jasmine-node": "^1.14.5",
     "js-yaml": "^3.4.2",
     "karma": "^0.12.31",

scripts/README.md

@@ -32,3 +32,10 @@
 ### Running Tests
 
 1. `gulp karma`
+
+
+# Releasing
+
+1. Pull latest code
+2. `gulp publish`
+3. Sit back and have a beer :beer: (or wine :wine_glass:)

scripts/e2e/e2e.template.html

@@ -5,18 +5,19 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-  <link ios-href="/dist/bundles/ionic.ios.css" rel="stylesheet">
+  <!-- using relative paths in order for snapshot e2e tests to also work -->
-  <link md-href="/dist/bundles/ionic.md.css" rel="stylesheet">
+  <link ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
+  <link md-href="../../../bundles/ionic.md.css" rel="stylesheet">
 
-  <script src="/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js"></script>
+  <script src="../../../js/es6-module-loader.src.js"></script>
-  <script src="/node_modules/systemjs/dist/system.src.js"></script>
+  <script src="../../../js/system.src.js"></script>
-  <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
+  <script src="../../../js/angular2-polyfills.js"></script>
-  <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../../../js/angular2.dev.js"></script>
-  <script src="/node_modules/angular2/bundles/router.dev.js"></script>
+  <script src="../../../js/router.dev.js"></script>
-  <script src="/node_modules/angular2/bundles/http.dev.js"></script>
+  <script src="../../../js/http.dev.js"></script>
-  <script src="/scripts/resources/web-animations-js/web-animations.min.js"></script>
+  <script src="../../../js/web-animations.min.js"></script>
-  <script src="/dist/bundles/ionic.system.js"></script>
+  <script src="../../../bundles/ionic.system.js"></script>
-  <script src="/node_modules/rxjs/bundles/Rx.js"></script>
+  <script src="../../../js/Rx.js"></script>
 
   <script>
     if (!console.time) {

scripts/npm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-framework",
-  "version": "2.0.0-alpha.<%= ionicVersion %>",
+  "version": "<%= ionicVersion %>",
   "license": "Apache-2.0",
   "keywords": ["ionic", "framework", "mobile", "app", "hybrid", "webapp"],
   "repository": {
@@ -16,6 +16,6 @@
     "shelljs": "0.5.3"
   },
   "peerDependencies": {
-    "angular2": "2.0.0-beta.<%= angularVersion %>"
+    "angular2": "^<%= angularVersion %>"
   }
 }

scripts/snapshot/snapshot.task.js

@@ -19,7 +19,7 @@ module.exports = function(gulp, argv, buildConfig) {
     console.log('Serving `dist` on http://localhost:' + buildConfig.protractorPort);
   });
 
-  gulp.task('snapshot', ['clean.build', 'protractor-server'], function(done) {
+  gulp.task('snapshot', ['protractor-server'], function(done) {
     snapshot(done);
   });