diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss index b2f144f7bf..753e0d23dc 100644 --- a/demos/component-docs/app.scss +++ b/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; } - - diff --git a/demos/component-docs/inputs/checkbox.html b/demos/component-docs/inputs/checkbox.html index cf701aa729..55adaa2c66 100644 --- a/demos/component-docs/inputs/checkbox.html +++ b/demos/component-docs/inputs/checkbox.html @@ -35,11 +35,11 @@ Khal Drogo - + Cersei Lannister - + Stannis Baratheon @@ -55,7 +55,7 @@ Catelyn Stark - + Bronn diff --git a/demos/component-docs/inputs/switch.html b/demos/component-docs/inputs/switch.html index 231085a1c5..90ca6e2545 100644 --- a/demos/component-docs/inputs/switch.html +++ b/demos/component-docs/inputs/switch.html @@ -14,7 +14,7 @@ Frodo Baggins - + Sam @@ -22,7 +22,7 @@ Éowyn - + Legolas @@ -34,7 +34,7 @@ Saruman - + Gandalf @@ -46,7 +46,7 @@ Treebeard - + Boromir @@ -54,7 +54,7 @@ Gollum - + Galadriel diff --git a/gulpfile.js b/gulpfile.js index d3199e440c..e730b36a16 100644 --- a/gulpfile.js +++ b/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/')); }); diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 141206ad35..2866f0b076 100644 --- a/ionic/components/card/modes/ios.scss +++ b/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); diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss index fc075c0fbb..cfd7c0e1fd 100644 --- a/ionic/components/card/modes/md.scss +++ b/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); diff --git a/ionic/components/card/test/list/e2e.ts b/ionic/components/card/test/list/e2e.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ionic/components/card/test/list/index.ts b/ionic/components/card/test/list/index.ts new file mode 100644 index 0000000000..43aed36502 --- /dev/null +++ b/ionic/components/card/test/list/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} diff --git a/ionic/components/card/test/list/main.html b/ionic/components/card/test/list/main.html new file mode 100644 index 0000000000..7e426fdc17 --- /dev/null +++ b/ionic/components/card/test/list/main.html @@ -0,0 +1,103 @@ + +List Cards + + + + + + + + + Card List + + + + + Wifi + + + + + Affection + + Very Little + + + + + + Home + + Where the heart is + + + + + + + + + + + + + Card List Without Lines + + + + + Wifi + + + + + Affection + + Very Little + + + + + + Home + + Where the heart is + + + + + + + + + + + Card With Items (No List) + + + + + Wifi + + + + + Affection + + Very Little + + + + + + Home + + Where the heart is + + + + + + + + diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index f2f481a172..1bbafda128 100644 --- a/ionic/components/item/item.scss +++ b/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. diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index bc4c36f514..5187d8efc5 100644 --- a/ionic/components/item/modes/ios.scss +++ b/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; } } diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 3962c8f552..b42f9f42e6 100644 --- a/ionic/components/item/modes/md.scss +++ b/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; + } +} diff --git a/ionic/components/item/test/text/main.html b/ionic/components/item/test/text/main.html index e7457eb7ba..dd050f4a91 100644 --- a/ionic/components/item/test/text/main.html +++ b/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 + + Single line item with no lines + + 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 diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 627e926443..e50f11b194 100644 --- a/ionic/components/list/modes/ios.scss +++ b/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; + } +} diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index ac2d936bda..5ddfdcfa83 100644 --- a/ionic/components/list/modes/md.scss +++ b/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; + } +} diff --git a/ionic/components/list/test/no-lines/e2e.ts b/ionic/components/list/test/no-lines/e2e.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ionic/components/list/test/no-lines/index.ts b/ionic/components/list/test/no-lines/index.ts new file mode 100644 index 0000000000..43aed36502 --- /dev/null +++ b/ionic/components/list/test/no-lines/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} diff --git a/ionic/components/list/test/no-lines/main.html b/ionic/components/list/test/no-lines/main.html new file mode 100644 index 0000000000..3f53208344 --- /dev/null +++ b/ionic/components/list/test/no-lines/main.html @@ -0,0 +1,30 @@ +List No Lines + + + + + List Header + + + + + Wifi + + + + + Affection + + Very Little + + + + + + Home + + Where the heart is + + + + diff --git a/ionic/components/menu/test/basic/index.ts b/ionic/components/menu/test/basic/index.ts index 5823347efd..11ecb7b8d2 100644 --- a/ionic/components/menu/test/basic/index.ts +++ b/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(); + }); } } diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 8ee53827db..681c418bdb 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/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(() => { - this._cleanup(enteringView); - }); + if (opts.preCleanup !== false) { + 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; diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts new file mode 100644 index 0000000000..ad14126e51 --- /dev/null +++ b/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: ` + + Login + + + + + ` +}) +export class Login { + constructor(nav: NavController) { + this.nav = nav; + } + + goToAccount() { + this.nav.push(Account); + } +} + + + @Page({ + template: ` + + + Account Menu + + + + + + + + + + + + ` +}) +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: ` + + Account Dashboard + + + Dashboard + + ` +}) +export class Dashboard {} + + +@Page({ + template: ` + + Account Profile + + + Profile + + ` +}) +export class Profile {} + + +@App({ + template: `` +}) +class E2EApp { + constructor() { + this.rootPage = Login; + } +} diff --git a/ionic/fonts/ionicons.scss b/ionic/fonts/ionicons.scss index 803e7faa4a..dc6f011de4 100644 --- a/ionic/fonts/ionicons.scss +++ b/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; diff --git a/ionic/fonts/roboto.scss b/ionic/fonts/roboto.scss index 34e09dc7db..638cdb834a 100644 --- a/ionic/fonts/roboto.scss +++ b/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'); } diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 045b7abd6a..c8bf1d9991 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -49,6 +49,7 @@ // Ionicons +$font-path: "../fonts" !default; $ionicons: true !default; @if ($ionicons) { @import "fonts/ionicons"; diff --git a/scripts/demos/docs.index.template.html b/scripts/demos/docs.index.template.html index a3f4d6e920..8ba93aaf61 100644 --- a/scripts/demos/docs.index.template.html +++ b/scripts/demos/docs.index.template.html @@ -5,7 +5,6 @@ -