홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
e7399f3b 1 parent c0e8bfa9

GUI -- Cleaned up code for practice scrollable table, added tableHeight as a par… 

…ameter to the directive.

Change-Id: I2f2187e0b1a8a4fdb2d05187bb1d708724aeca99
Inline Side-by-side
Showing 2 changed files with 193 additions and 19 deletions
......@@ -44,6 +44,10 @@
color: darkred;
}
table {
height: 200px;
}
</style>
</head>
......@@ -51,7 +55,7 @@
<body ng-app="practiceTable">
<h2>Scrolling Table Practice</h2>
<div>
<table fixed-header>
<table table-height="200px" fixed-header>
<thead>
<tr>
<th>URI</th>
......@@ -68,6 +72,107 @@
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
......@@ -86,6 +191,83 @@
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
......
......@@ -21,7 +21,7 @@
(function () {
'use strict';
function setColWidth($log, t) {
function setColWidth(t) {
var tHeaders, tdElement, colWidth;
tHeaders = t.selectAll('th');
......@@ -36,28 +36,20 @@
thElement.style('width', colWidth);
tdElement.style('width', colWidth);
//thElement.style('color', 'blue');
//tdElement.style('color', 'red');
});
}
function setCSS(thead, tbody) {
function setCSS(thead, tbody, height) {
thead.style('display', 'block');
tbody.style({'display': 'block',
'height': '100px',
'height': height || '500px',
'overflow': 'auto'
});
}
function trimTable(tbody) {
}
function fixTable($log, t, th, tb) {
setColWidth($log, t);
setCSS(th, tb);
trimTable(tb);
function fixTable(t, th, tb, height) {
setColWidth(t);
setCSS(th, tb, height);
}
angular.module('practiceTable', [])
......@@ -65,6 +57,9 @@
.directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
return {
restrict: 'A',
scope: {
tableHeight: '@'
},
link: function (scope, element, attrs) {
var table = d3.select(element[0]),
......@@ -76,19 +71,16 @@
function () { return (!(table.offsetParent === null)); },
function (newValue, oldValue) {
if (newValue === true) {
$log.log('table is visible');
// ensure thead and tbody have no display
thead.style('display', null);
tbody.style('display', null);
$timeout(function() {
$log.log('timeout is over');
fixTable($log, table, thead, tbody);
fixTable(table, thead, tbody, scope.tableHeight);
});
}
});
$log.log('fixedHeader directive has been created');
}
};
}]);
......