menu-toggle updates

ionic/components/app/activator.ts

@@ -1,4 +1,4 @@
-import {raf, pointerCoord, hasPointerMoved} from './dom';
+import {raf, pointerCoord, hasPointerMoved} from '../../util/dom';
 
 
 export class Activator {
@@ -15,7 +15,7 @@ export class Activator {
     self.active = {};
     self.activatedClass = 'activated';
     self.deactivateTimeout = 180;
-    this.deactivateAttempt = 0;
+    self.deactivateAttempt = 0;
     self.pointerTolerance = 4;
     self.isTouch = false;
     self.disableClick = 0;
@@ -57,7 +57,6 @@ export class Activator {
 
     self.pointerMove = function(ev) {
       let moveCoord = pointerCoord(ev);
-      console.log('pointerMove', moveCoord, self.start)
 
       if ( hasPointerMoved(10, self.start, moveCoord) ) {
         self.pointerCancel();
@@ -249,19 +248,19 @@ export class Activator {
 
     setTimeout(function() {
       self.deactivate();
-    }, this.deactivateTimeout);
+    }, self.deactivateTimeout);
   }
 
   deactivate() {
     const self = this;
 
-    if (this.app.isTransitioning() && this.deactivateAttempt < 10) {
+    if (self.app.isTransitioning() && self.deactivateAttempt < 10) {
       // the app is actively transitioning, don't bother deactivating
       // anything this makes it easier on the GPU so it doesn't
       // have to redraw any buttons during a transition
       // retry
-      ++this.deactivateAttempt;
-      this.queueDeactivate();
+      ++self.deactivateAttempt;
+      self.queueDeactivate();
 
     } else {
       // not actively transitioning, good to deactivate any elements
@@ -278,7 +277,7 @@ export class Activator {
         }
       });
 
-      this.deactivateAttempt = 0;
+      self.deactivateAttempt = 0;
     }
 
   }

ionic/components/app/app.ts

@@ -6,7 +6,7 @@ import {IonicPlatform, Platform} from '../../platform/platform';
 import * as util from '../../util/util';
 
 // injectables
-import {Activator} from '../../util/activator';
+import {Activator} from './activator';
 import {ActionMenu} from '../action-menu/action-menu';
 import {Modal} from '../modal/modal';
 import {Popup} from '../popup/popup';

ionic/components/app/test/app.spec.ts

@@ -1,7 +0,0 @@
-import {Ion} from 'ionic/ion';
-
-export function run() {
-  it('should be true', () => {
-    expect(true).toBe(true);
-  });
-}

ionic/components/button/button.ts

@@ -5,7 +5,7 @@ import {Directive} from 'angular2/angular2';
  * TODO
  */
 @Directive({
-  selector: 'button,[button],[menu-toggle]',
+  selector: 'button,[button]',
   host: {
     '[class.icon-left]': 'iconLeft',
     '[class.icon-right]': 'iconRight',

ionic/components/menu/menu-toggle.ts

@@ -11,25 +11,20 @@ import {IonicApp} from '../app/app';
     'menuToggle'
   ],
   host: {
-    '(click)': 'toggle($event)',
-    'button': ''
+    '(click)': 'toggle($event)'
   }
 })
 export class MenuToggle {
 
   constructor(private app: IonicApp) {}
 
-  onInit() {
-    // Get the component with this toggleTarget tag, or use "menu" if none
-    this.menu = this.app.getComponent(this.menuToggle || 'menu');
-  }
-
   /**
   * TODO
   * @param {TODO} event  TODO
   */
   toggle(ev) {
-    this.menu && this.menu.toggle();
+    let menu = this.app.getComponent(this.menuToggle || 'menu');
+    menu && menu.toggle();
     ev.preventDefault();
     ev.stopPropagation();
   }

ionic/components/toolbar/modes/ios.scss

@@ -35,7 +35,6 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
   [menu-toggle] {
     order: map-get($toolbar-order-ios, 'menu-toggle');
-    margin-left: 10px;
   }
 
   ion-title {

ionic/components/toolbar/modes/material.scss

@@ -46,11 +46,16 @@ $toolbar-md-button-font-size:        1.4rem !default;
     min-width: 28px;
   }
 
-  a[menu-toggle],
+  [menu-toggle],
   [menu-toggle].activated {
-    margin: ($toolbar-padding * -1) 20px ($toolbar-padding * -1) 8px;
-    padding-bottom: $toolbar-padding / 2;
+    margin: ($toolbar-padding * -1) 0 ($toolbar-padding * -1) ($toolbar-padding * -1);
+    padding: 0 10px;
     height: $toolbar-md-height;
+    min-width: 60px;
+
+    icon {
+      font-size: 2.4rem;
+    }
   }
 
 }

ionic/components/toolbar/toolbar.scss

@@ -79,15 +79,18 @@ ion-title {
 }
 
 .toolbar [menu-toggle] {
-  margin: 0;
+  display: flex;
+  align-items: center;
+  margin: 0 6px;
   padding: 0;
-  min-width: 48px;
+  min-width: 36px;
   order: map-get($toolbar-order, 'menu-toggle');
   box-shadow: none;
 }
 
 .toolbar [menu-toggle] icon {
-  padding: 0 12px;
+  padding: 0 6px;
+  font-size: 2.8rem;
 }
 
 .toolbar-item {