Action menu material

ionic/components/action-menu/action-menu.ts

@@ -6,7 +6,7 @@
 * The ActionMenu is a modal menu with options to select based on an action.
 */
 
-import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
+import {View, Injectable, NgFor, NgIf, CSSClass} from 'angular2/angular2';
 
 import {TapClick} from '../button/button';
 import {Overlay} from '../overlay/overlay';
@@ -21,7 +21,7 @@ import * as util from 'ionic/util';
       <div class="action-menu-container">
         <div class="action-menu-group action-menu-options">
           <div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>
-          <button (click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option">{{b.text}}</button>
+          <button (^click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option"><i class="icon" [class]="b.icon" *ng-if="b.icon"></i> {{b.text}}</button>
           <button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">{{destructiveText}}</button>
         </div>
         <div class="action-menu-group action-menu-cancel" *ng-if="cancelText">
@@ -29,7 +29,7 @@ import * as util from 'ionic/util';
         </div>
       </div>
     </div>`,
-  directives: [NgFor, NgIf, TapClick]
+  directives: [NgFor, NgIf, CSSClass, TapClick]
 })
 class ActionMenuDirective {
 

ionic/components/action-menu/extensions/material.scss

@@ -1,32 +1,38 @@
 
+
 .action-menu[mode="md"] {
+  margin: 0;
 
   .action-menu-backdrop.active {
     background-color: rgba(0,0,0,0.2);
   }
 
-  .action-menu {
+
+  .action-menu-container {
     margin: 0;
+  }
 
-    .action-menu-title,
-    button,
-    [button] {
-      text-align: left;
-      border-color: transparent;
-      font-size: 16px;
-      color: inherit;
-    }
+  .action-menu-title,
+  .action-menu-option {
+    text-align: left;
+    border-color: transparent;
+    font-size: 16px;
+    color: inherit;
+  }
 
-    .action-menu-title {
-      font-size: 14px;
-      padding: 16px;
-      color: #666;
-    }
+  .action-menu-title {
+    font-size: 14px;
+    padding: 16px;
+    color: #666;
+  }
 
-    button.activated,
-    [button].activated {
-      background: #e8e8e8;
-    }
+  .action-menu-option .icon {
+    font-size: 24px;
+    margin: 0 32px;
+  }
+
+  .action-menu-option.activated {
+    background: #e8e8e8;
   }
 
   .action-menu-group {
@@ -47,5 +53,4 @@
     }
 
   }
-
 }

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

@@ -1,6 +1,6 @@
 import {Component, Directive} from 'angular2/angular2';
 
-import {App, IonicApp, IonicView, Register} from 'ionic/ionic';
+import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
@@ -10,7 +10,7 @@ import {App, IonicApp, IonicView, Register} from 'ionic/ionic';
     '</ion-nav-items>' +
     '<ion-nav-items secondary>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
-      '<button><i class="icon ion-android-more-vertical"></i></button>' +
+      '<button (^click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
     '</ion-nav-items>' +
   '</ion-navbar>' +
   '<ion-content>' +
@@ -30,13 +30,39 @@ import {App, IonicApp, IonicView, Register} from 'ionic/ionic';
   '</ion-content>'
 })
 export class FirstPage {
-  constructor(app: IonicApp) {
+  constructor(app: IonicApp, actionMenu: ActionMenu) {
     this.app = app;
+    this.actionMenu = actionMenu;
   }
   toggleMenu() {
     console.log('TOGGLE');
     this.app.getComponent('myAside').toggle();
   }
+  showMoreMenu() {
+    this.actionMenu.open({
+      buttons: [
+        { icon: 'ion-android-share-alt', text: 'Share' },
+        { icon: 'ion-arrow-move', text: 'Move' }
+      ],
+      destructiveText: 'Delete',
+      titleText: 'Modify your album',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled');
+      },
+      destructiveButtonClicked: () => {
+        console.log('Destructive clicked');
+      },
+      buttonClicked: function(index) {
+        console.log('Button clicked', index);
+        if(index == 1) { return false; }
+        return true;
+      }
+    }).then(actionMenuRef => {
+      this.actionMenuRef = actionMenuRef;
+    });
+
+  }
 }
 
 @App({

ionic/ionic.scss

@@ -74,6 +74,7 @@
 // Material Design Components
 @import
   "components/app/extensions/material",
+  "components/action-menu/extensions/material",
   "components/alert/extensions/material",
   "components/button/extensions/material",
   "components/item/extensions/material",