toolbar stuff and things

src/components/app/_z-index.scss

@@ -3,7 +3,8 @@
 // --------------------------------------------------
 
 
-$z-index-action-menu:          110;
+$z-index-action-menu:            110;
-$z-index-alert:                100;
+$z-index-alert:                  100;
-$z-index-content:              1;
+$z-index-content:                1;
-$z-index-list-border:          50;
+$z-index-list-border:            50;
+$z-index-toolbar-border:         20;

src/components/app/ionic.scss

@@ -41,7 +41,8 @@
 // Android Components
 @import
   "../list/extensions/android",
-  "../item/extensions/android";
+  "../item/extensions/android",
+  "../toolbar/extensions/android";
 
 
 // iOS Components
@@ -50,7 +51,8 @@
   "../list/extensions/ios",
   "../item/extensions/ios",
   "../radio/extensions/ios",
-  "../switch/extensions/ios";
+  "../switch/extensions/ios",
+  "../toolbar/extensions/ios";
 
 
 // Icons

src/components/toolbar/extensions/android.scss

@@ -0,0 +1,18 @@
+
+// Android Toolbar
+// --------------------------------------------------
+
+
+.toolbar-android {
+
+  .spacer {
+    @include flex(none);
+  }
+
+  .title {
+    position: static;
+    margin: 0;
+    text-align: left;
+  }
+
+}

src/components/toolbar/extensions/ios.scss

@@ -0,0 +1,53 @@
+
+// iOS Toolbar
+// --------------------------------------------------
+
+$toolbar-ios-height:                  44px !default;
+$toolbar-ios-background:              #f7f7f8 !default;
+$toolbar-ios-border-color:            #c4c4c4 !default;
+
+$toolbar-ios-title-font-size:         17px !default;
+$toolbar-ios-button-font-size:        17px !default;
+$toolbar-ios-button-color:            #007aff !default;
+
+
+.toolbar-ios {
+  height: $toolbar-ios-height;
+  background: $toolbar-ios-background;
+
+  &:after {
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    z-index: $z-index-toolbar-border;
+    display: block;
+
+    width: 100%;
+    height: 1px;
+
+    background-color: $toolbar-ios-border-color;
+
+    @include transform-origin(50%, 100%);
+
+    content: '';
+  }
+
+  .title {
+    font-size: $toolbar-ios-title-font-size;
+    text-align: center;
+  }
+
+  .button {
+    font-size: $toolbar-ios-button-font-size;
+    color: $toolbar-ios-button-color;
+    border: none;
+    padding: 0;
+    margin: 0 10px;
+    min-height: $toolbar-ios-height;
+    min-width: 0;
+    background: transparent;
+  }
+
+}

src/components/toolbar/test/basic/e2e.js

@@ -0,0 +1 @@
+

src/components/toolbar/test/basic/main.html

@@ -6,15 +6,15 @@
   </ion-view-title>
 
   <ion-nav-items side="primary">
-    <button>p1</button>
+    <button class="button">p1</button>
-    <button>p2</button>
+    <button class="button">p2</button>
-    <button>p3</button>
+    <button class="button">p3</button>
-    <button>p4</button>
+    <button class="button">p4</button>
   </ion-nav-items>
 
   <ion-nav-items side="secondary">
-    <button>s1</button>
+    <button class="button">s1</button>
-    <button>s2</button>
+    <button class="button">s2</button>
   </ion-nav-items>
 
   <ion-content>

src/components/toolbar/toolbar.js

@@ -8,39 +8,38 @@ import {NgElement, Component, Template} from 'angular2/angular2'
 })
 @Template({
   inline: `
-    <div class="bar bar-ios">
+    <div class="bar-items">
-      <div class="bar-items">
+      <button class="button back-button bar-item">
-        <button class="back-button bar-item">
+        <div class="back-button-icon">&lt;</div>
-          <div class="back-button-icon">&lt;</div>
+        <div class="back-button-text">
-          <div class="back-button-text">
+          <div class="back-default">Back</div>
-            <div class="back-default">Back</div>
+          <div class="back-title"></div>
-            <div class="back-title"></div>
-          </div>
-        </button>
-        <div class="title">
-          <div class="inner-title">
-            {{ title }}
-            <content select="ion-view-title"></content>
-          </div>
         </div>
-        <div class="bar-item bar-primary-item" style="background:red">
+      </button>
-          <content select="ion-nav-items[side=primary]"></content>
+      <div class="title">
-        </div>
+        <div class="inner-title">
-        <div class="spacer"></div>
+          {{ title }}
-        <div class="bar-item bar-secondary-item" style="background:green">
+          <content select="ion-view-title"></content>
-          <content select="ion-nav-items[side=secondary]"></content>
         </div>
       </div>
+      <div class="bar-item bar-primary-item">
+        <content select="ion-nav-items[side=primary]"></content>
+      </div>
+      <div class="spacer"></div>
+      <div class="bar-item bar-secondary-item">
+        <content select="ion-nav-items[side=secondary]"></content>
+      </div>
     </div>`
 })
 export class Toolbar {
   constructor(@NgElement() ngEle:NgElement) {
     this.ele = ngEle.domElement
+    this.ele.classList.add('toolbar')
+    this.ele.classList.add('toolbar-ios')
 
     window.requestAnimationFrame(() => {
       this.alignTitle()
     })
-
   }
 
   alignTitle(ele) {

src/components/toolbar/toolbar.scss

@@ -2,7 +2,7 @@
 // Toolbar
 // --------------------------------------------------
 
-.bar {
+.toolbar {
   position: relative;
   @include flex-display();
   @include flex-direction(row);
@@ -19,8 +19,8 @@
 }
 
 .bar-items {
-  @include flex(1);
   @include flex-display();
+  @include flex(1);
   @include flex-justify-content(space-between);
 }
 
@@ -36,10 +36,9 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: maroon;
 
-  @include flex(1);
   @include flex-display();
+  @include flex(1);
   @include flex-align-items(center);
 }
 
@@ -49,33 +48,15 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  background: blue;
 }
 
 .back-button {
   @include flex-display();
-  background: purple;
 
   .back-button-icon {
-    background: orange;
   }
 }
 
 .bar-items > .spacer {
   @include flex(1);
 }
-
-.bar-android {
-
-  .spacer {
-    @include flex(none);
-  }
-
-  .title {
-    position: static;
-    margin: 0;
-    text-align: left;
-  }
-
-}
-