fixed #449: pfTableView with toolbar - inconsistent with design

Author: dtaylor113

src/table/table.less

@@ -14,6 +14,7 @@ table.dataTable.no-footer {
   padding: 0px;
 }
 table.dataTable {
+  margin: 0;
   thead {
     .sorting_asc {
       background-image: none !important;

src/table/tableview/examples/table-view-with-toolbar.js

@@ -381,7 +381,8 @@
       $scope.toolbarConfig = {
         filterConfig: $scope.filterConfig,
         sortConfig: $scope.sortConfig,
-        actionsConfig: $scope.toolbarActionsConfig
+        actionsConfig: $scope.toolbarActionsConfig,
+        isTableView: true
       };
 
       $scope.tableConfig = {

src/table/tableview/table-view.html

@@ -1,4 +1,4 @@
-<span>
+<div class="container-fluid">
   <table ng-if="$ctrl.config.itemsAvailable !== false"
          datatable="ng" dt-options="$ctrl.dtOptions" dt-column-defs="$ctrl.dtColumnDefs" dt-instance="$ctrl.dtInstanceCallback"
          class="table-view-container table table-striped table-bordered table-hover dataTable">
@@ -48,4 +48,4 @@
     </tbody>
   </table>
   <pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig"></pf-empty-state>
-</span>
+</div>

src/toolbars/examples/toolbar.js

@@ -43,6 +43,7 @@
  *           </ul>
  *         <li>.actionsInclude  - (Boolean) set to true if using the actions transclude to add custom action buttons (only available if using Angular 1.5 or later)
  *       </ul>
+ *       <li>.isTableView  - (Boolean) set to true if toolbar is only being used with a table view and viewsConfig is not defined.
  *   </ul>
  *
  * @example

src/toolbars/toolbar-component.js

@@ -21,6 +21,7 @@ angular.module('patternfly.toolbars').component('pfToolbar', {
       angular.extend(ctrl, {
         viewSelected: viewSelected,
         isViewSelected: isViewSelected,
+        isTableViewSelected: isTableViewSelected,
         checkViewDisabled: checkViewDisabled,
         addFilter: addFilter,
         handleAction: handleAction
@@ -45,7 +46,7 @@ angular.module('patternfly.toolbars').component('pfToolbar', {
         ctrl.config.viewsConfig.viewsList = angular.copy(ctrl.config.viewsConfig.views);
 
         if (!ctrl.config.viewsConfig.currentView) {
-          ctrl.config.viewsConfig.currentView = ctrl.config.viewsConfig.viewsList[0];
+          ctrl.config.viewsConfig.currentView = ctrl.config.viewsConfig.viewsList[0].id;
         }
       }
     }
@@ -61,6 +62,10 @@ angular.module('patternfly.toolbars').component('pfToolbar', {
       return ctrl.config.viewsConfig && (ctrl.config.viewsConfig.currentView === viewId);
     }
 
+    function isTableViewSelected () {
+      return ctrl.config.viewsConfig ? (ctrl.config.viewsConfig.currentView === 'tableView') : ctrl.config.isTableView;
+    }
+
     function checkViewDisabled (view) {
       return ctrl.config.viewsConfig.checkViewDisabled && ctrl.config.viewsConfig.checkViewDisabled(view);
     }

src/toolbars/toolbar.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
-  <div class="row toolbar-pf">
+  <div class="row toolbar-pf" ng-class="{'table-view-pf-toolbar': $ctrl.isTableViewSelected()}">
     <div class="col-sm-12">
-      <form class="toolbar-pf-actions" ng-class="{'no-filter-results': !$ctrl.config.filterConfig}">
+      <form class="toolbar-pf-actions" ng-class="{'no-filter': !$ctrl.config.filterConfig}">
         <div class="form-group toolbar-apf-filter">
           <pf-filter-fields config="$ctrl.config.filterConfig" ng-if="$ctrl.config.filterConfig" add-filter-fn="$ctrl.addFilter"></pf-filter-fields>
         </div>

src/toolbars/toolbars.less

@@ -26,6 +26,7 @@
   opacity: 0;
   pointer-events: none;
 }
-.toolbar-pf-actions.no-filter-results {
+.toolbar-pf-actions.no-filter {
+  margin-left: -30px;
   margin-bottom: 10px;
 }

test/toolbars/toolbar.spec.js

@@ -282,12 +282,6 @@ describe('Directive:  pfToolbar', function () {
     var active = element.find('.active');
 
     expect(viewSelector.length).toBe(1);
-    expect(active.length).toBe(0);
-
-    $scope.config.viewsConfig.currentView = $scope.config.viewsConfig.views[0].id;
-    $scope.$apply();
-
-    active = element.find('.active');
     expect(active.length).toBe(1);
   });
 
@@ -297,7 +291,7 @@ describe('Directive:  pfToolbar', function () {
     var listSelector = element.find('.toolbar-pf-view-selector .btn-link');
 
     expect(viewSelector.length).toBe(1);
-    expect(active.length).toBe(0);
+    expect(active.length).toBe(1);
     expect(listSelector.length).toBe(5);
 
     eventFire(listSelector[0], 'click');