GUI -- Mobile GUI work. Disabled port highlighting, suppressed port highlighting/sprite layer toolbar buttons, adjusted panel and navigation/mast heights.
Change-Id: I36142be78167fc1eb73cc846e7222391cb8b8740
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.css b/web/gui/src/main/webapp/app/fw/layer/panel.css
index 1075b74..46dbdb5 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.css
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.css
@@ -34,6 +34,10 @@
border-radius: 6px;
}
+html[data-platform='iPad'] .floatpanel {
+ top: 80px;
+}
+
.light .floatpanel {
background-color: rgba(255,255,255,0.8);
color: black;
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.js b/web/gui/src/main/webapp/app/fw/mast/mast.js
index bdb3e67..1cde58c 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.js
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.js
@@ -24,7 +24,8 @@
var $log;
// configuration
- var mastHeight = 36;
+ var mastHeight = 36,
+ padMobile = 16;
angular.module('onosMast', ['onosNav'])
.controller('MastCtrl', ['$log', 'NavService', function (_$log_, ns) {
@@ -44,9 +45,11 @@
}])
// also define a service to allow lookup of mast height.
- .factory('MastService', [function () {
+ .factory('MastService', ['FnService', function (fs) {
return {
- mastHeight: function () { return mastHeight; }
+ mastHeight: function () {
+ return fs.isMobile() ? mastHeight + padMobile : mastHeight;
+ }
}
}]);
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.css b/web/gui/src/main/webapp/app/fw/nav/nav.css
index ea8c4cf..4d2c4e9 100644
--- a/web/gui/src/main/webapp/app/fw/nav/nav.css
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.css
@@ -27,6 +27,10 @@
visibility: hidden;
}
+html[data-platform='iPad'] #nav {
+ top: 57px;
+}
+
.light #nav {
background-color: #bbb;
box-shadow: 0 2px 8px #777;
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index 7b9b6b0..df09a22 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -34,7 +34,8 @@
width: 20,
margin: 0,
hideMargin: -20,
- top: '80%',
+ top: 'auto',
+ bottom: '10px',
fade: false,
shown: false
};
@@ -101,7 +102,8 @@
};
panel.classed('toolbar', true)
- .style('top', settings.top);
+ .style('top', settings.top)
+ .style('bottom', settings.bottom);
// Helper functions
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 282025a..d6452b7 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -84,6 +84,9 @@
/* Base css from panel.css */
top: 310px;
}
+html[data-platform='iPad'] #topo-p-detail {
+ top: 326px;
+}
#topo-p-detail .actionBtns .actionBtn {
display: inline-block;
diff --git a/web/gui/src/main/webapp/app/view/topo/topoLink.js b/web/gui/src/main/webapp/app/view/topo/topoLink.js
index 49678d8..ec4cc53 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoLink.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoLink.js
@@ -288,7 +288,7 @@
td3 = _td3_;
svg = api.svg;
network = api.network;
- if (showPorts) {
+ if (showPorts && !fs.isMobile()) {
svg.on('mousemove', mouseMoveHandler);
}
svg.on('click', mouseClickHandler);
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 48a434a..9f82d89 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -23,7 +23,7 @@
'use strict';
// injected refs
- var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns;
+ var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns, mast;
// constants
var pCls = 'topo-p',
@@ -32,12 +32,13 @@
panelOpts = {
width: 260
},
- sumFromTop = 64,
- sumMax = 226;
+ sumMax = 226,
+ padTop = 28;
// internal state
var useDetails = true, // should we show details if we have 'em?
- haveDetails = false; // do we have details that we could show?
+ haveDetails = false, // do we have details that we could show?
+ sumFromTop; // summary panel distance from top of screen
// panels
var summary, detail;
@@ -396,8 +397,9 @@
// ==========================
function augmentDetailPanel() {
- var d = detail;
- d.ypos = { up: 64, down: 310, current: 310};
+ var d = detail,
+ downPos = sumFromTop + sumMax + 20;
+ d.ypos = { up: sumFromTop, down: downPos, current: downPos};
d._move = function (y, cb) {
var yp = d.ypos,
@@ -448,6 +450,7 @@
// ==========================
function initPanels() {
+ sumFromTop = mast.mastHeight() + padTop;
summary = createTopoPanel(idSum, panelOpts);
detail = createTopoPanel(idDet, panelOpts);
@@ -469,10 +472,10 @@
angular.module('ovTopo')
.factory('TopoPanelService',
['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService',
- 'FlashService', 'WebSocketService', 'ButtonService',
+ 'FlashService', 'WebSocketService', 'ButtonService', 'MastService',
function (_$log_, _$window_, _$rootScope_,
- _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) {
+ _fs_, _ps_, _gs_, _flash_, _wss_, _bns_, _mast_) {
$log = _$log_;
$window = _$window_;
$rootScope = _$rootScope_;
@@ -482,6 +485,7 @@
flash = _flash_;
wss = _wss_;
bns = _bns_;
+ mast = _mast_;
return {
initPanels: initPanels,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
index 110160c..f009e2f 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
@@ -23,7 +23,7 @@
'use strict';
// injected references
- var $log, tbs, ps, api;
+ var $log, fs, tbs, ps, api;
// internal state
var toolbar, keyData, cachedState;
@@ -124,8 +124,9 @@
var v = keyData.get(key);
v.btn = toolbar.addButton(v.id, v.gid, v.cb, v.tt);
}
- function addToggle(key) {
+ function addToggle(key, suppressIfMobile) {
var v = keyData.get(key);
+ if (suppressIfMobile && fs.isMobile()) { return; }
v.tog = toolbar.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
}
@@ -137,9 +138,9 @@
addToggle('H');
addToggle('M');
- addToggle('P');
+ addToggle('P', true);
addToggle('B');
- addToggle('S');
+ addToggle('S', true);
}
function addSecondRow() {
//addToggle('X');
@@ -197,10 +198,11 @@
angular.module('ovTopo')
.factory('TopoToolbarService',
- ['$log', 'ToolbarService', 'PrefsService',
+ ['$log', 'FnService', 'ToolbarService', 'PrefsService',
- function (_$log_, _tbs_, _ps_) {
+ function (_$log_, _fs_, _tbs_, _ps_) {
$log = _$log_;
+ fs = _fs_;
tbs = _tbs_;
ps = _ps_;