Add ability to set a class or hide menu actions in List View

Author: jeff-phillips-18

misc/examples.css

@@ -130,3 +130,7 @@ hr {
 .example-warning-background {
   background-color: #ec7a08 !important;
 }
+
+.dropdown-kebab-pf.red .btn-link {
+  color: red;
+}

src/views/listview/list-view-directive.js

@@ -43,6 +43,8 @@
  *     <li>.isDisabled - (Boolean) set to true to disable the action
  *     <li>.isSeparator - (Boolean) set to true if this is a placeholder for a separator rather than an action
  *   </ul>
+ * @param {function (item))} hideMenuForItemFn function(item) Used to hide all menu actions for a particular item
+ * @param {function (item))} menuClassForItemFn function(item) Used to specify a class for an item's dropdown kebab
  * @param {function (action, item))} updateMenuActionForItemFn function(action, item) Used to update a menu action based on the current item
  * @param {object} customScope Object containing any variables/functions used by the transcluded html, access via customScope.<xxx>
  * @example
@@ -55,7 +57,9 @@
                           action-buttons="actionButtons"
                           enable-button-for-item-fn="enableButtonForItemFn"
                           menu-actions="menuActions"
-                          update-menu-action-for-item-fn="updateMenuActionForItemFn">
+                          update-menu-action-for-item-fn="updateMenuActionForItemFn"
+                          menu-class-for-item-fn="getMenuClass"
+                          hide-menu-for-item-fn="hideMenuActions">
           <div class="list-view-pf-description">
             <div class="list-group-item-heading">
               {{item.name}}
@@ -238,6 +242,18 @@
           },
         ];
 
+        $scope.getMenuClass = function (item) {
+          var menuClass = "";
+          if (item.name === "Jim Beam") {
+            menuClass = 'red';
+          }
+          return menuClass;
+        };
+
+        $scope.hideMenuActions = function (item) {
+          return (item.name === "Marie Edwards");
+        };
+
         var performAction = function (action, item) {
           $scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
         };
@@ -315,6 +331,8 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
       actionButtons: '=?',
       enableButtonForItemFn: '=?',
       menuActions: '=?',
+      hideMenuForItemFn: '=?',
+      menuClassForItemFn: '=?',
       updateMenuActionForItemFn: '=?',
       actions: '=?',
       updateActionForItemFn: '=?',
@@ -391,6 +409,24 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
           }
         };
 
+        $scope.getMenuClassForItem = function (item) {
+          var menuClass = '';
+          if (angular.isFunction($scope.menuClassForItemFn)) {
+            menuClass = $scope.menuClassForItemFn(item);
+          }
+
+          return menuClass;
+        };
+
+        $scope.hideMenuForItem = function (item) {
+          var hideMenu = false;
+          if (angular.isFunction($scope.hideMenuForItemFn)) {
+            hideMenu = $scope.hideMenuForItemFn(item);
+          }
+
+          return hideMenu;
+        };
+
         $scope.setupActions = function (item, event) {
           // Ignore disabled items completely
           if ($scope.checkDisabled(item)) {

src/views/listview/list-view.html

@@ -15,7 +15,7 @@
         <div ng-if="actionButton.include" class="actionButton.includeClass" ng-include src="actionButton.include"></div>
         <span ng-if="!actionButton.include">{{actionButton.name}}</span>
       </button>
-      <div class="{{dropdownClass}} pull-right dropdown-kebab-pf"
+      <div class="{{dropdownClass}} pull-right dropdown-kebab-pf {{getMenuClassForItem(item)}} {{hideMenuForItem(item) ? 'invisible' : ''}}"
            id="kebab_{{$index}}"
            ng-if="menuActions && menuActions.length > 0">
         <button class="btn btn-link dropdown-toggle" type="button"

styles/angular-patternfly.css

@@ -342,6 +342,11 @@
   margin: 0 5px;
 }
 
+.dropdown-kebab-pf.invisible {
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* Utilization bar chart - Animate load */
 .utilization-bar-chart-pf .progress-bar {
   -webkit-transition: width .75s ease-in-out;

test/views/listview/list-view.spec.js

@@ -49,6 +49,18 @@ describe('Directive:  pfDataList', function () {
       return (action.name !=='Action 2') || (item.uuid !== '2');
     };
 
+    $scope.hideMenuForItemFn = function(item) {
+      return (item.uuid === '2');
+    };
+
+    $scope.getMenuClassForItemFn = function(item) {
+      var menuClass = '';
+      if (item.uuid === '3') {
+        menuClass = 'test-class';
+      }
+      return menuClass;
+    };
+
     performedAction = undefined;
     var performAction = function (action) {
       performedAction = action;
@@ -107,6 +119,8 @@ describe('Directive:  pfDataList', function () {
       '  action-buttons="actionButtons" ' +
       '  enable-button-for-item-fn="enableButtonForItemFn" ' +
       '  menu-actions="menuActions" ' +
+      '  menu-class-for-item-fn="getMenuClassForItemFn" ' +
+      '  hide-menu-for-item-fn="hideMenuForItemFn" ' +
       '  update-menu-action-for-item-fn="updateActionForItemFn">' +
       '<div class="nameLabel1">{{item.name}}</div>' +
       '</div>';
@@ -483,4 +497,20 @@ describe('Directive:  pfDataList', function () {
 
     expect(actionArea.length).toBe(0);
   });
-})
+
+  it ('should hide kebab menu when specified', function () {
+    var kebabs  = element.find('.dropdown-kebab-pf');
+    expect(kebabs.length).toBe(5);
+
+    var alteredKebab = element.find('.dropdown-kebab-pf.invisible');
+    expect(alteredKebab.length).toBe(1);
+  });
+
+  it ('should add a class to the kebab menu when specified', function () {
+    var kebabs  = element.find('.dropdown-kebab-pf');
+    expect(kebabs.length).toBe(5);
+
+    var alteredKebab = element.find('.dropdown-kebab-pf.test-class');
+    expect(alteredKebab.length).toBe(1);
+  });
+});