horizontal align dat title

ionic/components/app/normalize.scss

@@ -6,21 +6,10 @@ html {
   -ms-text-size-adjust: 100%; // 1
   -webkit-text-size-adjust: 100%; // 1
 }
-*,
-*:before,
-*:after {
+* {
   box-sizing: border-box;
 }
 
-body {
-  position: relative;
-  overflow: hidden;
-  max-width: 100%;
-  max-height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
 
 // HTML5 display definitions
 // ==========================================================================

ionic/components/app/structure.scss

@@ -3,6 +3,15 @@ body {
   height: 100%;
 }
 
+body {
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 ion-app {
   @include flex-display();
   @include flex-direction(column);
@@ -33,7 +42,7 @@ ion-nav {
   // container of many toolbars for each view in the ion-nav
   position: relative;
   width: 100%;
-  min-height: 50px;
+  min-height: 4.4rem;
   @include flex-order($flex-order-toolbar-top);
 }
 

ionic/components/app/util.scss

@@ -69,7 +69,7 @@ $content-padding:    10px !default;
 
 // Click Block
 // --------------------------------------------------
-// Fill the screen to block clicks (a better pointer-events: none) for the body
+// Fill the screen to block clicks (a better pointer-events: none)
 // to avoid full-page reflows and paints which can cause flickers
 
 .click-block {
@@ -80,10 +80,25 @@ $content-padding:    10px !default;
   left: 0;
   opacity: 0;
   z-index: $z-index-click-block;
-  @include translate3d(-9999px, 0, 0);
+  @include translate3d(-9999px, 0px, 0px);
   overflow: hidden;
 }
 
 .click-block-active {
-  @include translate3d(0, 0, 0);
+  @include translate3d(0px, 0px, 0px);
+}
+
+
+// Node Inserted Animation
+// --------------------------------------------------
+// Used by the toolbar to know when the title has been rendered
+// http://davidwalsh.name/detect-node-insertion
+
+@-webkit-keyframes nodeInserted {
+  from { opacity: 0.99; }
+  to { opacity: 1; }
+}
+@keyframes nodeInserted {
+  from { opacity: 0.99; }
+  to { opacity: 1; }
 }

ionic/components/nav/nav-base.js

@@ -68,12 +68,7 @@ export class NavBase {
   }
 
   pop(opts = {}) {
-    if (this.isTransitioning()) {
-      return Promise.reject();
-    }
-
-    // reject if there's nothing to pop to
-    if (this.items.length < 2) {
+    if (this.isTransitioning() || this.items.length < 2) {
       return Promise.reject();
     }
 

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, Toolbar, ToolbarTitle]
+  directives: [Header, Toolbar]
 })
 export class FirstPage {
   constructor(

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, Toolbar, ToolbarTitle} 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, Toolbar, ToolbarTitle]
+  directives: [Header, Toolbar]
 })
 export class SecondPage {
   constructor(

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, Toolbar, ToolbarTitle} from 'ionic/ionic';
+import {NavController, Header, Toolbar} from 'ionic/ionic';
 
 
 @Component()
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: [Header, Toolbar, ToolbarTitle]
+  directives: [Header, Toolbar]
 })
 export class ThirdPage {
   constructor(

ionic/components/toolbar/extensions/ios.scss

@@ -44,6 +44,10 @@ $toolbar-ios-button-background-color:       transparent !default;
     @include flex-order(map-get($toolbar-order-ios, 'secondary'));
   }
 
+  .toolbar-inner-title {
+
+  }
+
   ion-title {
     @include flex-order(map-get($toolbar-order-ios, 'title'));
     font-size: $toolbar-ios-title-font-size;
@@ -55,10 +59,6 @@ $toolbar-ios-button-background-color:       transparent !default;
     @include flex-order(map-get($toolbar-order-ios, 'back-button'));
   }
 
-  .toolbar-title-hide {
-    opacity: 0;
-  }
-
   .button {
     font-size: $toolbar-ios-button-font-size;
     color: $toolbar-ios-button-text-color;

ionic/components/toolbar/toolbar.js

@@ -17,7 +17,9 @@ import {Platform} from 'ionic/platform/platform';
     <div class="toolbar-inner">
       <button class="button back-button toolbar-item" style="display:none"></button>
       <div class="toolbar-title">
-        <content select="ion-title"></content>
+        <div class="toolbar-inner-title toolbar-title-hide">
+          <content select="ion-title"></content>
+        </div>
       </div>
       <div class="toolbar-item toolbar-primary-item">
         <content select=".primary"></content>
@@ -26,47 +28,25 @@ import {Platform} from 'ionic/platform/platform';
         <content select=".secondary"></content>
       </div>
     </div>
-  `,
-  directives: [ToolbarTitle]
+  `
 })
 export class Toolbar {
   constructor(elementRef: ElementRef) {
     this.domElement = elementRef.domElement;
     this.config = Toolbar.config.invoke(this);
-  }
-}
-new IonicComponent(Toolbar, {});
 
