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