홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Brian O'Connor
8f907ccb 1 parent 8d47a5c8

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 9a1e18dd)
Inline Side-by-side
Showing 4 changed files with 46 additions and 42 deletions
......@@ -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,
......
......@@ -44,33 +44,26 @@
/* --- general topo-panel styling --- */
.topo-p svg .glyph {
fill: #222;
.topo-p svg {
background: #c0242b;
}
.topo-p svg .glyph.overlay {
fill: #fff;
.topo-p svg .glyph {
fill: #ffffff;
}
.topo-p h2 {
color: black;
.topo-p hr {
background-color: #cccccc;
}
.topo-p h3 {
color: black;
#topo-p-detail svg {
background: none;
}
.topo-p td.label {
/* works for both light and dark themes ... */
color: #777;
}
.topo-p td.value {
#topo-p-detail .header svg .glyph {
fill: #c0242b;
}
.topo-p hr {
background-color: #ccc;
color: #ccc;
}
/* --- Topo Instance Panel --- */
......
......@@ -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 @@ html[data-platform='iPad'] #topo-p-detail {
.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 @@ 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;
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;
}
......
......@@ -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';
gs.addGlyph(svg, glyphId, 40);
tbody = table.append('tbody');
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
......