toolbar updates

ionic/components/app/structure.scss

@@ -46,39 +46,6 @@ ion-app,
 
 }
 
-@-webkit-keyframes rotation {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-  }
-}
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-ion-loading-icon {
-  display: flex;
-  align-self: center;
-  margin: auto;
-
-  font-family: 'Ionicons';
-  &:before {
-    content: "\f44e";
-  }
-  font-size: 128px;
-  color: #666666;
-
-  animation: rotation 45s infinite linear;
-  -webkit-animation: rotation 45s infinite linear;
-
-}
-
 ion-nav {
   height: 100%;
 }
@@ -115,9 +82,3 @@ ion-pane {
   flex: 1;
   order: $flex-order-view-content;
 }
-
-ion-toolbar {
-  display: flex;
-  min-height: 4.4rem;
-  background: white;
-}

ionic/components/app/util.scss

@@ -124,3 +124,30 @@ $swipe-handle-bottom:              70px !default;
     transform: translate3d(0px, 0px, 0px);
   }
 }
+
+
+// Loading Icon
+// --------------------------------------------------
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+ion-loading-icon {
+  display: flex;
+  align-self: center;
+  margin: auto;
+
+  font-family: 'Ionicons';
+  &:before {
+    content: "\f44e";
+  }
+  font-size: 128px;
+  color: #666666;
+
+  animation: rotation 45s infinite linear;
+}

ionic/components/item/extensions/ios.scss

@@ -9,7 +9,11 @@ $item-ios-accessory-color:       #8e8e93 !default;
 $item-ios-border-color:          $list-ios-border-color !default;
 
 
