Merge pull request #100 from dtaylor113/cardUpdates

pfCard: added footer action bar and filter, and Fixed #99

Author: Walden Raines

Gruntfile.js

@@ -123,7 +123,7 @@ module.exports = function (grunt) {
           html5Mode: false,
           template: 'grunt-ngdocs-index.tmpl',
           styles: ['lib/patternfly/dist/css/patternfly.css', 'lib/patternfly/dist/css/patternfly-additions.css',
-            'dist/styles/angular-patternfly.css', 'misc/demo.css']
+            'dist/styles/angular-patternfly.css', 'misc/demo.css', 'misc/pf-docs.css']
         },
 
         all: ['src/**/*.js']

dist/angular-patternfly.js

@@ -227,26 +227,142 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
  * @name patternfly.card.directive:pfCard
  * @restrict A
  * @element ANY
- * @param {headTitle=} Title for the card - required
- * @param {subTitle=} Subtitle for the card - optional
- * @param {showTopBorder=} Show Top Border, true shows top border, false (default) hides top border - optional
- *
+ * @param {string} headTitle Title for the card
+ * @param {string=} subTitle Sub-Title for the card
+ * @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
+ * @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
+ * True (default) shows the line, false hides the line
+ * @param {object=} footer footer configuration properties:<br/>
+ * <ul style='list-style-type: none'>
+ * <li>.iconClass  - (optional) the icon to show on the bottom left of the footer panel
+ * <li>.text       - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
+ * <li>.href       - (optional) the href link to navigate to when the footer href is clicked
+ * <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
+ * </ul>
+ * *Note: If a href link and a callBackFn are specified, the href link will be called
+ * @param {object=} filter filter configuration properties:<br/>
+ * <ul style='list-style-type: none'>
+ * <li>.filters    - drop down items for the filter.
+ *<pre class=''>
+ *  Ex:  'filters' : [{label:'Last 30 Days', value:'30'},
+ *                    {label:'Last 15 Days', value:'15'},
+ *                    {label:'Today', value:'today'}]</pre>
+ * <li>.defaultFilter - integer, 0 based index into the filters array
+ * <li>.callBackFn - user defined function to call when a filter is selected
+ * </ul>
  * @description
  * Directive for easily displaying a card with html content
  *
  * @example
- <example module="patternfly.card">
+ <example module="demo">
 
  <file name="index.html">
-    <div pf-card head-title="My Card Title" sub-title="My card subtitle">
-      <button>Click Me</button>
-    </div>
+   <div ng-controller="ChartCtrl">
+     <div pf-card head-title="Card Title" sub-title="Card Subtitle" filter="filterConfigHeader" style="width: 50%">
+       [Card Contents] <button>Click Me</button> Timeframe filter in header
+     </div>
 
-    <div pf-card head-title="Card With Top Border" sub-title="My card subtitle" show-top-border="true">
-      <button>Click Me</button>
-    </div>
+     <div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
+          footer="footerConfig" filter="filterConfig" style="width: 50%">
+       [Card Contents] <button>Click Me</button> Footer with Link & Timeframe filter
+     </div>
+
+     <div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
+          show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
+       <div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
+       <div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
+       <div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
+     </div>
+   </div>
  </file>
+ <file name="script.js">
+ angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+
+       $scope.footerConfig = {
+         'iconClass' : 'fa fa-flag',
+         'text'      : 'View All Events',
+         'callBackFn': function () {
+            alert("Footer Callback Fn Called");
+          }
+       }
+
+       $scope.filterConfigHeader = {
+         'filters' : [{label:'Last 30 Days', value:'30'},
+                      {label:'Last 15 Days', value:'15'},
+                      {label:'Today', value:'today'}],
+         'callBackFn': function (f) {
+            alert("Header Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+          },
+        'position' : 'header'
+       }
+
+       $scope.filterConfig = {
+         'filters' : [{label:'Last 30 Days', value:'30'},
+                      {label:'Last 15 Days', value:'15'},
+                      {label:'Today', value:'today'}],
+         'callBackFn': function (f) {
+            alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+          },
+        'defaultFilter' : '1'
+       }
+
+       var today = new Date();
+       var dates = ['dates'];
+       for (var d = 20 - 1; d >= 0; d--) {
+         dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
+       }
+
+       $scope.configVirtual = {
+         'chartId'      : 'virtualTrendsChart',
+         'layout'       : 'inline',
+         'trendLabel'   : 'Virtual Disk I/O',
+         'units'        : 'GB',
+         'tooltipType'  : 'percentage'
+       };
+
+       $scope.dataVirtual = {
+         'total': '250',
+         'xData': dates,
+         'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
+       };
+
+       $scope.configPhysical = {
+         'chartId'      : 'physicalTrendsChart',
+         'layout'       : 'inline',
+         'trendLabel'   : 'Physical Disk I/O',
+         'units'        : 'MHz',
+         'tooltipType'  : 'percentage'
+       };
+
+       $scope.dataPhysical = {
+         'total': '250',
+         'xData': dates,
+         'yData': ['used', '20', '20', '35', '20', '20', '87', '14', '20', '25', '28', '44', '56', '78', '56', '67', '88', '76', '65', '87', '16']
+       };
+
+       $scope.configMemory = {
+         'chartId'      : 'memoryTrendsChart',
+         'layout'       : 'inline',
+         'trendLabel'   : 'Memory Utilization',
+         'units'        : 'GB',
+         'tooltipType'  : 'percentage'
+       };
 
+       $scope.dataMemory = {
+         'total': '250',
+         'xData': dates,
+         'yData': ['used', '20', '20', '35', '70', '20', '87', '14', '95', '25', '28', '44', '56', '66', '16', '67', '88', '76', '65', '87', '56']
+       };
+
+       $scope.actionBarConfig = {
+         'iconClass' : 'fa fa-plus-circle',
+         'text'      : 'Add New Cluster',
+         'callBackFn': function () {
+            alert("Footer Callback Fn Called");
+          }
+       }
+     });
+ </file>
  </example>
  */
 angular.module('patternfly.card').directive('pfCard', function () {
@@ -259,8 +375,35 @@ angular.module('patternfly.card').directive('pfCard', function () {
     scope: {
       headTitle: '@',
       subTitle: '@?',
-      showTopBorder: '@?'
-    }
+      showTopBorder: '@?',
+      showTitlesSeparator: '@?',
+      footer: '=?',
+      filter: '=?'
+    },
+    controller: ["$scope", function ($scope) {
+      if ($scope.filter && !$scope.currentFilter) {
+        if ($scope.filter.defaultFilter) {
+          $scope.currentFilter = $scope.filter.filters[$scope.filter.defaultFilter];
+        } else {
+          $scope.currentFilter = $scope.filter.filters[0];
+        }
+      }
+
+      $scope.footerCallBackFn = function () {
+        $scope.footerCallBackResult = $scope.footer.callBackFn();
+      };
+
+      $scope.filterCallBackFn = function (f) {
+        $scope.currentFilter = f;
+        if ($scope.filter.callBackFn) {
+          $scope.filterCallBackResult = $scope.filter.callBackFn(f);
+        }
+      };
+
+      $scope.showFilterInHeader = function () {
+        return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
+      };
+    }]
   };
 });
 
