toolbar thingz

ionic/components/app/structure.scss

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -28,7 +29,7 @@ ion-app {
   }
 
   .toolbar-container {
-    // container of many toolbars for each view in the .nav
+    // container of many toolbars for each view in the ion-nav
     position: relative;
     width: 100%;
     min-height: 50px;
@@ -39,11 +40,12 @@ ion-app {
     @include flex-order($flex-order-toolbar-bottom);
   }
 
-  .toolbar {
-    // one view's toolbar, sibling to many view toolbars insde of .toolbar-container
+  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%;
   }
@@ -63,29 +65,21 @@ ion-app {
     @include flex-order($flex-order-view-content);
   }
 
-  .nav-item-cover-parent {
-    // .nav-item that should completely cover siblings and parent
-    top: -50px;
-    height: 100vh;
-  }
-
   .nav-item {
-    // by default .nav-item is hidden
-    // and the transition animation will display it
-    display: none;
-  }
-
-  .nav-item,
-  .nav-item-child {
-    // user created view, contained by .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;
@@ -94,6 +88,7 @@ ion-app {
   }
 
   .scroll-content {
+    // extra div to allow overflow scrolling
     position: absolute;
     top: 0;
     right: 0;

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

@@ -1,14 +1,14 @@
 
-<div *ion-header>
+<ion-toolbar *header>
 
-    <h1 class="toolbar-title">First Page: Instance {{ val }}</h1>
+  <ion-title>First Page: {{ val }}</ion-title>
 
-</div>
+</ion-toolbar>
 
 
 <ion-content class="padding" style="background:lightblue">
 
-  <p>First Page: Instance {{ val }}</p>
+  <p>First Page: {{ val }}</p>
 
   <p>
     <button (click)="push()">Push (Go to 2nd)</button>

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

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

@@ -1,9 +1,9 @@
 
-<div *ion-header>
+<ion-toolbar *header>
 
-  <h1 class="toolbar-title">Second Page</h1>
+  <ion-title>Second Page</ion-title>
 
-</div>
+</ion-toolbar>
 
 
 <ion-content class="padding" style="background:green">

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

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

@@ -1,9 +1,9 @@
 
-<div *ion-header>
+<ion-toolbar *header>
 
-  <h1 class="toolbar-title">Third Page</h1>
+  <ion-title>Third Page</ion-title>
 
-</div>
+</ion-toolbar>
 
 
 <ion-content class="padding" style="background:yellow">

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

ionic/components/toolbar/toolbar.js

@@ -1,4 +1,5 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
@@ -8,20 +9,21 @@ import {NavItem} from 'ionic/ionic';
 import {Platform} from 'ionic/platform/platform';
 
 
-@Directive({
-  selector: '[ion-header]'
+@Component({
+  selector: 'ion-toolbar'
 })
-export class Header {
-
-  constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
-    navItem.addHeader(protoViewRef);
+@View({
+  template: `<content></content>`
+})
+export class Toolbar {
+  constructor() {
+    console.log('ion-toolbar');
   }
-
 }
 
 
 @Component({
-  selector: '.toolbar-title'
+  selector: 'ion-title'
 })
 @View({
   template: `
@@ -30,9 +32,8 @@ export class Header {
   </div>`
 })
 export class ToolbarTitle {
-  constructor(
-    element: ElementRef
-  ) {
+  constructor(element: ElementRef) {
+    console.log('ion-title');
     // this.domElement = element.domElement;
 
     // // TODO find better way to get parent toolbar
@@ -84,3 +85,18 @@ export class ToolbarTitle {
   }
 
 }
+
+
+/*
+  Used to find and register headers in a view, and this directive's
+  content will be moved up to the common toolbar location, and created
+  using the same context as the view's content area.
+*/
+@Directive({
+  selector: 'template[header]'
+})
+export class Header {
+  constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
+    navItem.addHeader(protoViewRef);
+  }
+}