-.item.item-ios {
+.list-ios {
+  margin-top: -1px;
+}
+
+.list-ios .item {
   background: $item-ios-background-color;
   min-height: $item-ios-min-height;
   padding-left: $item-ios-padding-left;

ionic/components/item/item.ts

@@ -6,7 +6,10 @@ import {dom} from 'ionic/util';
 
 
 @Component({
-  selector: 'ion-item'
+  selector: 'ion-item',
+  host: {
+    'class': 'item'
+  }
 })
 @View({
   template: `

ionic/components/list/list.ts

@@ -1,5 +1,6 @@
 import {ElementRef, onInit} from 'angular2/angular2';
 
+import {Ion} from '../ion';
 import {IonicDirective} from '../../config/annotations';
 import {ListVirtualScroll} from './virtual';
 import * as util from 'ionic/util';
@@ -13,13 +14,15 @@ import * as util from 'ionic/util';
     'content'
   ]
 })
-export class List {
+export class List extends Ion {
   constructor(elementRef: ElementRef) {
+    super(elementRef);
     this.ele = elementRef.nativeElement;
   }
 
   onInit() {
-    if(util.isDefined(this.virtual)) {
+    List.applyConfig(this);
+    if (util.isDefined(this.virtual)) {
       console.log('Content', this.content);
       console.log('Virtual?', this.virtual);
       console.log('Items?', this.items.length, 'of \'em');

ionic/components/nav-bar/nav-bar.scss

@@ -2,25 +2,10 @@
 // Navbar
 // --------------------------------------------------
 
-$navbar-order: (
-  back-button: 10,
-  title: 20,
-  primary: 30,
-  secondary: 40
-);
-
 
 ion-navbar {
+  @extend ion-toolbar;
   position: absolute;
-  width: 100%;
-  height: 100%;
-  min-height: 4.4rem;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  order: $flex-order-toolbar-top;
 
   transform: translate3d(100%, 0px, 0px);
   &.show-navbar {
@@ -28,13 +13,8 @@ ion-navbar {
   }
 }
 
-.navbar-inner {
-  display: flex;
-  width: 100%;
-}
-
 .back-button {
-  order: map-get($navbar-order, 'back-button');
+  order: 10;
   transform: translateZ(0px);
 
   display: none;
@@ -47,43 +27,3 @@ ion-navbar {
   display: flex;
   align-items: center;
 }
-
-.navbar-title {
-  flex: 1;
-  order: map-get($navbar-order, 'title');
-
-  display: flex;
-  align-items: center;
-
-  transform: translateZ(0px);
-}
-
-.navbar-inner-title {
-  width: 100%;
-  padding: 0 15px;
-}
-
-ion-title {
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.navbar-item {
-  transform: translateZ(0px);
-}
-
-.navbar-primary-item {
-  order: map-get($navbar-order, 'primary');
-}
-
-.navbar-secondary-item {
-  order: map-get($navbar-order, 'secondary');
-}
-
-.navbar button,
-.navbar [button] {
-  background: transparent;
-  border: none;
-}

ionic/components/nav-bar/nav-bar.ts

@@ -1,16 +1,18 @@
 import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
+import {Ion} from '../ion';
+import {IonicComponent} from '../../config/annotations';
 import {ViewItem} from '../view/view-item';
 import * as dom from '../../util/dom';
 
 
-@Component({
+@IonicComponent({
   selector: 'ion-navbar'
 })
 @View({
   template: `
-    <div class="navbar-inner">
+    <div class="toolbar-inner">
       <button class="back-button button">
         <icon class="back-button-icon ion-ios-arrow-back"></icon>
         <span class="back-button-text">
@@ -18,15 +20,15 @@ import * as dom from '../../util/dom';
           <span class="back-title" [inner-text]="bbText"></span>
         </span>
       </button>
-      <div class="navbar-title">
+      <div class="toolbar-title">
-        <div class="navbar-inner-title">
+        <div class="toolbar-inner-title">
           <content select="ion-title"></content>
         </div>
       </div>
-      <div class="navbar-item navbar-primary-item">
+      <div class="toolbar-item toolbar-primary-item">
         <content select="[primary]"></content>
       </div>
-      <div class="navbar-item navbar-secondary-item">
+      <div class="toolbar-item toolbar-secondary-item">
         <content select="[secondary]"></content>
       </div>
     </div>
@@ -38,8 +40,9 @@ import * as dom from '../../util/dom';
     forwardRef(() => NavbarItem)
   ]
 })
-export class Navbar {
+export class Navbar extends Ion {
   constructor(item: ViewItem, elementRef: ElementRef) {
+    super(elementRef);
     this.eleRef = elementRef;
     this.itemEles = [];
     item.navbarView(this);
@@ -48,6 +51,10 @@ export class Navbar {
     this.bbText = '';
   }
 
+  onInit() {
+    Navbar.applyConfig(this);
+  }
+
   element() {
     return this.eleRef;
   }
@@ -90,8 +97,8 @@ export class Navbar {
   alignTitle() {
     // called after the navbar/title has had a moment to
     // finish rendering in their correct locations
-    const navbarEle = this.eleRef.nativeElement;
+    const toolbarEle = this.eleRef.nativeElement;
-    const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title'));
+    const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title'));
 
     // don't bother if there's no title element
     if (!titleEle) return;
@@ -104,7 +111,7 @@ export class Navbar {
 
     // get all the dimensions
     const titleOffsetLeft = titleEle.offsetLeft;
-    const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
+    const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
 
     let marginLeft = 0;
     let marginRight = 0;
@@ -119,7 +126,7 @@ export class Navbar {
 
     if ((marginLeft || marginRight) && margin !== this._ttMargin) {
       // only do an update if it has to
-      const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title'));
+      const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title'));
       innerTitleEle.style.margin = this._ttMargin = margin;
     }
   }
@@ -161,20 +168,20 @@ class BackButtonText {
 }
 
 @Directive({
-  selector: '.navbar-title'
+  selector: '.toolbar-title'
 })
 class Title {
-  constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
+  constructor(@Parent() toolbar: Navbar, elementRef: ElementRef) {
-    navbar.titleElement(elementRef);
+    toolbar.titleElement(elementRef);
   }
 }
 
 @Directive({
-  selector: '.navbar-item'
+  selector: '.toolbar-item'
 })
 class NavbarItem {
-  constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
+  constructor(@Parent() toolbar: Navbar, elementRef: ElementRef) {
-    navbar.itemElements(elementRef);
+    toolbar.itemElements(elementRef);
   }
 }
 

ionic/components/scroll/pull-to-refresh.ts

@@ -54,8 +54,8 @@ export class Refresher {
     this.scrollChild = sc;
 
     this._touchMoveListener = this._handleTouchMove.bind(this);
-    this._touchEndListener = this._handleTouchEnd.bind(this));
+    this._touchEndListener = this._handleTouchEnd.bind(this);
-    this._handleScrollListener = this._handleScroll.bind(this));
+    this._handleScrollListener = this._handleScroll.bind(this);
     sc.addEventListener('touchmove', this._touchMoveListener);
     sc.addEventListener('touchend', this._touchEndListener);
     sc.addEventListener('scroll', this._handleScrollListener);

ionic/components/toolbar/toolbar.scss

@@ -1,5 +1,5 @@
 
-// Navbar
+// Toolbar
 // --------------------------------------------------
 
 $toolbar-order: (
@@ -10,14 +10,20 @@ $toolbar-order: (
 
 
 ion-toolbar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 4.4rem;
+
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  position: relative;
+  order: $flex-order-toolbar-top;
 }
 
 .toolbar-inner {
+  display: flex;
   width: 100%;
 }
 
@@ -27,7 +33,24 @@ ion-toolbar {
 
   display: flex;
   align-items: center;
-  margin: 0 0 2px;
+
+  transform: translateZ(0px);
+}
+
+.toolbar-inner-title {
+  width: 100%;
+  padding: 0 15px;
+}
+
+ion-title {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.toolbar-item {
+  transform: translateZ(0px);
 }
 
 .toolbar-primary-item {
@@ -38,24 +61,8 @@ ion-toolbar {
   order: map-get($toolbar-order, 'secondary');
 }
 
-ion-toolbar ion-title {
-  display: block;
-  overflow: hidden;
-}
-
-.toolbar-inner-title {
-  width: 100%;
-  padding: 0 15px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .toolbar button,
 .toolbar [button] {
   background: transparent;
   border: none;
 }
-
-.toolbar-title-hide {
-  opacity: 0;
-}

ionic/components/toolbar/toolbar.ts

@@ -10,23 +10,23 @@ import * as dom from '../../util/dom';
 })
 @View({
   template: `
-    <div class="navbar-inner">
+    <div class="toolbar-inner">
-      <div class="navbar-title">
+      <div class="toolbar-title">
-        <div class="navbar-inner-title">
+        <div class="toolbar-inner-title">
           <content select="ion-title"></content>
         </div>
       </div>
-      <div class="navbar-item navbar-primary-item">
+      <div class="toolbar-item toolbar-primary-item">
         <content select="[primary]"></content>
       </div>
-      <div class="navbar-item navbar-secondary-item">
+      <div class="toolbar-item toolbar-secondary-item">
         <content select="[secondary]"></content>
       </div>
     </div>
   `,
   directives: [
-    forwardRef(() => Title),
+    forwardRef(() => ToolbarTitle),
-    forwardRef(() => NavbarItem)
+    forwardRef(() => ToolbarItem)
   ]
 })
 export class Toolbar extends Ion {
@@ -68,8 +68,8 @@ export class Toolbar extends Ion {
   alignTitle() {
     // called after the navbar/title has had a moment to
     // finish rendering in their correct locations
-    const navbarEle = this.eleRef.nativeElement;
+    const toolbarEle = this.eleRef.nativeElement;
-    const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title'));
+    const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title'));
 
     // don't bother if there's no title element
     if (!titleEle) return;
@@ -82,7 +82,7 @@ export class Toolbar extends Ion {
 
     // get all the dimensions
     const titleOffsetLeft = titleEle.offsetLeft;
-    const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
+    const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
 
     let marginLeft = 0;
     let marginRight = 0;
@@ -97,7 +97,7 @@ export class Toolbar extends Ion {
 
     if ((marginLeft || marginRight) && margin !== this._ttMargin) {
       // only do an update if it has to
-      const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title'));
+      const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title'));
       innerTitleEle.style.margin = this._ttMargin = margin;
     }
   }
@@ -106,9 +106,9 @@ export class Toolbar extends Ion {
 
 
 @Directive({
-  selector: '.navbar-title'
+  selector: '.toolbar-title'
 })
-class Title {
+class ToolbarTitle {
   constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) {
     toolbar.titleElement(elementRef);
   }
@@ -116,9 +116,9 @@ class Title {
 
 
 @Directive({
-  selector: '.navbar-item'
+  selector: '.toolbar-item'
 })
-class NavbarItem {
+class ToolbarItem {
   constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) {
     toolbar.itemElements(elementRef);
   }