GUI -- Formatted styling for summary-list table and Switch Icons.

Change-Id: Ifafc2f17d4338bb42734f130ba642de4a6550263

@@ -21,7 +21,7 @@
 /* ------ for summary-list tables ------ */
 
 table.summary-list {
-    margin: 0px 50px 50px 50px;
+    margin: 0 50px 50px 50px;
     font-size: 10pt;
     border-spacing: 0;
 }
@@ -46,6 +46,7 @@ table.summary-list tbody {
 table.summary-list th {
     padding: 10px;
     letter-spacing: 0.02em;
+    text-align: left;
 }
 table.summary-list th:first-child {
     border-radius: 8px 0 0 0;
@@ -62,9 +63,10 @@ table.summary-list th:last-child {
 }
 
 table.summary-list td {
-    padding: 10px;
-    text-align: center;
+    padding: 6px 10px 6px 10px;
+    text-align: left;
 }
+
 .dark table.summary-list td {
     color: #ccc;
 }

@@ -32,23 +32,41 @@ div.inline-icon {
     display: inline-block;
 }
 
-.light svg.embeddedIcon .icon.deviceOnline {
-    fill: green;
-}
+.light svg.embeddedIcon .icon.deviceOnline,
 .light svg.embeddedIcon .icon.deviceOffline {
-    fill: darkred;
+    fill: none;
 }
 
 .dark svg.embeddedIcon .icon.deviceOnline,
 .dark svg.embeddedIcon .icon.deviceOffline {
+    fill: none;
+}
+
+.light svg.embeddedIcon .icon.devIcon_SWITCH {
     fill: #ccc;
 }
-.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+.dark svg.embeddedIcon .icon.devIcon_SWITCH {
+    fill: #222;
+}
+.light svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
+    fill: #333;
+}
+.dark svg.embeddedIcon .icon.devIcon_SWITCH .glyph {
+    fill: #ccc;
+}
+
+.light svg.embeddedIcon .icon.deviceOnline .glyph {
     fill: green;
 }
-.dark svg.embeddedIcon .icon.deviceOffline .glyph {
+.light svg.embeddedIcon .icon.deviceOffline .glyph {
     fill: darkred;
 }
+.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+    fill: #266610;
+}
+.dark svg.embeddedIcon .icon.deviceOffline .glyph {
+    fill: #610000;
+}
 
 .light svg.embeddedIcon .icon.tableColSortAsc .glyph,
 .light svg.embeddedIcon .icon.tableColSortDesc .glyph {
@@ -59,6 +77,14 @@ div.inline-icon {
     fill: #ccc;
 }
 
+.light svg.embeddedIcon .icon.deviceOnline rect,
+.light svg.embeddedIcon .icon.deviceOffline rect,
+.dark svg.embeddedIcon .icon.deviceOnline rect,
+.dark svg.embeddedIcon .icon.deviceOffline rect {
+    stroke: none;
+    fill: none;
+}
+
 svg.embeddedIcon .icon.tableColSortAsc rect,
 svg.embeddedIcon .icon.tableColSortDesc rect {
     stroke: none;
@@ -69,6 +95,10 @@ svg.embeddedIcon .icon rect {
     stroke: black;
     stroke-width: 1px;
 }
+.dark svg.embeddedIcon .icon.deviceOnline rect
+.dark svg.embeddedIcon .icon.deviceOffline rect {
+    stroke: none;
+}
 .dark svg.embeddedIcon .icon rect {
     stroke: #ccc;
 }

@@ -24,6 +24,7 @@
         div,
         currCol = {},
         prevCol = {},
+        tableIconTdSize = 30,
         bottomMargin = 200;
 
 
@@ -80,15 +81,10 @@
 
             tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
 
-            // 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.text().length)) {
-                var tdSize = tdElement.style('width');
-                thElement.style('width', tdSize + 'px');
-                tdElement.style('width', tdSize + 'px');
-            }
-            else {
+            if (tdElement.classed('table-icon')) {
+                thElement.style('width', tableIconTdSize + 'px');
+                tdElement.style('width', tableIconTdSize + 'px');
+            } else {
                 thElement.style('width', colWidth + 'px');
                 tdElement.style('width', colWidth + 'px');
             }
@@ -161,7 +157,6 @@
             };
         }])
 
-        // TODO: fix header alignment spacing
         .directive('onosFixedHeader', ['$window', '$timeout',
             'MastService', 'FnService',
             function (_$window_, $timeout, mast, _fs_) {

@@ -8,8 +8,8 @@
            sort-callback="sortCallback(urlSuffix)">
         <thead>
             <tr>
-                <th colId="available">.</th>
-                <th colId="type">.</th>
+                <th colId="available"></th>
+                <th colId="type"></th>
                 <th colId="id" sortable>Device ID </th>
                 <th colId="mfr" sortable>Vendor </th>
                 <th colId="hw" sortable>H/W Version </th>
@@ -23,8 +23,12 @@
         <tbody>
             <tr ng-repeat="dev in ctrl.deviceData"
                 ng-repeat-done>
-                <td><div icon icon-id="{{dev._iconid_available}}"></div></td>
-                <td><div icon icon-id="{{dev._iconid_type}}"></div></td>
+                <td class="table-icon">
+                    <div icon icon-id="{{dev._iconid_available}}"></div>
+                </td>
+                <td class="table-icon">
+                    <div icon icon-id="{{dev._iconid_type}}"></div>
+                </td>
                 <td>{{dev.id}}</td>
                 <td>{{dev.mfr}}</td>
                 <td>{{dev.hw}}</td>