GUI -- summary-list table CSS edited to look cleaner.
Code to integrate directive into d3 created table -- WIP
Change-Id: I182ad1c66fdce36bb4097459e55a5271d47b700c
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
index 1383696..dd92510 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.js
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -232,36 +232,77 @@
angular.module('practiceTable', ['onosWidget'])
- .controller('showTableCtrl', ['$log', 'TableService',
- function ($log, ts) {
- ts.renderTable(d3.select('#tableDiv'), config, deviceData);
+ .controller('showTableCtrl', ['$log', '$scope', '$rootScope',
+ '$timeout', 'TableService',
+ function ($log, $scope, $rootScope, $timeout, ts) {
+ var table = ts.renderTable(d3.select('#tableDiv'), config, deviceData);
+
+ // --- commented out code below were various attempts at $apply ---
+ // will delete unneeded dependencies once we have figured out which ones we need
+
+ //$timeout(function () {
+ // $log.log('inside timeout');
+ // //$scope.$watch('table', function (newVal, oldVal) {
+ // $scope.$apply();
+ // //});
+ // }, 1000);
+
+ //$scope.$applyAsync();
+
+ //$scope.$apply(function () {
+ // ts.renderTable(d3.select('#tableDiv'), config, deviceData);
+ //});
+
+ //$log.log($scope);
+
+ //$scope.$watch('table', function(newVal, oldVal) {
+ // //if (newVal === oldVal) { $log.log('hello'); return; }
+ // $scope.$apply();
+ //});
+ //
+ //$timeout(function () {
+ // $log.log("in timeout in controller");
+ // $rootScope.$watch(function () {
+ // return (table);
+ // },
+ // function(newValue, oldValue) {
+ // if(newValue) {
+ // $log.log('hello??');
+ // //$rootScope.$apply();
+ // }
+ // }
+ // );
+ // //$scope.$apply(table);
+ // $log.log("after scope.apply")});
}])
- .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
- return {
+ .directive('fixedHeader', ['$log', '$timeout', '$compile',
+ function ($log, $timeout, $compile) {
+ return {
restrict: 'A',
scope: {
- tableHeight: '@'
+ tHeight: '@'
},
link: function (scope, element, attrs) {
+ $log.log("in directive");
+
var table = d3.select(element[0]),
thead = table.select('thead'),
tbody = table.select('tbody');
- $log.log('in directive function');
// wait until the table is visible
scope.$watch(
function () { return (!(table.offsetParent === null)); },
- function (newValue, oldValue) {
+ function(newValue, oldValue) {
if (newValue === true) {
// ensure thead and tbody have no display
thead.style('display', null);
tbody.style('display', null);
- $timeout(function() {
- fixTable(table, thead, tbody, scope.tableHeight);
+ $timeout(function () {
+ fixTable(table, thead, tbody, scope.tHeight);
});
}
});
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index 1ca7257..fb2b4d0 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -18,37 +18,59 @@
ONOS GUI -- common -- CSS file
*/
+/* ------ for summary-list tables ------ */
+
table.summary-list {
- margin: 4px 4px;
+ margin: 20px 50px;
font-size: 10pt;
+ border-spacing: 0;
}
-/* TODO: uncomment following lines for scrollable table */
-/* Possible CSS style for creating a scrollable table */
+/* TODO: delete overflow and block (handled by fixed-header directive) */
table.summary-list tbody {
height: 500px;
+ border-radius: 0 0 8px 8px;
overflow: auto;
display: block;
}
+.light table.summary-list tr:nth-child(even) {
+ background-color: #ddd;
+}
+.light table.summary-list tr:nth-child(odd) {
+ background-color: #eee;
+}
+.dark table.summary-list tr:nth-child(even) {
+ background-color: #333;
+}
+.dark table.summary-list tr:nth-child(odd) {
+ background-color: #444;
+}
+
table.summary-list th {
- padding: 5px;
+ padding: 10px;
+ letter-spacing: 0.02em;
+}
+table.summary-list th:first-child {
+ border-radius: 8px 0 0 0;
+}
+table.summary-list th:last-child {
+ border-radius: 0 8px 0 0;
}
.light table.summary-list th {
background-color: #bbb;
}
.dark table.summary-list th {
- background-color: #444;
- color: #ddd;
+ background-color: #222;
+ color: #ccc;
}
table.summary-list td {
padding: 5px;
-}
-.light table.summary-list td {
- background-color: #ddd;
+ text-align: center;
}
.dark table.summary-list td {
- background-color: #666;
- color: #ddd;
+ color: #ccc;
}
+
+/* ------------------------------------ */
diff --git a/web/gui/src/main/webapp/app/fw/README.txt b/web/gui/src/main/webapp/app/fw/README.txt
index 2fc39ab..e99ece9 100644
--- a/web/gui/src/main/webapp/app/fw/README.txt
+++ b/web/gui/src/main/webapp/app/fw/README.txt
@@ -24,3 +24,6 @@
- Remote
- Login Service
- Web Socket Service
+
+- Widget
+ - Table Service
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index cfa03d3..530c06b 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -52,5 +52,5 @@
color: #800;
}
.dark #view h2 {
- color: #d88;
+ color: #CE5650;
}