GUI -- Tables with the "onos-fixed-header" directive automatically resize to fit the window (as well as having a fixed header row with scrolling body).
Change-Id: I230a9577f9a83ab9342414054e64afa181f4f1e9
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index 5b61b742..f288b07 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -21,7 +21,7 @@
/* ------ for summary-list tables ------ */
table.summary-list {
- margin: 20px 50px;
+ margin: 0px 50px 50px 50px;
font-size: 10pt;
border-spacing: 0;
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 5a76e0f..062318f 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -20,7 +20,8 @@
(function () {
'use strict';
- var $log;
+ var $window, fs,
+ bottomMargin = 200;
// Render a plain d3 table by giving it the div, a config file, and data
@@ -60,87 +61,92 @@
return table;
}
- // Functions for creating a fixed-header on a table (Angular Directive)
+ // Functions for creating a fixed header on a table (Angular Directive)
- function setColWidth(t) {
- var tHeaders, tdElement, colWidth;
+ function setTableWidth(t) {
+ var tHeaders, tdElement, colWidth, numCols,
+ winWidth = fs.windowSize().width;
tHeaders = t.selectAll('th');
+ numCols = tHeaders[0].length;
+ colWidth = Math.floor(winWidth/numCols);
- // select each td in the first row and set the header's width to the
- // corresponding td's width, if td is larger than header's width.
- tHeaders.each(function(thElement, index){
+ tHeaders.each(function(thElement, index) {
thElement = d3.select(this);
tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
- colWidth = tdElement.style('width');
- thElement.style('width', colWidth);
- tdElement.style('width', colWidth);
+ // if the header has no text in it,
+ // then make the column the width of the td element.
+ // (This looks good for icons)
+ if (!(thElement.html().length)) {
+ var tdSize = tdElement.style('width');
+ thElement.style('width', tdSize + 'px');
+ tdElement.style('width', tdSize + 'px');
+ }
+ else {
+ thElement.style('width', colWidth + 'px');
+ tdElement.style('width', colWidth + 'px');
+ }
});
}
- function setCSS(thead, tbody, height) {
+ function setTableHeight(thead, tbody) {
+ var winHeight = fs.windowSize().height;
+
thead.style('display', 'block');
tbody.style({'display': 'block',
- 'height': height || '500px',
+ 'height': ((winHeight - bottomMargin) + 'px'),
'overflow': 'auto'
});
}
function fixTable(t, th, tb, height) {
- setColWidth(t);
- setCSS(th, tb, height);
+ setTableWidth(t);
+ setTableHeight(th, tb, height);
}
angular.module('onosWidget')
- .factory('TableService', ['$log', function (_$log_) {
- $log = _$log_;
-
+ .factory('TableService', [function () {
return {
renderTable: renderTable
};
}])
- .directive('fixedHeader', ['$timeout', function ($timeout) {
- return {
- restrict: 'A',
- scope: {
- tableHeight: '@'
- },
+ // TODO: find another solution other than timeout for waiting for ng-repeat to end
+ .directive('onosFixedHeader', ['$window', '$timeout',
+ 'MastService', 'FnService',
+ function (_$window_, $timeout, mast, _fs_) {
+ return function (scope, element) {
+ $window = _$window_;
+ fs = _fs_;
+ var w = angular.element($window),
+ table = d3.select(element[0]);
- link: function (scope, element) {
- // TODO: look into other solutions than $timeout --
- // fixed-header directive called before ng-repeat was
- // finished; using $scope.$emit to notify this directive
- // to fire was not working.
- $timeout(function() {
- var table = d3.select(element[0]),
- thead = table.select('thead'),
- tbody = table.select('tbody');
+ scope.$watch(function () {
+ return {
+ h: window.innerHeight,
+ w: window.innerWidth
+ };
+ }, function (newVal) {
+ var thead = table.select('thead'),
+ tbody = table.select('tbody');
- // wait until the table is visible
- // (offsetParent returns null if display is "none")
- scope.$watch(
- function () {
- return (!(table.offsetParent === null));
- },
- function(newValue) {
- if (newValue === true) {
+ scope.windowHeight = newVal.h;
+ scope.windowWidth = newVal.w;
- // ensure thead and tbody have no display
- thead.style('display', null);
- tbody.style('display', null);
+ scope.setTableHW = function () {
+ $timeout(function () {
+ fixTable(table, thead, tbody);
+ }, 250);
+ };
+ }, true);
- $timeout(function () {
- fixTable(table, thead, tbody,
- scope.tableHeight);
- });
- }
- });
- }, 200);
- }
- };
- }]);
+ w.bind('onos-fixed-header', function () {
+ scope.$apply();
+ });
+ };
+
+ }]);
}());
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 6b34771..754aae9 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -1,7 +1,9 @@
<!-- Device partial HTML -->
<div id="ov-device">
- <h2>Device View</h2>
- <table class="summary-list" fixed-header>
+ <h2>Devices</h2>
+ <table class="summary-list"
+ onos-fixed-header
+ ng-style="setTableHW()">
<thead>
<tr>
<th></th>