ONOS-4359: continued work on theming UI

- topo view: fixed internal spacing (padding) of summary and details panels.

Change-Id: Ie0c45b80a4362cc53329e7f3ab14ed7046a03513
(cherry picked from commit 9a1e18d)

web/gui/src/main/webapp/app/fw/widget/button-theme.css

@@ -23,7 +23,7 @@
 .light .button svg.embeddedIcon .icon rect,
 .light .toggleButton.selected svg.embeddedIcon .icon rect,
 .light .radioButton.selected svg.embeddedIcon .icon rect {
-    fill: #838383;
+    fill: #939598;
 }
 
 .light .button:hover svg.embeddedIcon .icon rect,

web/gui/src/main/webapp/app/view/topo/topo-theme.css

@@ -44,34 +44,27 @@
 
 /* --- general topo-panel styling --- */
 
+.topo-p svg {
+    background: #c0242b;
+}
+
 .topo-p svg .glyph {
-    fill: #222;
+    fill: #ffffff;
-}
-
-.topo-p svg .glyph.overlay {
-    fill: #fff;
-}
-
-.topo-p h2 {
-    color: black;
-}
-
-.topo-p h3 {
-    color: black;
-}
-
-.topo-p td.label {
-    /* works for both light and dark themes ... */
-    color: #777;
-}
-.topo-p td.value {
 }
 
 .topo-p hr {
-    background-color: #ccc;
+    background-color: #cccccc;
-    color: #ccc;
 }
 
+#topo-p-detail svg {
+    background: none;
+}
+
+#topo-p-detail .header svg .glyph {
+    fill: #c0242b;
+}
+
+
 /* --- Topo Instance Panel --- */
 
 #topo-p-instance svg rect {

web/gui/src/main/webapp/app/view/topo/topo.css

@@ -41,31 +41,35 @@
 /* --- Topo Summary Panel --- */
 
 #topo-p-summary {
-    /* Base css from panel.css */
+    padding: 16px;
 }
 
 
 /* --- Topo Detail Panel --- */
 
 #topo-p-detail {
-    /* Base css from panel.css */
+    padding: 16px;
-    top: 338px;
+    top: 370px;
 }
 html[data-platform='iPad'] #topo-p-detail {
-    top: 354px;
+    top: 386px;
 }
 
 #topo-p-detail .actionBtns .actionBtn {
     display: inline-block;
 }
 #topo-p-detail .actionBtns .actionBtn svg {
-    width: 30px;
+    width: 28px;
-    height: 30px;
+    height: 28px;
 }
 
 
 /* --- general topo-panel styling --- */
 
+.topo-p div.header {
+    margin-bottom: 10px;
+}
+
 .topo-p div.header div.icon {
     vertical-align: middle;
     display: inline-block;
@@ -80,17 +84,17 @@ html[data-platform='iPad'] #topo-p-detail {
 
 .topo-p svg {
     display: inline-block;
-    width: 42px;
+    width: 26px;
-    height: 42px;
+    height: 26px;
 }
 
 
 .topo-p h2 {
-    padding: 0 4px;
+    padding: 0 0 0 10px;
     margin: 0;
+    font-weight: lighter;
     word-wrap: break-word;
     display: inline-block;
-    width: 210px;
     vertical-align: middle;
 }
 
@@ -104,23 +108,34 @@ html[data-platform='iPad'] #topo-p-detail {
 
 .topo-p p,
 .topo-p table {
-    padding: 4px;
+    padding: 0;
     margin: 0;
+    width: 100%;
 }
 
 .topo-p td {
     word-wrap: break-word;
 }
 .topo-p td.label {
-    font-style: italic;
+    font-weight: bold;
-    padding-right: 12px;
+    padding: 0 10px 0 0;
 }
 .topo-p td.value {
+    padding: 0;
+}
+
+#topo-p-summary  td.label {
+    width: 50%;
+}
+
+#topo-p-detail  div.actionBtns {
+    padding-top: 6px;
 }
 
 .topo-p hr {
     height: 1px;
     border: 0;
+    margin: 4px -3px;
 }
 
 

web/gui/src/main/webapp/app/view/topo/topoPanel.js

@@ -30,11 +30,12 @@
         idSum = 'topo-p-summary',
         idDet = 'topo-p-detail',
         panelOpts = {
-            width: 290          // summary and detail panel width
+            width: 260          // summary and detail panel width
         },
-        sumMax = 262,           // summary panel max height
+        sumMax = 226,           // summary panel max height
         padTop = 16,            // summary panel padding below masthead
-        padFudge = padTop + 6,
+        padding = 16,           // panel internal padding
+        padFudge = padTop + 2 * padding,
         devPath = 'device';
 
     // internal state
@@ -210,14 +211,9 @@
                 .append('svg'),
             title = summary.appendHeader('h2'),
             table = summary.appendBody('table'),
-            tbody = table.append('tbody'),
+            tbody = table.append('tbody');
-            glyphId = data.type || 'node';
 
-        gs.addGlyph(svg, glyphId, 40);
+        gs.addGlyph(svg, 'bird', 24, 0, [1,1]);
-
-        if (glyphId === 'node') {
-            gs.addGlyph(svg, 'bird', 24, true, [8,12]);
-        }
 
         title.text(data.title);
         listProps(tbody, data);
@@ -244,7 +240,7 @@
             tbody = table.append('tbody'),
             navFn;
 
-        gs.addGlyph(svg, (data.type || 'unknown'), 40);
+        gs.addGlyph(svg, (data.type || 'unknown'), 26);
         title.text(data.title);
 
         // only add navigation when displaying a device