iOS toolbar time

ionic/components/content/content.scss

@@ -5,7 +5,6 @@
 $content-background-color:         #fff !default;
 
 
-.toolbar-container,
 .nav-item-container {
   background-color: $content-background-color;
 }

ionic/components/nav/nav.js

@@ -1,4 +1,4 @@
-import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
@@ -6,7 +6,8 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {Injector} from 'angular2/di';
 
-import {NavBase} from 'ionic/components/nav/nav-base';
+import {NavBase} from './nav-base';
+import {ToolbarContainer} from '../toolbar/toolbar-container';
 
 
 @Component({
@@ -18,13 +19,13 @@ import {NavBase} from 'ionic/components/nav/nav-base';
 @View({
   template: `
   <header class="toolbar-container">
-    <header-anchor></header-anchor>
+    <template header-anchor></template>
   </header>
   <section class="nav-item-container">
-    <content-anchor></content-anchor>
+    <template content-anchor></template>
   </section>
   `,
-  directives: [HeaderAnchor, ContentAnchor]
+  directives: [HeaderAnchor, ContentAnchor, ToolbarContainer]
 })
 export class Nav extends NavBase {
   constructor(loader: DynamicComponentLoader, injector: Injector) {
@@ -33,8 +34,8 @@ export class Nav extends NavBase {
 }
 
 
-@Component({
+@Directive({
-  selector: 'header-anchor'
+  selector: '[header-anchor]'
 })
 class HeaderAnchor {
   constructor(@Ancestor() nav: Nav, viewContainerRef: ViewContainerRef) {
@@ -43,8 +44,8 @@ class HeaderAnchor {
 }
 
 
-@Component({
+@Directive({
-  selector: 'content-anchor'
+  selector: '[content-anchor]'
 })
 class ContentAnchor {
   constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {

ionic/components/nav/test/basic/pages/first-page.html

@@ -6,7 +6,7 @@
 </ion-toolbar>
 
 
-<ion-content class="padding" style="background:lightblue">
+<ion-content class="padding">
 
   <p>First Page: {{ val }}</p>
 

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

ionic/components/nav/test/basic/pages/second-page.html

@@ -6,7 +6,7 @@
 </ion-toolbar>
 
 
-<ion-content class="padding" style="background:green">
+<ion-content class="padding">
 
   <p>
     <button (click)="pop()">Pop (Go back to 1st)</button>

ionic/components/nav/test/basic/pages/third-page.html

@@ -6,7 +6,7 @@
 </ion-toolbar>
 
 
-<ion-content class="padding" style="background:yellow">
+<ion-content class="padding">
 
   <p>
     <button (click)="pop()">Pop (Go back to 2nd)</button>

ionic/components/toolbar/extensions/ios.scss

@@ -1,6 +1,7 @@
 
 // iOS Toolbar
 // --------------------------------------------------
+
 $toolbar-order-ios: (
   back-button: 1,
   primary: 2,
@@ -18,17 +19,31 @@ $toolbar-ios-button-text-color:             #007aff !default;
 $toolbar-ios-button-background-color:       transparent !default;
 
 
-.toolbar-ios {
+.toolbar-container-ios {
   height: $toolbar-ios-height;
   background: $toolbar-ios-background;
 
+  // toolbar on top, border on bottom (default)
+  @include hairline(bottom, $toolbar-ios-border-color);
+
+  // toolbar on bottom, border on top
+  &.toolbar-bottom:after {
+    top: 0;
+    bottom: auto;
+  }
+}
+
+
+.toolbar-ios {
+
   .toolbar [side="primary"] {
     @include flex-order(map-get($toolbar-order-ios, 'primary'));
   }
   .toolbar [side="secondary"] {
     @include flex-order(map-get($toolbar-order-ios, 'secondary'));
   }
-  .toolbar-title {
+
+  ion-title {
     @include flex-order(map-get($toolbar-order-ios, 'title'));
     font-size: $toolbar-ios-title-font-size;
     text-align: center;
@@ -52,13 +67,4 @@ $toolbar-ios-button-background-color:       transparent !default;
     background: $toolbar-ios-button-background-color;
   }
 
-  // toolbar on top, border on bottom (default)
-  @include hairline(bottom, $toolbar-ios-border-color);
-
-  // toolbar on bottom, border on top
-  &.toolbar-bottom:after {
-    top: 0;
-    bottom: auto;
-  }
-
 }

ionic/components/toolbar/toolbar-container.js

@@ -0,0 +1,18 @@
+import {ElementRef} from 'angular2/angular2'
+import {Directive} from 'angular2/src/core/annotations_impl/annotations';
+
+import {IonicComponent} from 'ionic/config/component'
+
+
+@Directive({
+  selector: '.toolbar-container'
+})
+export class ToolbarContainer {
+  constructor(elementRef: ElementRef) {
+    this.domElement = elementRef.domElement;
+    this.config = ToolbarContainer.config.invoke(this);
+  }
+}
+
+
+new IonicComponent(ToolbarContainer, {})

ionic/components/toolbar/toolbar.js

@@ -17,10 +17,8 @@ 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">
-        <div class="toolbar-inner-title">
         <content select="ion-title"></content>
       </div>
-      </div>
       <div class="toolbar-item toolbar-primary-item">
         <content select=".primary"></content>
       </div>
@@ -31,7 +29,13 @@ import {Platform} from 'ionic/platform/platform';
   `,
   directives: [ToolbarTitle]
 })
-export class Toolbar {}
+export class Toolbar {
+  constructor(elementRef: ElementRef) {
+    this.domElement = elementRef.domElement;
+    this.config = Toolbar.config.invoke(this);
+  }
+}
+new IonicComponent(Toolbar, {});
 
 
 @Component({
@@ -39,7 +43,7 @@ export class Toolbar {}
 })
 @View({
   template: `
-  <div class="toolbar-inner-title toolbar-title-hide">
+  <div class="toolbar-inner-title">
     <content></content>
   </div>`
 })

ionic/components/toolbar/toolbar.scss

@@ -15,12 +15,15 @@ $toolbar-title-flex-order: 5;
 $toolbar-secondary-flex-order: 10;
 
 
+.toolbar-container {
+  background: $toolbar-background;
+}
+
 ion-toolbar {
   /*@include flex-display();
   @include flex-direction(row);
   @include flex-align-items(center);
   @include flex-justify-content(space-between);*/
-  background: $toolbar-background;
 
   // by default ion-toolbar is hidden
   // and the transition animation will display it