diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 8fb1531140..167a105646 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -13,89 +13,87 @@ ion-app { max-height: 100%; margin: 0; padding: 0; - - ion-nav { - // container of header.toolbar-container, footer.toolbar-container and .nav-item-container - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - - @include flex-display(); - @include flex-direction(column); - } - - .toolbar-container { - // container of many toolbars for each view in the ion-nav - position: relative; - width: 100%; - min-height: 50px; - @include flex-order($flex-order-toolbar-top); - } - - footer.toolbar-container { - @include flex-order($flex-order-toolbar-bottom); - } - - ion-toolbar { - // one view's toolbar, sibling to many view toolbars inside of .toolbar-container - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - height: 100%; - } - - .nav-item-container { - // container of many .nav-item's, each one containing one view - position: relative; - @include flex(1); - @include flex-order($flex-order-view-content); - } - - .tab-pane-container { - // container of each content for each tab component within a tabs component - @include flex(1); - position: relative; - width: 100%; - @include flex-order($flex-order-view-content); - } - - .nav-item { - // user created view, sibling to many .nav-item's, contained by .nav-item-container - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - // by default .nav-item is hidden - // and the transition animation will display it - display: none; - } - - ion-content { - // content within the user created view, contained by .nav-item - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .scroll-content { - // extra div to allow overflow scrolling - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - } - +} + +ion-nav { + // container of header.toolbar-container, footer.toolbar-container and .nav-item-container + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + + @include flex-display(); + @include flex-direction(column); +} + +.toolbar-container { + // container of many toolbars for each view in the ion-nav + position: relative; + width: 100%; + min-height: 50px; + @include flex-order($flex-order-toolbar-top); +} + +footer.toolbar-container { + @include flex-order($flex-order-toolbar-bottom); +} + +ion-toolbar { + // one view's toolbar, sibling to many view toolbars inside of .toolbar-container + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.nav-item-container { + // container of many .nav-item's, each one containing one view + position: relative; + @include flex(1); + @include flex-order($flex-order-view-content); +} + +.tab-pane-container { + // container of each content for each tab component within a tabs component + @include flex(1); + position: relative; + width: 100%; + @include flex-order($flex-order-view-content); +} + +.nav-item { + // user created view, sibling to many .nav-item's, contained by .nav-item-container + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + // by default .nav-item is hidden + // and the transition animation will display it + display: none; +} + +ion-content { + // content within the user created view, contained by .nav-item + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.scroll-content { + // extra div to allow overflow scrolling + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; } diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss index 3e7cb2f97a..4965dd86cc 100644 --- a/ionic/components/content/content.scss +++ b/ionic/components/content/content.scss @@ -5,6 +5,7 @@ $content-background-color: #fff !default; +.toolbar-container, .nav-item-container { background-color: $content-background-color; } diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 75890c844e..aab5b94371 100644 --- a/ionic/components/nav/nav-base.js +++ b/ionic/components/nav/nav-base.js @@ -64,6 +64,7 @@ export class NavBase { } pop(opts = {}) { + // reject if there's nothing to pop to if (this.items.length < 2) { return Promise.reject(); } diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js index 6bbc0608c2..25c3b6939a 100644 --- a/ionic/components/nav/nav-item.js +++ b/ionic/components/nav/nav-item.js @@ -12,7 +12,8 @@ export class NavItem { this.Class = ComponentClass; this.params = params; this.id = util.nextUid(); - this.headers = []; + this.headerProtos = []; + this.toolbarViews = []; this.disposals = []; } @@ -39,9 +40,10 @@ export class NavItem { // content this.component = componentRef; - this.domElement = componentRef.location.domElement; - this.domElement.classList.add('nav-item'); - this.domElement.setAttribute('data-nav-item-id', this.id); + + this.contentEle = componentRef.location.domElement; + this.contentEle.classList.add('nav-item'); + this.contentEle.setAttribute('id', 'nav-item-' + this.id); if (componentRef && componentRef._dispose) { this.disposals.push(componentRef._dispose); @@ -56,8 +58,8 @@ export class NavItem { } }; - for (let i = 0; i < this.headers.length; i++) { - this.createHeader(this.headers[i], context, injector); + for (let i = 0; i < this.headerProtos.length; i++) { + this.createHeader(this.headerProtos[i], context, injector); } resolve(); @@ -73,19 +75,32 @@ export class NavItem { let atIndex = -1; - let headerViewRef = headerContainer.create(toolbarProtoView, atIndex, context, injector); + let headerView = headerContainer.create(toolbarProtoView, atIndex, context, injector); + + if (headerView) { + this.toolbarViews.push(headerView); - if (headerViewRef) { this.disposals.push(() => { - var index = headerContainer.indexOf(headerViewRef); - headerContainer.remove(index); - headerViewRef = null; + headerContainer.remove( headerContainer.indexOf(headerView) ); }); } } addHeader(toolbarProtoView) { - this.headers.push(toolbarProtoView); + this.headerProtos.push(toolbarProtoView); + } + + getContent() { + return this.contentEle; + } + + getToolbars() { + let elements = []; + for (let i = 0; i < this.toolbarViews.length; i++) { + var toolbarView = this.toolbarViews[i]; + elements.push(toolbarView._view.render._view.rootNodes[0]); + } + return elements; } destroy() { diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js index 405e04e0c0..66b42ba195 100644 --- a/ionic/components/nav/nav.js +++ b/ionic/components/nav/nav.js @@ -7,8 +7,6 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; import {Injector} from 'angular2/di'; import {NavBase} from 'ionic/components/nav/nav-base'; -import {NavItem, NavItemDynamicComponent} from 'ionic/components/nav/nav-item'; -import {ToolbarContainer} from 'ionic/components/toolbar/toolbar'; @Component({ @@ -29,14 +27,9 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar'; directives: [HeaderAnchor, ContentAnchor] }) export class Nav extends NavBase { - - constructor( - loader: DynamicComponentLoader, - injector: Injector - ) { + constructor(loader: DynamicComponentLoader, injector: Injector) { super(loader, injector); } - } diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js index 2e8c5ffa78..c2ca3b34b2 100644 --- a/ionic/components/nav/test/basic/pages/first-page.js +++ b/ionic/components/nav/test/basic/pages/first-page.js @@ -1,14 +1,14 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {NavController, Header, Toolbar, ToolbarTitle} from 'ionic/ionic'; +import {NavController, Header, Toolbar} from 'ionic/ionic'; import {SecondPage} from './second-page'; @Component({selector: 'ion-view'}) @View({ templateUrl: 'pages/first-page.html', - directives: [Header, ToolbarTitle, Toolbar] + directives: [Header, Toolbar] }) export class FirstPage { constructor( diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js index 5f8136a4ad..d7a80255a3 100644 --- a/ionic/components/nav/test/basic/pages/second-page.js +++ b/ionic/components/nav/test/basic/pages/second-page.js @@ -1,14 +1,14 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {NavController, NavParams, Header, ToolbarTitle, Toolbar} from 'ionic/ionic'; +import {NavController, NavParams, Header, Toolbar} from 'ionic/ionic'; import {ThirdPage} from './third-page'; @Component() @View({ templateUrl: 'pages/second-page.html', - directives: [Header, ToolbarTitle, Toolbar] + directives: [Header, Toolbar] }) export class SecondPage { constructor( diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js index 8b9d66eae8..279dad6457 100644 --- a/ionic/components/nav/test/basic/pages/third-page.js +++ b/ionic/components/nav/test/basic/pages/third-page.js @@ -1,13 +1,13 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {NavController, Header, ToolbarTitle, Toolbar} from 'ionic/ionic'; +import {NavController, Header, Toolbar} from 'ionic/ionic'; @Component() @View({ templateUrl: 'pages/third-page.html', - directives: [Header, ToolbarTitle, Toolbar] + directives: [Header, Toolbar] }) export class ThirdPage { constructor( diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js index 2a9a82868e..7b099c199f 100644 --- a/ionic/components/toolbar/toolbar.js +++ b/ionic/components/toolbar/toolbar.js @@ -10,14 +10,34 @@ import {Platform} from 'ionic/platform/platform'; @Component({ - selector: 'ion-toolbar' + selector: 'ion-toolbar', + hostProperties: { + toolbarId: 'className' + } }) @View({ - template: `` + template: ` +
+ +
+
+ +
+
+
+ +
+
+ +
+
+ `, + directives: [ToolbarTitle] }) export class Toolbar { - constructor() { - console.log('ion-toolbar'); + constructor(navItem: NavItem, elementRef: ElementRef) { + this.toolbarId = 'toolbar-id-' + navItem.id; + console.log('Toolbar constructor', this.toolbarId) } } diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 1e4a333790..bc334d8b0e 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -1,55 +1,51 @@ -/// HACK -header { - background: white; -} - - // Toolbar // -------------------------------------------------- $toolbar-background: #f7f7f8 !default; $toolbar-order-core: ( - back-button: 1, - title: 2, - primary: 3, - secondary: 4 + back-button: 1, + title: 2, + primary: 3, + secondary: 4 ); $toolbar-primary-flex-order: 1; $toolbar-primary-flex-order: 1; $toolbar-title-flex-order: 5; $toolbar-secondary-flex-order: 10; -.toolbar { - @include flex-display(); + +ion-toolbar { + /*@include flex-display(); @include flex-direction(row); @include flex-align-items(center); - @include flex-justify-content(space-between); + @include flex-justify-content(space-between);*/ background: $toolbar-background; -} -.toolbar[placement="top"] { - @include flex-order($flex-order-toolbar-top); -} -.toolbar[placement="bottom"] { - @include flex-order($flex-order-toolbar-bottom); + // by default ion-toolbar is hidden + // and the transition animation will display it + display: none; } // buttons are primary by default -.toolbar .button, -.toolbar [side="primary"] { +ion-toolbar .button, +ion-toolbar [side="primary"] { @include flex-order(map-get($toolbar-order-core, 'primary')); } -.toolbar [side="secondary"] { +ion-toolbar [side="secondary"] { @include flex-order(map-get($toolbar-order-core, 'secondary')); } -.toolbar-title { +.toolbar-title.toolbar-title { + // double selector to override the following @include flex-display(); @include flex(1); @include flex-order(map-get($toolbar-order-core, 'title')); + margin: 0; + padding: 0; } + .toolbar-inner-title { width: 100%; padding: 0 15px; @@ -57,10 +53,6 @@ $toolbar-secondary-flex-order: 10; white-space: nowrap; text-overflow: ellipsis; } -// Override ion-app h1 margin-top -h1.toolbar-title { - margin: 0; -} .toolbar-back-button { @include flex-order(map-get($toolbar-order-core, 'back-button')); diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js index fb4b8761c5..d35efd49b6 100644 --- a/ionic/transitions/ios-transition.js +++ b/ionic/transitions/ios-transition.js @@ -28,11 +28,11 @@ class IOSTransition extends Animation { this.leavingItem = navCtrl.getStagedLeavingItem(); // create animation for the entering item - let enteringItemAnimation = new Animation(this.enteringItem.domElement); + let enteringItemAnimation = new Animation(this.enteringItem.getContent()); // create animation for the leaving item // leavingItem could be null, but the animation instance knows to do nothing - let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.domElement); + let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.getContent()); // entering item moves to center // before starting, set enteringItem to display: block diff --git a/ionic/transitions/none-transition.js b/ionic/transitions/none-transition.js index cf6cc4e9f2..2bb86c483b 100644 --- a/ionic/transitions/none-transition.js +++ b/ionic/transitions/none-transition.js @@ -3,19 +3,34 @@ import {Transition} from './transition' class NoneTransition { - constructor(navCtrl, opts) { - + constructor(navCtrl) { // get the entering and leaving items let enteringItem = navCtrl.getStagedEnteringItem(); let leavingItem = navCtrl.getStagedLeavingItem(); - // show the entering item - enteringItem.domElement.style.display = 'block'; - enteringItem.domElement.style.transform = 'translateX(0%)'; + // show entering contet + let enteringContent = enteringItem.getContent(); + enteringContent.style.display = 'block'; + enteringContent.style.transform = 'translateX(0%)'; + + // show entering headers + let toolbarElements = enteringItem.getToolbars(); + for (let i = 0; i < toolbarElements.length; i++) { + toolbarElements[i].style.display = 'block'; + toolbarElements[i].style.transform = 'translateX(0%)'; + } // hide the leaving item - if (leavingItem && leavingItem.domElement) { - leavingItem.domElement.style.display = ''; + if (leavingItem) { + let leavingContent = leavingItem.getContent(); + if (leavingContent) { + leavingContent.style.display = ''; + } + + let leavingHeaderElements = leavingItem.getToolbars(); + for (let i = 0; i < leavingHeaderElements.length; i++) { + leavingHeaderElements[i].style.display = ''; + } } }