Merge pull request #106 from dtaylor113/cardUpdates

Fix for #103 - pfCard directive should not show heading area if no t…

Author: Walden Raines

dist/angular-patternfly.js

@@ -400,6 +400,10 @@ angular.module('patternfly.card').directive('pfCard', function () {
         }
       };
 
+      $scope.showHeader = function () {
+        return ($scope.headTitle || $scope.showFilterInHeader());
+      };
+
       $scope.showFilterInHeader = function () {
         return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
       };
@@ -4675,7 +4679,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
 
 
   $templateCache.put('card/basic/card.html',
-    "<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div ng-class=\"!showTitlesSeparator || showTitlesSeparator === 'true' ? 'card-pf-heading' : 'card-pf-heading-no-bottom'\"><div class=card-pf-table><div class=card-pf-cell><h2 class=card-pf-title ng-class=\"{'card-pf-filter-header': showFilterInHeader()}\">{{headTitle}}</h2></div><div class=\"card-pf-cell text-right\" ng-if=showFilterInHeader()><div class=\"dropdown btn-group\"><div ng-include=\"'card/basic/card-filter.html'\"></div></div></div></div></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div><div class=card-pf-footer ng-if=footer><div class=card-pf-table><div class=card-pf-cell><a href={{footer.href}} ng-if=footer.href><span class=\"{{footer.iconClass}} card-pf-footer-text\" ng-if=footer.iconClass></span> <span class=card-pf-footer-text ng-if=footer.text>{{footer.text}}</span></a> <a ng-if=\"footer.callBackFn && !footer.href\" ng-click=footerCallBackFn()><span class=\"{{footer.iconClass}} card-pf-footer-text\" ng-if=footer.iconClass></span> <span class=card-pf-footer-text ng-if=footer.text>{{footer.text}}</span></a> <span ng-if=\"!footer.href && !footer.callBackFn\"><span class=\"{{footer.iconClass}} card-pf-footer-text\" ng-if=footer.iconClass></span> <span class=card-pf-footer-text ng-if=footer.text>{{footer.text}}</span></span></div><div class=\"card-pf-cell text-right\" ng-if=\"filter && filter.filters && (!filter.position || filter.position === 'footer')\"><div class=\"dropdown btn-group\"><div ng-include=\"'card/basic/card-filter.html'\"></div></div></div></div></div></div>"
+    "<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div ng-if=showHeader() ng-class=\"!showTitlesSeparator || showTitlesSeparator === 'true' ? 'card-pf-heading' : 'card-pf-heading-no-bottom'\"><div class=card-pf-table><div class=card-pf-cell><h2 class=card-pf-title ng-class=\"{'card-pf-filter-header': showFilterInHeader()}\">{{headTitle}}</h2></div><div class=\"card-pf-cell text-right\" ng-if=showFilterInHeader()><div class=\"dropdown btn-group\"><div ng-include=\"'card/basic/card-filter.html'\"></div></div></div></div></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div><div class=card-pf-footer ng-if=footer><div class=card-pf-table><div class=card-pf-cell><a href={{footer.href}} ng-if=footer.href><span class=\"{{footer.iconClass}} card-pf-footer-text\" ng-if=footer.iconClass></span> <span class=card-pf-footer-text ng-if=footer.text>{{footer.text}}</span></a> <a ng-if=\"footer.callBackFn && !footer.href\" ng-click=footerCallBackFn()><span class=\"{{footer.iconClass}} card-pf-footer-text\" ng-if=footer.iconClass></span> <span class=card-pf-footer-text ng-if=footer.text>{{footer.text}}</span></a> <span ng-if=\"!footer.href && !footer.callBackFn\"><span class=\"{{footer.iconClass}} card-pf-footer-text\" ng-if=footer.iconClass></span> <span class=card-pf-footer-text ng-if=footer.text>{{footer.text}}</span></span></div><div class=\"card-pf-cell text-right\" ng-if=\"filter && filter.filters && (!filter.position || filter.position === 'footer')\"><div class=\"dropdown btn-group\"><div ng-include=\"'card/basic/card-filter.html'\"></div></div></div></div></div></div>"
   );
 
 }]);

dist/angular-patternfly.min.js

@@ -176,6 +176,10 @@ angular.module('patternfly.card').directive('pfCard', function () {
         }
       };
 
+      $scope.showHeader = function () {
+        return ($scope.headTitle || $scope.showFilterInHeader());
+      };
+
       $scope.showFilterInHeader = function () {
         return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
       };

src/card/basic/card.directive.js

@@ -1,5 +1,6 @@
 <div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
-  <div ng-class="!showTitlesSeparator || showTitlesSeparator === 'true' ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
+  <div ng-if="showHeader()"
+       ng-class="!showTitlesSeparator || showTitlesSeparator === 'true' ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
     <div class="card-pf-table">
       <div class="card-pf-cell">
         <h2 class="card-pf-title" ng-class="{'card-pf-filter-header': showFilterInHeader()}">{{headTitle}}</h2>

src/card/basic/card.html

@@ -215,6 +215,18 @@ describe('Directive: pfCard', function() {
       expect(filterItem.html()).toContain('Last 30 Days');
     });
 
+    it("should not show the header if no title or filter specified", function() {
+
+      element = compileCard('<div pf-card>Inner content</div>', $scope);
+
+      // should NOT find any header artifacts
+      cardClass = angular.element(element).find('.card-pf-heading');
+      expect(cardClass.size()).toBe(0);
+
+      // should find filters in the header
+      cardClass = angular.element(element).find('.card-pf-heading-no-bottom');
+      expect(cardClass.size()).toBe(0);
+    });
   });
 
 });