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)
diff --git a/web/gui/src/main/webapp/app/fw/widget/button-theme.css b/web/gui/src/main/webapp/app/fw/widget/button-theme.css
index 6e11948..ac04571 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button-theme.css
+++ b/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,
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index e06429b..a7bc4b0 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/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;
-}
-
-.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 {
+ fill: #ffffff;
}
.topo-p hr {
- background-color: #ccc;
- color: #ccc;
+ background-color: #cccccc;
}
+#topo-p-detail svg {
+ background: none;
+}
+
+#topo-p-detail .header svg .glyph {
+ fill: #c0242b;
+}
+
+
/* --- Topo Instance Panel --- */
#topo-p-instance svg rect {
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 0f016b6..854c99b 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/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 */
- top: 338px;
+ padding: 16px;
+ 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;
- height: 30px;
+ width: 28px;
+ 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 @@
.topo-p svg {
display: inline-block;
- width: 42px;
- height: 42px;
+ width: 26px;
+ 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 @@
.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;
- padding-right: 12px;
+ font-weight: bold;
+ 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;
}
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index 0025a75..7895c21 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/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'),
- glyphId = data.type || 'node';
+ tbody = table.append('tbody');
- gs.addGlyph(svg, glyphId, 40);
-
- if (glyphId === 'node') {
- gs.addGlyph(svg, 'bird', 24, true, [8,12]);
- }
+ gs.addGlyph(svg, 'bird', 24, 0, [1,1]);
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