GUI -- summary-list table CSS edited to look cleaner.

Code to integrate directive into d3 created table -- WIP

Change-Id: I182ad1c66fdce36bb4097459e55a5271d47b700c

@@ -232,36 +232,77 @@
 
 
     angular.module('practiceTable', ['onosWidget'])
     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',
                 restrict: 'A',
                 scope: {
                 scope: {
-                    tableHeight: '@'
+                    tHeight: '@'
                 },
                 },
 
 
                 link: function (scope, element, attrs) {
                 link: function (scope, element, attrs) {
+                    $log.log("in directive");
+
                     var table = d3.select(element[0]),
                     var table = d3.select(element[0]),
                         thead = table.select('thead'),
                         thead = table.select('thead'),
                         tbody = table.select('tbody');
                         tbody = table.select('tbody');
-                    $log.log('in directive function');
 
 
                     // wait until the table is visible
                     // wait until the table is visible
                     scope.$watch(
                     scope.$watch(
                         function () { return (!(table.offsetParent === null)); },
                         function () { return (!(table.offsetParent === null)); },
-                        function (newValue, oldValue) {
+                        function(newValue, oldValue) {
                             if (newValue === true) {
                             if (newValue === true) {
 
 
                                 // ensure thead and tbody have no display
                                 // ensure thead and tbody have no display
                                 thead.style('display', null);
                                 thead.style('display', null);
                                 tbody.style('display', null);
                                 tbody.style('display', null);
 
 
-                                $timeout(function() {
-                                    fixTable(table, thead, tbody, scope.tableHeight);
+                                $timeout(function () {
+                                    fixTable(table, thead, tbody, scope.tHeight);
                                 });
                                 });
                             }
                             }
                         });
                         });

@@ -18,37 +18,59 @@
  ONOS GUI -- common -- CSS file
  ONOS GUI -- common -- CSS file
  */
  */
 
 
+/* ------ for summary-list tables ------ */
+
 table.summary-list {
 table.summary-list {
-    margin: 4px 4px;
+    margin: 20px 50px;
     font-size: 10pt;
     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 {
 table.summary-list tbody {
     height: 500px;
     height: 500px;
+    border-radius: 0 0 8px 8px;
     overflow: auto;
     overflow: auto;
     display: block;
     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 {
 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 {
 .light table.summary-list th {
     background-color: #bbb;
     background-color: #bbb;
 }
 }
 .dark table.summary-list th {
 .dark table.summary-list th {
-    background-color: #444;
-    color: #ddd;
+    background-color: #222;
+    color: #ccc;
 }
 }
 
 
 table.summary-list td {
 table.summary-list td {
     padding: 5px;
     padding: 5px;
-}
-.light table.summary-list td {
-    background-color: #ddd;
+    text-align: center;
 }
 }
 .dark table.summary-list td {
 .dark table.summary-list td {
-    background-color: #666;
-    color: #ddd;
+    color: #ccc;
 }
 }
+
+/* ------------------------------------ */

@@ -24,3 +24,6 @@
 - Remote
 - Remote
     - Login Service
     - Login Service
     - Web Socket Service
     - Web Socket Service
+
+- Widget
+    - Table Service

@@ -52,5 +52,5 @@ body.dark {
     color: #800;
     color: #800;
 }
 }
 .dark #view h2 {
 .dark #view h2 {
-    color: #d88;
+    color: #CE5650;
 }
 }