ONOS-1928 - GUI -- Topo panels now resize when window resizes.
Change-Id: Id12e80204c6770a86eb6472965bbdfc6064128d4
Showing
1 changed file
with
38 additions
and
10 deletions
... | @@ -23,7 +23,7 @@ | ... | @@ -23,7 +23,7 @@ |
23 | 'use strict'; | 23 | 'use strict'; |
24 | 24 | ||
25 | // injected refs | 25 | // injected refs |
26 | - var $log, fs, ps, gs, flash, wss, bns; | 26 | + var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns; |
27 | 27 | ||
28 | // constants | 28 | // constants |
29 | var pCls = 'topo-p', | 29 | var pCls = 'topo-p', |
... | @@ -31,7 +31,9 @@ | ... | @@ -31,7 +31,9 @@ |
31 | idDet = 'topo-p-detail', | 31 | idDet = 'topo-p-detail', |
32 | panelOpts = { | 32 | panelOpts = { |
33 | width: 260 | 33 | width: 260 |
34 | - }; | 34 | + }, |
35 | + sumFromTop = 64, | ||
36 | + sumMax = 226; | ||
35 | 37 | ||
36 | // internal state | 38 | // internal state |
37 | var useDetails = true, // should we show details if we have 'em? | 39 | var useDetails = true, // should we show details if we have 'em? |
... | @@ -173,6 +175,20 @@ | ... | @@ -173,6 +175,20 @@ |
173 | }); | 175 | }); |
174 | } | 176 | } |
175 | 177 | ||
178 | + function watchWindow() { | ||
179 | + $rootScope.$watchCollection( | ||
180 | + function () { | ||
181 | + return { | ||
182 | + h: $window.innerHeight, | ||
183 | + w: $window.innerWidth | ||
184 | + }; | ||
185 | + }, function () { | ||
186 | + summary.adjustHeight(sumFromTop, sumMax); | ||
187 | + detail.adjustHeight(detail.ypos.current); | ||
188 | + } | ||
189 | + ); | ||
190 | + } | ||
191 | + | ||
176 | // === ----------------------------------------------------- | 192 | // === ----------------------------------------------------- |
177 | // Functions for populating the summary panel | 193 | // Functions for populating the summary panel |
178 | 194 | ||
... | @@ -350,7 +366,7 @@ | ... | @@ -350,7 +366,7 @@ |
350 | function showSummaryPanel() { | 366 | function showSummaryPanel() { |
351 | function _show() { | 367 | function _show() { |
352 | summary.panel().show(); | 368 | summary.panel().show(); |
353 | - summary.adjustHeight(64, 226); | 369 | + summary.adjustHeight(sumFromTop, sumMax); |
354 | } | 370 | } |
355 | if (detail.panel().isVisible()) { | 371 | if (detail.panel().isVisible()) { |
356 | detail.down(_show); | 372 | detail.down(_show); |
... | @@ -371,7 +387,6 @@ | ... | @@ -371,7 +387,6 @@ |
371 | } else { | 387 | } else { |
372 | detail.up(detail.panel().show); | 388 | detail.up(detail.panel().show); |
373 | } | 389 | } |
374 | - detail.adjustHeight(detail.ypos.current); | ||
375 | } | 390 | } |
376 | 391 | ||
377 | function hideDetailPanel() { | 392 | function hideDetailPanel() { |
... | @@ -380,15 +395,24 @@ | ... | @@ -380,15 +395,24 @@ |
380 | 395 | ||
381 | // ========================== | 396 | // ========================== |
382 | 397 | ||
383 | - function noop () {} | ||
384 | - | ||
385 | function augmentDetailPanel() { | 398 | function augmentDetailPanel() { |
386 | var d = detail; | 399 | var d = detail; |
387 | d.ypos = { up: 64, down: 310, current: 310}; | 400 | d.ypos = { up: 64, down: 310, current: 310}; |
388 | 401 | ||
389 | d._move = function (y, cb) { | 402 | d._move = function (y, cb) { |
390 | - var endCb = fs.isF(cb) || noop, | 403 | + var yp = d.ypos, |
391 | - yp = d.ypos; | 404 | + endCb; |
405 | + | ||
406 | + if (fs.isF(cb)) { | ||
407 | + endCb = function () { | ||
408 | + cb(); | ||
409 | + d.adjustHeight(d.ypos.current); | ||
410 | + } | ||
411 | + } else { | ||
412 | + endCb = function () { | ||
413 | + d.adjustHeight(d.ypos.current); | ||
414 | + } | ||
415 | + } | ||
392 | if (yp.current !== y) { | 416 | if (yp.current !== y) { |
393 | yp.current = y; | 417 | yp.current = y; |
394 | d.panel().el().transition().duration(300) | 418 | d.panel().el().transition().duration(300) |
... | @@ -428,6 +452,7 @@ | ... | @@ -428,6 +452,7 @@ |
428 | detail = createTopoPanel(idDet, panelOpts); | 452 | detail = createTopoPanel(idDet, panelOpts); |
429 | 453 | ||
430 | augmentDetailPanel(); | 454 | augmentDetailPanel(); |
455 | + watchWindow(); | ||
431 | } | 456 | } |
432 | 457 | ||
433 | function destroyPanels() { | 458 | function destroyPanels() { |
... | @@ -443,11 +468,14 @@ | ... | @@ -443,11 +468,14 @@ |
443 | 468 | ||
444 | angular.module('ovTopo') | 469 | angular.module('ovTopo') |
445 | .factory('TopoPanelService', | 470 | .factory('TopoPanelService', |
446 | - ['$log', 'FnService', 'PanelService', 'GlyphService', | 471 | + ['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService', |
447 | 'FlashService', 'WebSocketService', 'ButtonService', | 472 | 'FlashService', 'WebSocketService', 'ButtonService', |
448 | 473 | ||
449 | - function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) { | 474 | + function (_$log_, _$window_, _$rootScope_, |
475 | + _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) { | ||
450 | $log = _$log_; | 476 | $log = _$log_; |
477 | + $window = _$window_; | ||
478 | + $rootScope = _$rootScope_; | ||
451 | fs = _fs_; | 479 | fs = _fs_; |
452 | ps = _ps_; | 480 | ps = _ps_; |
453 | gs = _gs_; | 481 | gs = _gs_; | ... | ... |
-
Please register or login to post a comment