Toolbar work

ionic/components/app/test/sink/index.js

@@ -7,7 +7,7 @@ import {Ionic, Toolbar, ViewContainer, Aside, List, Item, Content, Button} from
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Aside, List, ViewContainer, Item, Content, Button]
+  directives: [Aside, List, ViewContainer, Toolbar, Item, Content, Button]
 })
 export class IonicApp {
   constructor(elementRef: ElementRef) {

ionic/components/toolbar/extensions/ios.scss

@@ -0,0 +1,63 @@
+// iOS Navbar
+// --------------------------------------------------
+
+$toolbar-order-ios: (
+  primary: 20,
+  title: 30,
+  secondary: 40
+);
+
+$toolbar-ios-height:                        4.4rem !default;
+$toolbar-ios-background:                    #f7f7f8 !default;
+$toolbar-ios-border-color:                  #c4c4c4 !default;
+
+$toolbar-ios-title-font-size:               1.7rem !default;
+$toolbar-ios-button-font-size:              1.7rem !default;
+$toolbar-ios-button-text-color:             #007aff !default;
+$toolbar-ios-button-background-color:       transparent !default;
+
+
+.platform-ios .toolbar {
+
+  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-title {
+    order: map-get($toolbar-order-ios, 'title');
+  }
+
+  .toolbar-primary-item {
+    order: map-get($toolbar-order-ios, 'primary');
+  }
+
+  .toolbar-secondary-item {
+    order: map-get($toolbar-order-ios, 'secondary');
+  }
+
+  ion-title {
+    order: map-get($toolbar-order-ios, 'title');
+    text-align: center;
+    font-size: $toolbar-ios-title-font-size;
+    font-weight: 500;
+  }
+
+  .button {
+    font-size: $toolbar-ios-button-font-size;
+    color: $toolbar-ios-button-text-color;
+    border: none;
+    padding: 0;
+    margin: 0 10px;
+    min-height: $toolbar-ios-height;
+    min-width: 0;
+    background: $toolbar-ios-button-background-color;
+  }
+}

ionic/components/toolbar/toolbar.js

@@ -5,6 +5,7 @@ import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
 import * as dom from '../../util/dom';
+import {IonicComponent} from 'ionic/config/component'
 import {Platform} from 'ionic/platform/platform';
 
 
@@ -12,32 +13,25 @@ import {Platform} from 'ionic/platform/platform';
   selector: 'ion-toolbar'
 })
 @View({
-  template: `
-    <div class="toolbar-inner">
-      <div class="toolbar-title">
-        <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>
-      </div>
-      <div class="toolbar-item toolbar-secondary-item">
-        <content select="[secondary]"></content>
-      </div>
-    </div>
-  `,
+  template: `<div class="toolbar-inner"><content></content></div>`,
+  /*
+  <div class="toolbar-title"><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></div><div class="toolbar-item toolbar-secondary-item"><content select="[secondary]"></content></div></div>`,
+  */
   directives: []
 })
 export class Toolbar {
   constructor(elementRef:ElementRef, ngZone:NgZone) {
     this.domElement = elementRef.domElement;
+    Toolbar.config.invoke(this);
 
+    /*
+    TODO(mlynch): Revive this when the above content select don't throw errors.
     ngZone.runOutsideAngular(() => {
       setTimeout(() => {
         this.alignTitle();
       }, 32);
     });
+    */
   }
 
   alignTitle() {
@@ -88,6 +82,9 @@ export class Toolbar {
 
 }
 
+new IonicComponent(Toolbar, {
+});
+
 
 /*
   Used to find and register headers in a view, and this directive's

ionic/ionic.scss

@@ -65,7 +65,8 @@
   "components/search-bar/extensions/ios",
   "components/segment/extensions/ios",
   "components/switch/extensions/ios",
-  "components/tabs/extensions/ios";
+  "components/tabs/extensions/ios",
+  "components/toolbar/extensions/ios";
 
 
 // Material Design Components