Merge branch 'master' of github.com:driftyco/ionic2

demos/component-docs/app.scss

@@ -1,3 +1,17 @@
+$colors: (
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+  energized:  #ffc527,
+  royal:      #7e60ff,
+);
+
+$font-path: '../../dist/fonts';
+@import "../../ionic/ionic";
+
+
 body, body:hover, body a, body button, body media-switch {
   cursor: url('http://ionicframework.com/img/finger.png'), auto;
 }
@@ -330,5 +344,3 @@ body.ios button[fab].fab-map {
 body.md button[fab].fab-map {
   top: 220px;
 }
-
-

demos/component-docs/inputs/checkbox.html

@@ -35,11 +35,11 @@
       Khal Drogo
     </ion-checkbox>
 
-    <ion-checkbox dark>
+    <ion-checkbox energized checked="true" dark>
       Cersei Lannister
     </ion-checkbox>
 
-    <ion-checkbox primary checked="true">
+    <ion-checkbox royal checked="true">
       Stannis Baratheon
     </ion-checkbox>
 
@@ -55,7 +55,7 @@
       Catelyn Stark
     </ion-checkbox>
 
-    <ion-checkbox primary>
+    <ion-checkbox royal>
       Bronn
     </ion-checkbox>
 

demos/component-docs/inputs/switch.html

@@ -14,7 +14,7 @@
     Frodo Baggins
   </ion-switch>
 
-  <ion-switch light>
+  <ion-switch energized>
     Sam
   </ion-switch>
 
@@ -22,7 +22,7 @@
     Éowyn
   </ion-switch>
 
-  <ion-switch secondary checked="true">
+  <ion-switch royal checked="true">
     Legolas
   </ion-switch>
 
@@ -34,7 +34,7 @@
     Saruman
   </ion-switch>
 
-  <ion-switch light checked="true">
+  <ion-switch energized checked="true">
     Gandalf
   </ion-switch>
 
@@ -46,7 +46,7 @@
     Treebeard
   </ion-switch>
 
-  <ion-switch primary>
+  <ion-switch royal>
     Boromir
   </ion-switch>
 
@@ -54,7 +54,7 @@
     Gollum
   </ion-switch>
 
-  <ion-switch light>
+  <ion-switch energized>
     Galadriel
   </ion-switch>
 

gulpfile.js

@@ -459,12 +459,14 @@ gulp.task('build.demos', function(){
 gulp.task('sass.demos:docs', function() {
   var sass = require('gulp-sass');
   var autoprefixer = require('gulp-autoprefixer');
+  var concat = require('gulp-concat');
   return gulp.src([
-      'demos/component-docs/app.scss'
+      'demos/component-docs/app.scss',
     ])
     .pipe(sass()
       .on('error', sass.logError)
     )
+    .pipe(concat('app.css'))
     .pipe(autoprefixer(buildConfig.autoprefixer))
     .pipe(gulp.dest('dist/demos/component-docs/'));
 });

ionic/components/card/modes/ios.scss

@@ -40,6 +40,14 @@ ion-card {
   border-radius: $card-ios-border-radius;
   overflow: hidden;
 
+  .list {
+    margin-bottom: 0;
+
+    ion-item-content {
+      padding: 0;
+    }
+  }
+
   .item {
     padding-right: ($card-ios-padding-right / 2);
     padding-left: ($card-ios-padding-left / 2);

ionic/components/card/modes/md.scss

@@ -43,6 +43,14 @@ ion-card {
   border-radius: $card-md-border-radius;
   overflow: hidden;
 
+  .list {
+    margin-bottom: 0;
+
+    ion-item-content {
+      padding: 0;
+    }
+  }
+
   .item {
     padding-right: ($card-md-padding-right / 2);
     padding-left: ($card-md-padding-left / 2);

ionic/components/card/test/list/index.ts

@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

ionic/components/card/test/list/main.html

@@ -0,0 +1,103 @@
+
+<ion-toolbar><ion-title>List Cards</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-card>
+
+    <ion-list>
+
+      <ion-header>
+        Card List
+      </ion-header>
+
+      <ion-switch>
+        <icon wifi item-left></icon>
+        Wifi
+      </ion-switch>
+
+      <ion-item>
+        <icon heart item-left></icon>
+        Affection
+        <ion-note item-right>
+          Very Little
+        </ion-note>
+      </ion-item>
+
+      <ion-item>
+        <icon home item-left></icon>
+        Home
+        <ion-note item-right>
+          Where the heart is
+        </ion-note>
+      </ion-item>
+
+    </ion-list>
+
+  </ion-card>
+
+  <ion-card>
+
+    <ion-list no-lines>
+
+      <ion-header>
+        Card List Without Lines
+      </ion-header>
+
+      <ion-switch>
+        <icon wifi item-left></icon>
+        Wifi
+      </ion-switch>
+
+      <ion-item>
+        <icon heart item-left></icon>
+        Affection
+        <ion-note item-right>
+          Very Little
+        </ion-note>
+      </ion-item>
+
+      <ion-item>
+        <icon home item-left></icon>
+        Home
+        <ion-note item-right>
+          Where the heart is
+        </ion-note>
+      </ion-item>
+
+    </ion-list>
+
+  </ion-card>
+
+  <ion-card>
+
+    <ion-card-header>
+      Card With Items (No List)
+    </ion-card-header>
+
+    <ion-switch>
+      <icon wifi item-left></icon>
+      Wifi
+    </ion-switch>
+
+    <ion-item>
+      <icon heart item-left></icon>
+      Affection
+      <ion-note item-right>
+        Very Little
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon home item-left></icon>
+      Home
+      <ion-note item-right>
+        Where the heart is
+      </ion-note>
+    </ion-item>
+
+
+  </ion-card>
+
+
+</ion-content>

ionic/components/item/item.scss

@@ -129,15 +129,6 @@ ion-input.item {
   align-items: flex-start;
 }
 
-.item.item.item.no-border-bottom:after,
-.item.item.item.no-border-bottom + .item:before {
-  border: none;
-}
-
-.item.item.item.no-border-bottom + .item {
-  margin-top: -13px;
-}
-
 /**
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.

ionic/components/item/modes/ios.scss

@@ -238,29 +238,44 @@ ion-card {
   }
 }
 
-&.hairlines .list ion-item-options {
+&.hairlines .list {
+
+  ion-item-options {
     button, [button] {
       min-height: calc(100% - 1px);
       height: calc(100% - 1px);
       margin-top: 0.55px;
       margin-bottom: 0.55px;
     }
-}
-
-&.hairlines .list ion-item-sliding-content {
-  margin-top: 0.55px;
-  margin-bottom: 0.55px;
-}
-
-&.hairlines .list .item {
-  margin-top: -0.55px;
-
-  &:last-child {
-    margin-bottom: -0.55px;
   }
 
+  ion-item-sliding-content {
+    margin-top: 0.55px;
+    margin-bottom: 0.55px;
+  }
+
+  .item {
+    margin-top: -0.55px;
+
+    &:last-child {
+      margin-bottom: -0.55px;
+    }
+
+    &:before,
+    &:after {
+      border-top-width: 0.55px;
+    }
+  }
+
+}
+
+.item[no-lines] {
   &:before,
   &:after {
-    border-top-width: 0.55px;
+    border-width: 0;
+  }
+
+  + .item:before {
+    border-width: 0;
   }
 }

ionic/components/item/modes/md.scss

@@ -254,3 +254,14 @@ button.item {
     box-shadow: none;
   }
 }
+
+.item[no-lines] {
+  &:before,
+  &:after {
+    border-width: 0;
+  }
+
+  + .item:before {
+    border-width: 0;
+  }
+}

ionic/components/item/test/text/main.html

@@ -12,9 +12,13 @@
       Single line text that should have ellipses when it doesn't all fit in the item
     </ion-item>
 
+    <ion-item no-lines>
+      Single line item with no lines
+    </ion-item>
+
     <ion-item text-wrap>
       Multiline text that should wrap when it is too long
-      to fit on one line in the item. Class on .item
+      to fit on one line in the item. Attribute on .item
     </ion-item>
 
     <ion-item text-wrap>

ionic/components/list/modes/ios.scss

@@ -87,3 +87,12 @@ $list-ios-header-color:               #333 !default;
 .list[inset] + .list[inset] {
   margin-top: 0;
 }
+
+&.hairlines .list[no-lines],
+.list[no-lines] {
+  ion-header:after,
+  .item:before,
+  .item:after {
+    border-width: 0;
+  }
+}

ionic/components/list/modes/md.scss

@@ -66,3 +66,14 @@ $list-md-header-color:           #858585 !default;
 .list[inset] + .list[inset] {
   margin-top: 0;
 }
+
+.list[no-lines] {
+  ion-header + .item:before {
+    border-width: 1px;
+  }
+
+  .item:before,
+  .item:after {
+    border-width: 0;
+  }
+}

ionic/components/list/test/no-lines/index.ts

@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

ionic/components/list/test/no-lines/main.html

@@ -0,0 +1,30 @@
+<ion-toolbar><ion-title>List No Lines</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-list no-lines>
+    <ion-header>
+      List Header
+    </ion-header>
+
+    <ion-switch>
+      <icon wifi item-left></icon>
+      Wifi
+    </ion-switch>
+
+    <ion-item>
+      <icon heart item-left></icon>
+      Affection
+      <ion-note item-right>
+        Very Little
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <icon home item-left></icon>
+      Home
+      <ion-note item-right>
+        Where the heart is
+      </ion-note>
+    </ion-item>
+  </ion-list>
+</ion-content>

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

@@ -37,12 +37,13 @@ class E2EApp {
   }
 
   openPage(page) {
-    // close the menu when clicking a link from the menu
-    this.app.getComponent('leftMenu').close();
-
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario
     let nav = this.app.getComponent('nav');
-    nav.setRoot(page.component);
+    nav.setRoot(page.component).then(() => {
+      // wait for the root page to be completely loaded
+      // then close the menu
+      this.app.getComponent('leftMenu').close();
+    });
   }
 }

ionic/components/nav/nav-controller.ts

@@ -181,9 +181,11 @@ export class NavController extends Ion {
     // add the view to the stack
     this._add(enteringView);
 
-    raf(() => {
+    if (opts.preCleanup !== false) {
-      this._cleanup(enteringView);
+      raf(() => {
-    });
+        this._cleanup(enteringView);
+      });  
+    }
 
     if (this.router) {
       // notify router of the state change
@@ -363,6 +365,7 @@ export class NavController extends Ion {
 
     // if animate has not been set then default to false
     opts.animate = opts.animate || false;
+    opts.preCleanup = false;
 
     // ensure leaving views are not cached, and should be destroyed
     opts.cacheLeavingView = false;

ionic/components/nav/test/nested/index.ts

@@ -0,0 +1,108 @@
+import {App, NavController} from 'ionic/ionic';
+import {Page, Config, IonicApp} from 'ionic/ionic';
+import {NavParams, NavController, ViewController} from 'ionic/ionic';
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Login</ion-title>
+    </ion-navbar>
+    <ion-content style="text-align:center;" padding>
+      <button (click)="goToAccount()">Login</button>
+    </ion-content>
+  `
+})
+export class Login {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+
+  goToAccount() {
+    this.nav.push(Account);
+  }
+}
+
+
+ @Page({
+  template: `
+    <ion-menu [content]="content">
+     <ion-toolbar secondary>
+       <ion-title>Account Menu</ion-title>
+     </ion-toolbar>
+     <ion-content>
+       <ion-list>
+         <button ion-item (click)="goToProfile()">
+           Profile
+         </button>
+         <button ion-item (click)="goToDashboard()">
+           Dashboard
+         </button>
+         <button ion-item detail-none (click)="logOut()">
+           Logout
+         </button>
+       </ion-list>
+     </ion-content>
+    </ion-menu>
+
+    <ion-nav id="account-nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
+  `
+})
+export class Account {
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootPage = Dashboard;
+  }
+
+  goToProfile() {
+    this.app.getComponent('account-nav').setRoot(Profile).then(() => {
+      this.app.getComponent('menu').close();
+    });
+  }
+
+  goToDashboard() {
+    this.app.getComponent('account-nav').setRoot(Dashboard).then(() => {
+      this.app.getComponent('menu').close();
+    });
+  }
+
+  logOut() {
+    this.app.getComponent('root-nav').setRoot(Login);
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar primary>
+      <ion-title>Account Dashboard</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      Dashboard
+    </ion-content>
+  `
+})
+export class Dashboard {}
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar danger>
+      <ion-title>Account Profile</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      Profile
+    </ion-content>
+  `
+})
+export class Profile {}
+
+
+@App({
+  template: `<ion-nav id="root-nav" [root]="rootPage" swipe-back-enabled="false"></ion-nav>`
+})
+class E2EApp {
+  constructor() {
+    this.rootPage = Login;
+  }
+}

ionic/fonts/ionicons.scss

@@ -2,7 +2,7 @@
 // Ionicons
 // --------------------------
 
-$ionicons-font-path: "../fonts" !default;
+$ionicons-font-path: $font-path !default;
 $ionicons-font-family: "Ionicons" !default;
 $ionicons-version: "3.0.0" !default;
 

ionic/fonts/roboto.scss

@@ -5,31 +5,32 @@
   http://www.apache.org/licenses/LICENSE-2.0.html
  */
 
+$roboto-font-path: $font-path !default;
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/roboto-light.ttf) format('truetype'), url(../fonts/roboto-light.woff) format('woff');
+  src: local('Roboto Light'), local('Roboto-Light'), url('#{$roboto-font-path}/roboto-light.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-light.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto-regular.ttf) format('truetype'), url(../fonts/roboto-regular.woff) format('woff');
+  src: local('Roboto'), local('Roboto-Regular'), url('#{$roboto-font-path}/roboto-regular.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-regular.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto-medium.ttf) format('truetype'), url(../fonts/roboto-medium.woff) format('woff');
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('#{$roboto-font-path}/roboto-medium.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-medium.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.ttf) format('truetype'), url(../fonts/roboto-bold.woff) format('woff');
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('#{$roboto-font-path}/roboto-bold.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-bold.woff') format('woff');
 }

ionic/ionic.core.scss

@@ -49,6 +49,7 @@
 
 
 // Ionicons
+$font-path: "../fonts" !default;
 $ionicons: true !default;
 @if ($ionicons) {
   @import "fonts/ionicons";

scripts/demos/docs.index.template.html

@@ -5,7 +5,6 @@
   <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-  <link href="/css/v2-demos/css/ionic.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="app.css">
 
 </head>