navbar aside menu button

ionic/components/app/test/material/index.ts

@@ -5,9 +5,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<ion-nav-items primary>' +
-      '<button icon aside-toggle="menu"><i class="icon ion-navicon"></i></button>' +
-    '</ion-nav-items>' +
+    '<button aside-toggle="menu">' +
+      '<icon menu></icon>' +
+    '</button>' +
     '<ion-nav-items secondary>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
       '<button (^click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +

ionic/components/aside/test/basic/page1.html

@@ -1,11 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <ion-nav-items primary>
-    <button aside-toggle id="e2eHeaderToggleAside">
-      <icon menu></icon>
-    </button>
-  </ion-nav-items>
+  <button aside-toggle id="e2eHeaderToggleAside">
+    <icon menu></icon>
+  </button>
 
   <ion-title>
     Aside
@@ -13,7 +11,8 @@
 
 </ion-navbar>
 
-<ion-content #content class="padding">
+
+<ion-content #content padding>
 
   <h3>Page 1</h3>
 

ionic/components/button/button-icon.scss

@@ -28,6 +28,7 @@ button,
   icon {
     background: none;
     border: none;
+    pointer-events: none;
   }
 
   &[small] icon {

ionic/components/icon/icon.ts

@@ -37,28 +37,49 @@ export class Icon {
     config: IonicConfig,
     private renderer: Renderer
   ) {
-    let ele = elementRef.nativeElement;
+    this.eleRef = elementRef;
+    this.hostButton = hostButton;
+    this.config = config;
 
     this.mode = config.setting('iconMode');
 
     this.iconLeft = this.iconRight = this.iconOnly = false;
     this.ariaHidden = true;
+  }
+
+  /**
+   * TODO
+   */
+  onInit() {
+    let ele = this.eleRef.nativeElement;
 
     if (ele.hasAttribute('forward')) {
-      this.name = config.setting('forwardIcon');
-    }
+      this.name = this.config.setting('forwardIcon');
 
-    this.iconAttr = null;
-    for (let i = 0, l = ele.attributes.length; i < l; i++) {
-      if (ele.attributes[i].value === '' && /_|item-|is-active|class/.test(ele.attributes[i].name) !== true) {
-        this.iconAttr = ele.attributes[i].name;
+    } else if (this.mode == 'ios' && this.ios) {
+      this.name = this.ios;
+
+    } else if (this.mode == 'md' && this.md) {
+      this.name = this.md;
+
+    } else if (!this.name) {
+      for (let i = 0, l = ele.attributes.length; i < l; i++) {
+        if (ele.attributes[i].value === '' && /_|item-|is-active|class/.test(ele.attributes[i].name) !== true) {
+          this.name = ele.attributes[i].name;
+          break;
+        }
       }
     }
 
-    if (hostButton) {
-      // this icon is within a button
-      this.withinButton = true;
+    if (!this.name) return;
 
+    if (!(/^ion-/.test(this.name))) {
+      // not an exact icon being used
+      // add mode specific prefix
+      this.name = 'ion-' + this.mode + '-' + this.name;
+    }
+
+    if (this.hostButton) {
       // check if there is a sibling element (that's not aria hidden)
       let hasPreviousSiblingElement = !!ele.previousElementSibling;
       let hasNextSiblingElement = ele.nextElementSibling && ele.nextElementSibling.getAttribute('aria-hidden') !== 'true';
@@ -73,35 +94,13 @@ export class Icon {
 
       // tell the button there's a child icon
       // the button will set the correct css classes on itself
-      hostButton.registerIcon(this);
-    }
-  }
-
-  /**
-   * TODO
-   */
-  onInit() {
-    if (this.mode == 'ios' && this.ios) {
-      this.name = this.ios;
-
-    } else if (this.mode == 'md' && this.md) {
-      this.name = this.md;
-
-    } else {
-      this.name = (this.name ? this.name : this.iconAttr);
-
-      if (!(/^ion-/.test(this.name))) {
-        // not an exact icon being used
-        // add mode specific prefix
-        this.name = 'ion-' + this.mode + '-' + this.name;
-      }
+      this.hostButton.registerIcon(this);
     }
 
-    if (!this.name) return;
 
     // hide the icon when it's within a button
     // and the button isn't an icon only button
-    this.ariaHidden = (this.withinButton && !this.iconOnly);
+    this.ariaHidden = (this.hostButton && !this.iconOnly);
 
     this.update();
   }

ionic/components/material/button.ts

@@ -1,4 +1,4 @@
-import {ElementRef, Directive, onDestroy} from 'angular2/angular2';
+import {ElementRef, Directive} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {MaterialRippleEffect} from '../material/ripple';
@@ -7,8 +7,7 @@ import {MaterialRippleEffect} from '../material/ripple';
  * TODO
  */
 @Directive({
-  selector: 'button,[button]',
-  lifecycle: [onDestroy]
+  selector: 'button,[button]'
 })
 export class MaterialButton {
   /**
@@ -18,13 +17,12 @@ export class MaterialButton {
    */
   constructor(elementRef: ElementRef, config: IonicConfig) {
     this.elementRef = elementRef;
+    this.config = config;
+  }
 
-    if(config.setting('mdRipple')) {
-      this.ripple = new MaterialRippleEffect(this);
+  onInit() {
+    if (this.config.setting('mdRipple')) {
+      //this.ripple = new MaterialRippleEffect(this);
     }
   }
-
-  onDestroy() {
-
-  }
 }

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

@@ -26,6 +26,7 @@ import {ViewItem} from '../view/view-item';
           <span class="back-title" [text-content]="bbText"></span>
         </span>
       </button>
+      <ng-content select="[aside-toggle]"></ng-content>
       <div class="toolbar-title">
         <div class="toolbar-inner-title">
           <ng-content select="ion-title"></ng-content>
@@ -81,6 +82,7 @@ export class Navbar extends ToolbarBase {
     const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
     titleEle && this.app.title(titleEle.textContent);
   }
+
 }
 
 @Directive({

ionic/components/nav/test/button/index.ts

@@ -1,41 +0,0 @@
-import {Query, ViewQuery, QueryList, bootstrap, ElementRef, Component, Directive, View, Injectable, Renderer} from 'angular2/angular2';
-
-
-@Component({
-  selector: 'icon'
-})
-@View({
-  template: '♠'
-})
-class Icon {}
-
-
-@Directive({
-  selector: 'button'
-})
-class Button {
-  constructor(@Query(Icon) public icon: QueryList<Icon>) {
-    icon.onChange( ()=> {
-      console.log('button icon', icon);
-    });
-  }
-  onInit() {
-    console.log('Button icon', this.icon);
-  }
-}
-
-@Component({
-  selector: 'ion-app'
-})
-@View({
-  template: `
-    <button><icon></icon> Button</button>
-  `,
-  directives: [Button, Icon]
-})
-export class HelloCmp {
-
-}
-
-
-bootstrap(HelloCmp);

ionic/components/toolbar/modes/ios.scss

@@ -4,9 +4,10 @@
 
 $toolbar-order-ios: (
   back-button: 10,
-  primary: 20,
-  title: 30,
-  secondary: 40
+  aside-toggle: 20,
+  primary: 30,
+  title: 40,
+  secondary: 50
 );
 
 $toolbar-ios-height:                        4.4rem !default;
@@ -33,6 +34,10 @@ $toolbar-ios-title-font-size:               1.7rem !default;
     order: map-get($toolbar-order-ios, secondary);
   }
 
+  [aside-toggle] {
+    order: map-get($toolbar-order-ios, 'aside-toggle');
+  }
+
   ion-title {
     font-size: $toolbar-ios-title-font-size;
     font-weight: 500;

ionic/components/toolbar/toolbar.scss

@@ -4,9 +4,10 @@
 
 $toolbar-order: (
   backButton: 10,
-  title: 20,
-  primary: 30,
-  secondary: 40
+  aside-toggle: 20,
+  title: 30,
+  primary: 40,
+  secondary: 50
 );
 
 
@@ -75,6 +76,19 @@ ion-title {
   color: $toolbar-text-color;
 }
 
+.toolbar [aside-toggle] {
+  margin: 0;
+  padding: 0;
+  min-height: 32px;
+  min-width: 32px;
+  order: map-get($toolbar-order, 'aside-toggle');
+  box-shadow: none;
+}
+
+.toolbar [aside-toggle] icon {
+  padding: 0 0.9em;
+}
+
 .toolbar-item {
   transform: translateZ(0px);
 }

ionic/components/toolbar/toolbar.ts

@@ -51,12 +51,23 @@ export class ToolbarBase extends Ion  {
     return this._ttTxt;
   }
 
+  onAllChangesDone() {
+    if (this._queueAlign) {
+      this._queueAlign = false;
+      this._alignTitle();
+    }
+  }
+
   /**
    * TODO
    */
   alignTitle() {
+    this._queueAlign = (this.titleAlign === 'center');
+  }
+
+  _alignTitle() {
     // don't bother if we're not trying to center align the title
-    if (this.titleAlign !== 'center' || this.aligned) return;
+    if (this.aligned) return;
 
     // called after the navbar/title has had a moment to
     // finish rendering in their correct locations