GUI -- summary-list table CSS edited to look cleaner.
Code to integrate directive into d3 created table -- WIP Change-Id: I182ad1c66fdce36bb4097459e55a5271d47b700c
Showing
4 changed files
with
88 additions
and
22 deletions
... | @@ -232,36 +232,77 @@ | ... | @@ -232,36 +232,77 @@ |
232 | 232 | ||
233 | angular.module('practiceTable', ['onosWidget']) | 233 | angular.module('practiceTable', ['onosWidget']) |
234 | 234 | ||
235 | - .controller('showTableCtrl', ['$log', 'TableService', | 235 | + .controller('showTableCtrl', ['$log', '$scope', '$rootScope', |
236 | - function ($log, ts) { | 236 | + '$timeout', 'TableService', |
237 | - ts.renderTable(d3.select('#tableDiv'), config, deviceData); | 237 | + function ($log, $scope, $rootScope, $timeout, ts) { |
238 | + var table = ts.renderTable(d3.select('#tableDiv'), config, deviceData); | ||
239 | + | ||
240 | + // --- commented out code below were various attempts at $apply --- | ||
241 | + // will delete unneeded dependencies once we have figured out which ones we need | ||
242 | + | ||
243 | + //$timeout(function () { | ||
244 | + // $log.log('inside timeout'); | ||
245 | + // //$scope.$watch('table', function (newVal, oldVal) { | ||
246 | + // $scope.$apply(); | ||
247 | + // //}); | ||
248 | + // }, 1000); | ||
249 | + | ||
250 | + //$scope.$applyAsync(); | ||
251 | + | ||
252 | + //$scope.$apply(function () { | ||
253 | + // ts.renderTable(d3.select('#tableDiv'), config, deviceData); | ||
254 | + //}); | ||
255 | + | ||
256 | + //$log.log($scope); | ||
257 | + | ||
258 | + //$scope.$watch('table', function(newVal, oldVal) { | ||
259 | + // //if (newVal === oldVal) { $log.log('hello'); return; } | ||
260 | + // $scope.$apply(); | ||
261 | + //}); | ||
262 | + // | ||
263 | + //$timeout(function () { | ||
264 | + // $log.log("in timeout in controller"); | ||
265 | + // $rootScope.$watch(function () { | ||
266 | + // return (table); | ||
267 | + // }, | ||
268 | + // function(newValue, oldValue) { | ||
269 | + // if(newValue) { | ||
270 | + // $log.log('hello??'); | ||
271 | + // //$rootScope.$apply(); | ||
272 | + // } | ||
273 | + // } | ||
274 | + // ); | ||
275 | + // //$scope.$apply(table); | ||
276 | + // $log.log("after scope.apply")}); | ||
238 | }]) | 277 | }]) |
239 | 278 | ||
240 | - .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) { | 279 | + .directive('fixedHeader', ['$log', '$timeout', '$compile', |
241 | - return { | 280 | + function ($log, $timeout, $compile) { |
281 | + return { | ||
242 | restrict: 'A', | 282 | restrict: 'A', |
243 | scope: { | 283 | scope: { |
244 | - tableHeight: '@' | 284 | + tHeight: '@' |
245 | }, | 285 | }, |
246 | 286 | ||
247 | link: function (scope, element, attrs) { | 287 | link: function (scope, element, attrs) { |
288 | + $log.log("in directive"); | ||
289 | + | ||
248 | var table = d3.select(element[0]), | 290 | var table = d3.select(element[0]), |
249 | thead = table.select('thead'), | 291 | thead = table.select('thead'), |
250 | tbody = table.select('tbody'); | 292 | tbody = table.select('tbody'); |
251 | - $log.log('in directive function'); | ||
252 | 293 | ||
253 | // wait until the table is visible | 294 | // wait until the table is visible |
254 | scope.$watch( | 295 | scope.$watch( |
255 | function () { return (!(table.offsetParent === null)); }, | 296 | function () { return (!(table.offsetParent === null)); }, |
256 | - function (newValue, oldValue) { | 297 | + function(newValue, oldValue) { |
257 | if (newValue === true) { | 298 | if (newValue === true) { |
258 | 299 | ||
259 | // ensure thead and tbody have no display | 300 | // ensure thead and tbody have no display |
260 | thead.style('display', null); | 301 | thead.style('display', null); |
261 | tbody.style('display', null); | 302 | tbody.style('display', null); |
262 | 303 | ||
263 | - $timeout(function() { | 304 | + $timeout(function () { |
264 | - fixTable(table, thead, tbody, scope.tableHeight); | 305 | + fixTable(table, thead, tbody, scope.tHeight); |
265 | }); | 306 | }); |
266 | } | 307 | } |
267 | }); | 308 | }); | ... | ... |
... | @@ -18,37 +18,59 @@ | ... | @@ -18,37 +18,59 @@ |
18 | ONOS GUI -- common -- CSS file | 18 | ONOS GUI -- common -- CSS file |
19 | */ | 19 | */ |
20 | 20 | ||
21 | +/* ------ for summary-list tables ------ */ | ||
22 | + | ||
21 | table.summary-list { | 23 | table.summary-list { |
22 | - margin: 4px 4px; | 24 | + margin: 20px 50px; |
23 | font-size: 10pt; | 25 | font-size: 10pt; |
26 | + border-spacing: 0; | ||
24 | } | 27 | } |
25 | 28 | ||
26 | -/* TODO: uncomment following lines for scrollable table */ | 29 | +/* TODO: delete overflow and block (handled by fixed-header directive) */ |
27 | -/* Possible CSS style for creating a scrollable table */ | ||
28 | table.summary-list tbody { | 30 | table.summary-list tbody { |
29 | height: 500px; | 31 | height: 500px; |
32 | + border-radius: 0 0 8px 8px; | ||
30 | overflow: auto; | 33 | overflow: auto; |
31 | display: block; | 34 | display: block; |
32 | } | 35 | } |
33 | 36 | ||
37 | +.light table.summary-list tr:nth-child(even) { | ||
38 | + background-color: #ddd; | ||
39 | +} | ||
40 | +.light table.summary-list tr:nth-child(odd) { | ||
41 | + background-color: #eee; | ||
42 | +} | ||
43 | +.dark table.summary-list tr:nth-child(even) { | ||
44 | + background-color: #333; | ||
45 | +} | ||
46 | +.dark table.summary-list tr:nth-child(odd) { | ||
47 | + background-color: #444; | ||
48 | +} | ||
49 | + | ||
34 | table.summary-list th { | 50 | table.summary-list th { |
35 | - padding: 5px; | 51 | + padding: 10px; |
52 | + letter-spacing: 0.02em; | ||
53 | +} | ||
54 | +table.summary-list th:first-child { | ||
55 | + border-radius: 8px 0 0 0; | ||
56 | +} | ||
57 | +table.summary-list th:last-child { | ||
58 | + border-radius: 0 8px 0 0; | ||
36 | } | 59 | } |
37 | .light table.summary-list th { | 60 | .light table.summary-list th { |
38 | background-color: #bbb; | 61 | background-color: #bbb; |
39 | } | 62 | } |
40 | .dark table.summary-list th { | 63 | .dark table.summary-list th { |
41 | - background-color: #444; | 64 | + background-color: #222; |
42 | - color: #ddd; | 65 | + color: #ccc; |
43 | } | 66 | } |
44 | 67 | ||
45 | table.summary-list td { | 68 | table.summary-list td { |
46 | padding: 5px; | 69 | padding: 5px; |
47 | -} | 70 | + text-align: center; |
48 | -.light table.summary-list td { | ||
49 | - background-color: #ddd; | ||
50 | } | 71 | } |
51 | .dark table.summary-list td { | 72 | .dark table.summary-list td { |
52 | - background-color: #666; | 73 | + color: #ccc; |
53 | - color: #ddd; | ||
54 | } | 74 | } |
75 | + | ||
76 | +/* ------------------------------------ */ | ... | ... |
-
Please register or login to post a comment