apply interactive-table to work-packages-table

frontend/app/templates/work_packages/sort_header.html

@@ -1,4 +1,4 @@
-<div class="sort-header-outer">
+<div class="sort-header-outer generic-table--sort-header-outer">
   <span title="{{ fullTitle }}" class="sort-header">
     <a href="javascript://"
        ng-if="sortable"

frontend/app/templates/work_packages/work_packages_table.html

@@ -1,6 +1,7 @@
 <div class="work-packages-table--container"
-  ng-class="{ '-with-footer': displaySums }">
+  ng-class="{ '-with-footer': displaySums }"
-  <div class="work-packages-table--results-container" ng-if="rows.length">
+  interactive-table>
+  <div class="work-packages-table--results-container generic-table--results-container" ng-if="rows.length">
     <table class="workpackages-table keyboard-accessible-list">
       <colgroup>
         <col highlight-col />
@@ -9,7 +10,7 @@
       <thead>
         <tr>
           <th class="checkbox hide-when-print">
-            <div class="work-packages-table--header-outer">
+            <div class="work-packages-table--header-outer generic-table--sort-header-outer">
               <a href
                  alt="{{toggleRowsLabel}}"
                  class="no-decoration-on-hover"

frontend/app/work_packages/directives/work-packages-table-directive.js

@@ -65,79 +65,6 @@ module.exports = function(I18n, WorkPackagesTableService, $window, $timeout, fla
         scope.toggleRowsLabel = checked ? I18n.t('js.button_uncheck_all') : I18n.t('js.button_check_all');
       });
 
-      function getTable() {
-        return element.find('table');
-      }
-
-      function getInnerContainer() {
-        return element.find('.work-packages-table--results-container');
-      }
-
-      function getBackgrounds() {
-        return element.find('.work-packages-table--header-background,' +
-        '.work-packages-table--footer-background');
-      }
-
-      function getHeadersFooters() {
-        return element.find(
-          '.sort-header-outer,' +
-          '.work-packages-table--header-outer,' +
-          '.work-packages-table--footer-outer'
-        );
-      }
-
-      function setTableContainerWidths() {
-        // adjust overall containers
-        var tableWidth = getTable().width(),
-          scrollBarWidth = 16;
-
-        // account for a possible scrollbar
-        if (tableWidth > document.documentElement.clientWidth - scrollBarWidth) {
-          tableWidth += scrollBarWidth;
-        }
-        if (tableWidth > element.width()) {
-          // force containers to the width of the table
-          getInnerContainer().width(tableWidth);
-          getBackgrounds().width(tableWidth);
-        } else {
-          // ensure table stretches to container sizes
-          getInnerContainer().css('width', '100%');
-          getBackgrounds().css('width', '100%');
-        }
-      }
-
-      function setHeaderFooterWidths() {
-        getHeadersFooters().each(function() {
-          var parentWidth = angular.element(this).parent().width();
-          angular.element(this).css('width', parentWidth + 'px');
-        });
-      }
-
-      function invalidateWidths() {
-        getInnerContainer().css('width', 'auto');
-        getBackgrounds().css('width', 'auto');
-        getHeadersFooters().each(function() {
-          angular.element(this).css('width', 'auto');
-        });
-      }
-
-      var setTableWidths = function() {
-        $timeout(function() {
-          invalidateWidths();
-          setTableContainerWidths();
-          setHeaderFooterWidths();
-        });
-      };
-
-      $timeout(setTableWidths);
-      angular.element($window).on('resize', _.debounce(setTableWidths, 50));
-      scope.$on('$stateChangeSuccess', function() {
-        $timeout(setTableWidths, 200);
-      });
-      scope.$on('openproject.layout.navigationToggled', function() {
-        $timeout(setTableWidths, 200);
-      });
-
       scope.$watchCollection('columns', function() {
         // force Browser rerender
         element.hide().show(0);