ONOS-4359: continued work on theming UI
- topo view: fixed vertical spacing (and interactions) of summary and details panels.
- added bbox() to panel API.
Change-Id: I84544cc558020582c95d33096b92ac5756e68628
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.js b/web/gui/src/main/webapp/app/fw/layer/panel.js
index caa9dd1..40fe00e 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.js
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.js
@@ -81,6 +81,7 @@
append: appendPanel,
width: panelWidth,
height: panelHeight,
+ bbox: panelBBox,
isVisible: panelIsVisible,
classed: classed,
el: panelEl
@@ -150,6 +151,10 @@
p.el.style('height', h + 'px');
}
+ function panelBBox() {
+ return p.el.node().getBoundingClientRect();
+ }
+
function panelIsVisible() {
return p.on;
}
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 edea27b..0025a75 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -30,10 +30,11 @@
idSum = 'topo-p-summary',
idDet = 'topo-p-detail',
panelOpts = {
- width: 268
+ width: 290 // summary and detail panel width
},
- sumMax = 262,
- padTop = 20,
+ sumMax = 262, // summary panel max height
+ padTop = 16, // summary panel padding below masthead
+ padFudge = padTop + 6,
devPath = 'device';
// internal state
@@ -90,8 +91,7 @@
// only adjusts if the body content would be 10px or larger
function adjustHeight(fromTop, max) {
var totalPHeight, avSpace,
- overflow = 0,
- pdg = 30;
+ overflow = 0;
if (!fromTop) {
$log.warn('adjustHeight: height from top of page not given');
@@ -103,11 +103,12 @@
return null;
}
+ p.el().style('top', fromTop + 'px');
p.el().style('height', null);
body.style('height', null);
totalPHeight = fromTop + p.height();
- avSpace = fs.windowSize(pdg).height;
+ avSpace = fs.windowSize(padFudge).height;
if (totalPHeight >= avSpace) {
overflow = totalPHeight - avSpace;
@@ -123,12 +124,13 @@
}
if (!_adjustBody(fs.noPxStyle(body, 'height') - overflow)) {
- return;
+ return p.height();
}
if (max && p.height() > max) {
_adjustBody(fs.noPxStyle(body, 'height') - (p.height() - max));
}
+ return p.height();
}
return {
@@ -188,8 +190,11 @@
w: $window.innerWidth
};
}, function () {
- summary.adjustHeight(sumFromTop, sumMax);
- detail.adjustHeight(detail.ypos.current);
+ var h = summary.adjustHeight(sumFromTop, sumMax),
+ ss = summary.panel().isVisible(),
+ dtop = h && ss ? sumFromTop + h + padFudge : 0,
+ dy = dtop || ss ? detail.ypos.current : sumFromTop;
+ detail.adjustHeight(dy);
}
);
}
@@ -431,7 +436,7 @@
function augmentDetailPanel() {
var d = detail,
- downPos = sumFromTop + sumMax + 20;
+ downPos = sumFromTop + sumMax + padFudge;
d.ypos = { up: sumFromTop, down: downPos, current: downPos};
d._move = function (y, cb) {
diff --git a/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js b/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js
index 07a1b35..2c3efec 100644
--- a/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js
@@ -92,7 +92,7 @@
var p = ps.createPanel('foo');
expect(fs.areFunctions(p, [
'show', 'hide', 'toggle', 'empty', 'append',
- 'width', 'height', 'isVisible', 'classed', 'el'
+ 'width', 'height', 'bbox', 'isVisible', 'classed', 'el'
])).toBeTruthy();
});