@@ -1201,9 +1344,9 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
  * @param {boolean=} showXAxis override sparkline config settings for showing the X Axis
  * @param {boolean=} showYAxis override sparkline config settings for showing the Y Axis
  * @example
- <example module="patternfly.charts">
+ <example module="demo">
  <file name="index.html">
-   <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
+   <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 55%;">
      <div class="col-md-12">
        <div pf-trends-chart config="config" chart-data="data"
             show-x-axis="custShowXAxis" show-y-axis="custShowYAxis"></div>
@@ -1252,10 +1395,17 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
          <button ng-click="addDataPoint()">Add Data Point</button>
        </div>
      </div>
-   </div>
+     <hr class="col-md-12">
+     <div class="col-md-12">
+       <div pf-card head-title="Cluster Utilization" show-top-border="true"
+            footer="footerConfig" filter="filterConfig">
+         <div pf-trends-chart config="config2" chart-data="data"></div>
+       </div>
+     </div>
+    </div>
  </file>
  <file name="script.js">
- angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {
+ angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
 
        $scope.config = {
          'chartId'      : 'exampleTrendsChart',
@@ -1268,6 +1418,32 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
          'tooltipType'  : 'percentage'
        };
 
+       $scope.config2 = {
+         'chartId'      : 'example2TrendsChart',
+         'title'        : 'Storage Capacity',
+         'layout'       : 'compact',
+         'valueType'    : 'actual',
+         'units'        : 'TB',
+         'tooltipType'  : 'percentage'
+       };
+
+       $scope.footerConfig = {
+         'iconClass' : 'fa fa-plus-circle',
+         'text'      : 'Add New Cluster',
+         'callBackFn': function () {
+            alert("Footer Callback Fn Called");
+          }
+       }
+
+       $scope.filterConfig = {
+         'filters' : [{label:'Last 30 Days', value:'30'},
+                      {label:'Last 15 Days', value:'15'},
+                      {label:'Today', value:'today'}],
+         'callBackFn': function (f) {
+            alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+          }
+       }
+
       var today = new Date();
       var dates = ['dates'];
       for (var d = 20 - 1; d >= 0; d--) {
@@ -4493,8 +4669,13 @@ angular.module('patternfly.views').directive('pfDataToolbar',
   );
 
 
+  $templateCache.put('card/basic/card-filter.html',
+    "<button type=button class=\"btn btn-default dropdown-toggle\" data-toggle=dropdown aria-haspopup=true aria-expanded=false>{{currentFilter.label}} <span class=caret></span></button><ul class=dropdown-menu><li ng-repeat=\"item in filter.filters\" ng-class=\"{'selected': item === currentFilter}\"><a role=menuitem tabindex=-1 ng-click=filterCallBackFn(item)>{{item.label}}</a></li></ul>"
+  );
+
+
   $templateCache.put('card/basic/card.html',
-    "<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div class=card-pf-heading><h2 class=card-pf-title>{{headTitle}}</h2></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div></div>"
+    "<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>"
   );
 
 }]);

dist/angular-patternfly.min.js

@@ -26,6 +26,20 @@
   top: -1px;
 }
 
+.card-pf-heading-no-bottom {
+  margin: 0 -20px 0px;
+  padding: 0 20px 0;
+}
+
+.card-pf-table {
+  display: table;
+  width: 100%;
+}
+
+.card-pf-cell {
+  display: table-cell;
+}
+
 .donut-chart-pf {
   width: 100%;
   float: left;
@@ -332,6 +346,7 @@
 .trend-flat-details-cell {
   display: table-cell;
   vertical-align: bottom;
+  min-width: 70px;
 }
 
 .trend-header-compact-pf {