-
-@Component({
-  selector: 'ion-title'
-})
-@View({
-  template: `
-  <div class="toolbar-inner-title">
-    <content></content>
-  </div>`
-})
-export class ToolbarTitle {
-  constructor(element: ElementRef) {
-    console.log('ion-title');
-    // this.domElement = element.domElement;
-
-    // // TODO find better way to get parent toolbar
-    // let current = this.domElement;
-    // while (current = current.parentNode) {
-    //   if (current.classList.contains('toolbar')) {
-    //     break;
-    //   }
-    // }
-    // this.toolbarElement = current;
-    // this.align();
+    // http://davidwalsh.name/detect-node-insertion
+    this.domElement.addEventListener("animationstart", (ev) => {
+      ev.stopPropagation();
+      this.alignTitle();
+    });
   }
 
-  align() {
-    if (!this.toolbarElement) return;
-    const toolbarElement = this.toolbarElement;
-    const titleElement = this._titleElement || (this._titleElement = this.domElement.querySelector('.toolbar-inner-title'));
+  alignTitle() {
+    if (!this.domElement) return;
+
+    const toolbarElement = this.domElement;
+    const titleElement = this._titleElement || (this._titleElement = toolbarElement.querySelector('.toolbar-inner-title'));
     const style = this._style || (this._style = window.getComputedStyle(titleElement));
 
     const titleOffsetWidth = titleElement.offsetWidth;
@@ -74,7 +54,7 @@ export class ToolbarTitle {
     const titleScrollWidth = titleElement.scrollWidth;
     const toolbarOffsetWidth = toolbarElement.offsetWidth;
 
-    //only align if the title is center and if it isn't already overflowing
+    // only align if the title is center and if it isn't already overflowing
     if (style.textAlign !== 'center' || titleOffsetWidth < titleScrollWidth) {
       this._showTitle();
     } else {
@@ -100,7 +80,9 @@ export class ToolbarTitle {
     }
   }
 
+
 }
+new IonicComponent(Toolbar, {});
 
 
 /*

ionic/components/toolbar/toolbar.scss

@@ -33,6 +33,9 @@ ion-toolbar {
   }
 }
 
+.toolbar-inner {
+  width: 100%;
+}
 
 // buttons are primary by default
 ion-toolbar .button,
@@ -45,12 +48,11 @@ ion-toolbar [side="secondary"] {
 }
 
 ion-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;
+  display: block;
+
+  // used to notify JS when the title has been rendered
+  animation-duration: 0.001s;
+  animation-name: nodeInserted;
 }
 
 .toolbar-inner-title {
@@ -69,3 +71,7 @@ ion-title {
   background: transparent;
   border: none;
 }
+
+.toolbar-title-hide {
+  opacity: 0;
+}