feat(list): add support for md-menu

- Proxy Binding - Secondary Action Support - and a few more Fixes #3339
angular · Jan 5, 2016 · e84fdff · e84fdff
1 parent 8ef798f
commit e84fdff
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 3 deletions.
diff --git a/src/components/list/demoListControls/index.html b/src/components/list/demoListControls/index.html
@@ -20,6 +20,38 @@
 
   <md-divider></md-divider>
 
+  <md-subheader class="md-no-sticky">Secondary Menus</md-subheader>
+  <md-list-item>
+    <p>Click anywhere to fire the secondary action</p>
+
+    <md-menu>
+      <md-button class="md-icon-button">
+        <md-icon md-svg-icon="communication:message"></md-icon>
+      </md-button>
+      <md-menu-content width="4">
+        <md-menu-item>
+          <md-button>
+            Redial
+          </md-button>
+        </md-menu-item>
+        <md-menu-item>
+          <md-button>
+            Check voicemail
+          </md-button>
+        </md-menu-item>
+        <md-menu-divider></md-menu-divider>
+        <md-menu-item>
+          <md-button>
+            Notifications
+          </md-button>
+        </md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+  </md-list-item>
+
+  <md-divider></md-divider>
+
   <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
   <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
     <md-icon md-svg-icon="{{setting.icon}}"></md-icon>

diff --git a/src/components/list/list.js b/src/components/list/list.js
@@ -83,7 +83,7 @@ function mdListDirective($mdTheming) {
  * that is inside the list, but does not wrap the contents._
  */
 function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
-  var proxiedTypes = ['md-checkbox', 'md-switch'];
+  var proxiedTypes = ['md-checkbox', 'md-switch', 'md-menu'];
   return {
     restrict: 'E',
     controller: 'MdListController',
@@ -112,7 +112,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
       }
       wrapSecondary();
       setupToggleAria();
-
+      if (hasProxiedElement && proxyElement.nodeName === "MD-MENU") setupProxiedMenu();
 
       function setupToggleAria() {
         var toggleTypes = ['md-switch', 'md-checkbox'];
@@ -129,6 +129,22 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         }
       }
 
+      function setupProxiedMenu() {
+        var menuEl = angular.element(proxyElement);
+
+        if (proxyElement.parentNode.firstElementChild == proxyElement) {
+          menuEl.attr('md-position-mode', 'target target');
+        } else {
+          menuEl.attr('md-position-mode', 'target-right target');
+        }
+
+        var buttonEl = menuEl.find('md-button') || menuEl.find('button');
+        if (!buttonEl || !buttonEl[0].parentNode == menuEl[0]) return;
+
+        if (!buttonEl[0].hasAttribute('ng-click')) buttonEl[0].setAttribute('ng-click', '$mdOpenMenu($event)');
+        if (!buttonEl.attr('aria-label')) buttonEl.attr('aria-label', 'Open List Item Menu');
+      }
+
       function wrapIn(type) {
         var container;
         if (type == 'div') {
@@ -160,7 +176,8 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         if ( secondaryItem && (
             secondaryItem.hasAttribute('ng-click') ||
             ( tAttrs.ngClick &&
-            isProxiedElement(secondaryItem) )
+            isProxiedElement(secondaryItem) ) ||
+            secondaryItem.nodeName === 'MD-MENU'
           )) {
           tEl.addClass('md-with-secondary');
           tEl.append(secondaryItem);
@@ -272,6 +289,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
             if (!parentButton && firstChild.contains(e.target)) {
               angular.forEach(proxies, function(proxy) {
                 if (e.target !== proxy && !proxy.contains(e.target)) {
+                  if (proxy.nodeName === 'MD-MENU') proxy = proxy.children[0];
                   angular.element(proxy).triggerHandler('click');
                 }
               });

diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -153,6 +153,20 @@ md-list-item, md-list-item .md-list-item-inner {
     margin-right: -6px;
   }
 
+  & > md-menu:first-child {
+    button.md-button.md-icon-button {
+      margin: 0 23px 0 -6px;
+    }
+  }
+
+  & > md-menu:not(:first-child),
+  md-menu.md-secondary {
+
+    button.md-button.md-icon-button {
+      margin: 0 -12px 0 0;
+    }
+  }
+
   button.md-button.md-secondary-container {
     background-color: transparent;
     align-self: center;

diff --git a/src/components/list/list.spec.js b/src/components/list/list.spec.js
@@ -53,6 +53,27 @@ describe('mdListItem directive', function() {
 
   });
 
+  it('should forward click events on the md-menu trigger button', function() {
+    var template =
+      '<md-list-item>' +
+        '<md-menu>' +
+          '<md-button ng-click="openMenu()"></md-button>' +
+        '</md-menu>' +
+      '</md-list-item>';
+
+    var listItem = setup(template);
+    var cntr = listItem[0].querySelector('div');
+    var openMenu = jasmine.createSpy('openMenu');
+
+    $rootScope.openMenu = openMenu;
+
+    if (cntr && cntr.click) {
+      cntr.click();
+      expect(openMenu).toHaveBeenCalled();
+    }
+
+  });
+
   it('forwards click events for md-switch', function() {
     var listItem = setup('<md-list-item><md-switch ng-model="modelVal"></md-switch></md-list-item>');
     var cntr = listItem[0].querySelector('div');