Simon Hunt
Committed by Gerrit Code Review

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
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
81 append: appendPanel, 81 append: appendPanel,
82 width: panelWidth, 82 width: panelWidth,
83 height: panelHeight, 83 height: panelHeight,
84 + bbox: panelBBox,
84 isVisible: panelIsVisible, 85 isVisible: panelIsVisible,
85 classed: classed, 86 classed: classed,
86 el: panelEl 87 el: panelEl
...@@ -150,6 +151,10 @@ ...@@ -150,6 +151,10 @@
150 p.el.style('height', h + 'px'); 151 p.el.style('height', h + 'px');
151 } 152 }
152 153
154 + function panelBBox() {
155 + return p.el.node().getBoundingClientRect();
156 + }
157 +
153 function panelIsVisible() { 158 function panelIsVisible() {
154 return p.on; 159 return p.on;
155 } 160 }
......
...@@ -30,10 +30,11 @@ ...@@ -30,10 +30,11 @@
30 idSum = 'topo-p-summary', 30 idSum = 'topo-p-summary',
31 idDet = 'topo-p-detail', 31 idDet = 'topo-p-detail',
32 panelOpts = { 32 panelOpts = {
33 - width: 268 33 + width: 290 // summary and detail panel width
34 }, 34 },
35 - sumMax = 262, 35 + sumMax = 262, // summary panel max height
36 - padTop = 20, 36 + padTop = 16, // summary panel padding below masthead
37 + padFudge = padTop + 6,
37 devPath = 'device'; 38 devPath = 'device';
38 39
39 // internal state 40 // internal state
...@@ -90,8 +91,7 @@ ...@@ -90,8 +91,7 @@
90 // only adjusts if the body content would be 10px or larger 91 // only adjusts if the body content would be 10px or larger
91 function adjustHeight(fromTop, max) { 92 function adjustHeight(fromTop, max) {
92 var totalPHeight, avSpace, 93 var totalPHeight, avSpace,
93 - overflow = 0, 94 + overflow = 0;
94 - pdg = 30;
95 95
96 if (!fromTop) { 96 if (!fromTop) {
97 $log.warn('adjustHeight: height from top of page not given'); 97 $log.warn('adjustHeight: height from top of page not given');
...@@ -103,11 +103,12 @@ ...@@ -103,11 +103,12 @@
103 return null; 103 return null;
104 } 104 }
105 105
106 + p.el().style('top', fromTop + 'px');
106 p.el().style('height', null); 107 p.el().style('height', null);
107 body.style('height', null); 108 body.style('height', null);
108 109
109 totalPHeight = fromTop + p.height(); 110 totalPHeight = fromTop + p.height();
110 - avSpace = fs.windowSize(pdg).height; 111 + avSpace = fs.windowSize(padFudge).height;
111 112
112 if (totalPHeight >= avSpace) { 113 if (totalPHeight >= avSpace) {
113 overflow = totalPHeight - avSpace; 114 overflow = totalPHeight - avSpace;
...@@ -123,12 +124,13 @@ ...@@ -123,12 +124,13 @@
123 } 124 }
124 125
125 if (!_adjustBody(fs.noPxStyle(body, 'height') - overflow)) { 126 if (!_adjustBody(fs.noPxStyle(body, 'height') - overflow)) {
126 - return; 127 + return p.height();
127 } 128 }
128 129
129 if (max && p.height() > max) { 130 if (max && p.height() > max) {
130 _adjustBody(fs.noPxStyle(body, 'height') - (p.height() - max)); 131 _adjustBody(fs.noPxStyle(body, 'height') - (p.height() - max));
131 } 132 }
133 + return p.height();
132 } 134 }
133 135
134 return { 136 return {
...@@ -188,8 +190,11 @@ ...@@ -188,8 +190,11 @@
188 w: $window.innerWidth 190 w: $window.innerWidth
189 }; 191 };
190 }, function () { 192 }, function () {
191 - summary.adjustHeight(sumFromTop, sumMax); 193 + var h = summary.adjustHeight(sumFromTop, sumMax),
192 - detail.adjustHeight(detail.ypos.current); 194 + ss = summary.panel().isVisible(),
195 + dtop = h && ss ? sumFromTop + h + padFudge : 0,
196 + dy = dtop || ss ? detail.ypos.current : sumFromTop;
197 + detail.adjustHeight(dy);
193 } 198 }
194 ); 199 );
195 } 200 }
...@@ -431,7 +436,7 @@ ...@@ -431,7 +436,7 @@
431 436
432 function augmentDetailPanel() { 437 function augmentDetailPanel() {
433 var d = detail, 438 var d = detail,
434 - downPos = sumFromTop + sumMax + 20; 439 + downPos = sumFromTop + sumMax + padFudge;
435 d.ypos = { up: sumFromTop, down: downPos, current: downPos}; 440 d.ypos = { up: sumFromTop, down: downPos, current: downPos};
436 441
437 d._move = function (y, cb) { 442 d._move = function (y, cb) {
......
...@@ -92,7 +92,7 @@ describe('factory: fw/layer/panel.js', function () { ...@@ -92,7 +92,7 @@ describe('factory: fw/layer/panel.js', function () {
92 var p = ps.createPanel('foo'); 92 var p = ps.createPanel('foo');
93 expect(fs.areFunctions(p, [ 93 expect(fs.areFunctions(p, [
94 'show', 'hide', 'toggle', 'empty', 'append', 94 'show', 'hide', 'toggle', 'empty', 'append',
95 - 'width', 'height', 'isVisible', 'classed', 'el' 95 + 'width', 'height', 'bbox', 'isVisible', 'classed', 'el'
96 ])).toBeTruthy(); 96 ])).toBeTruthy();
97 }); 97 });
98 98
......