apply interactive-table to work-packages-table

pull/3352/head
Jens Ulferts 9 years ago
parent e1f1c2d33e
commit c26a58fe2c
  1. 2
      frontend/app/templates/work_packages/sort_header.html
  2. 7
      frontend/app/templates/work_packages/work_packages_table.html
  3. 73
      frontend/app/work_packages/directives/work-packages-table-directive.js

@ -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"> <span title="{{ fullTitle }}" class="sort-header">
<a href="javascript://" <a href="javascript://"
ng-if="sortable" ng-if="sortable"

@ -1,6 +1,7 @@
<div class="work-packages-table--container" <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"> <table class="workpackages-table keyboard-accessible-list">
<colgroup> <colgroup>
<col highlight-col /> <col highlight-col />
@ -9,7 +10,7 @@
<thead> <thead>
<tr> <tr>
<th class="checkbox hide-when-print"> <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 <a href
alt="{{toggleRowsLabel}}" alt="{{toggleRowsLabel}}"
class="no-decoration-on-hover" class="no-decoration-on-hover"

@ -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'); 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() { scope.$watchCollection('columns', function() {
// force Browser rerender // force Browser rerender
element.hide().show(0); element.hide().show(0);

Loading…
Cancel
Save