GUI -- Mobile GUI work. Disabled port highlighting, suppressed port highlighting…

…/sprite layer toolbar buttons, adjusted panel and navigation/mast heights.

Change-Id: I36142be78167fc1eb73cc846e7222391cb8b8740

@@ -34,6 +34,10 @@
     border-radius: 6px;
     border-radius: 6px;
 }
 }
 
 
+html[data-platform='iPad'] .floatpanel {
+    top: 80px;
+}
+
 .light .floatpanel {
 .light .floatpanel {
     background-color: rgba(255,255,255,0.8);
     background-color: rgba(255,255,255,0.8);
     color: black;
     color: black;

@@ -24,7 +24,8 @@
     var $log;
     var $log;
 
 
     // configuration
     // configuration
-    var mastHeight = 36;
+    var mastHeight = 36,
+        padMobile = 16;
 
 
     angular.module('onosMast', ['onosNav'])
     angular.module('onosMast', ['onosNav'])
         .controller('MastCtrl', ['$log', 'NavService', function (_$log_, ns) {
         .controller('MastCtrl', ['$log', 'NavService', function (_$log_, ns) {
@@ -44,9 +45,11 @@
         }])
         }])
 
 
         // also define a service to allow lookup of mast height.
         // also define a service to allow lookup of mast height.
-        .factory('MastService', [function () {
+        .factory('MastService', ['FnService', function (fs) {
             return {
             return {
-                mastHeight: function () { return mastHeight; }
+                mastHeight: function () {
+                    return fs.isMobile() ? mastHeight + padMobile : mastHeight;
+                }
             }
             }
         }]);
         }]);
 
 

@@ -27,6 +27,10 @@
     visibility: hidden;
     visibility: hidden;
 }
 }
 
 
+html[data-platform='iPad'] #nav {
+    top: 57px;
+}
+
 .light #nav {
 .light #nav {
     background-color: #bbb;
     background-color: #bbb;
     box-shadow: 0 2px 8px #777;
     box-shadow: 0 2px 8px #777;

@@ -34,7 +34,8 @@
             width: 20,
             width: 20,
             margin: 0,
             margin: 0,
             hideMargin: -20,
             hideMargin: -20,
-            top: '80%',
+            top: 'auto',
+            bottom: '10px',
             fade: false,
             fade: false,
             shown: false
             shown: false
         };
         };
@@ -101,7 +102,8 @@
         };
         };
 
 
         panel.classed('toolbar', true)
         panel.classed('toolbar', true)
-            .style('top', settings.top);
+            .style('top', settings.top)
+            .style('bottom', settings.bottom);
 
 
         // Helper functions
         // Helper functions
 
 

@@ -84,6 +84,9 @@
     /* Base css from panel.css */
     /* Base css from panel.css */
     top: 310px;
     top: 310px;
 }
 }
+html[data-platform='iPad'] #topo-p-detail {
+    top: 326px;
+}
 
 
 #topo-p-detail .actionBtns .actionBtn {
 #topo-p-detail .actionBtns .actionBtn {
     display: inline-block;
     display: inline-block;

@@ -288,7 +288,7 @@
                 td3 = _td3_;
                 td3 = _td3_;
                 svg = api.svg;
                 svg = api.svg;
                 network = api.network;
                 network = api.network;
-                if (showPorts) {
+                if (showPorts && !fs.isMobile()) {
                     svg.on('mousemove', mouseMoveHandler);
                     svg.on('mousemove', mouseMoveHandler);
                 }
                 }
                 svg.on('click', mouseClickHandler);
                 svg.on('click', mouseClickHandler);

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns;
+    var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns, mast;
 
 
     // constants
     // constants
     var pCls = 'topo-p',
     var pCls = 'topo-p',
@@ -32,12 +32,13 @@
         panelOpts = {
         panelOpts = {
             width: 260
             width: 260
         },
         },
-        sumFromTop = 64,
-        sumMax = 226;
+        sumMax = 226,
+        padTop = 28;
 
 
     // internal state
     // internal state
     var useDetails = true,      // should we show details if we have 'em?
     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
     // panels
     var summary, detail;
     var summary, detail;
@@ -396,8 +397,9 @@
     // ==========================
     // ==========================
 
 
     function augmentDetailPanel() {
     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) {
         d._move = function (y, cb) {
             var yp = d.ypos,
             var yp = d.ypos,
@@ -448,6 +450,7 @@
     // ==========================
     // ==========================
 
 
     function initPanels() {
     function initPanels() {
+        sumFromTop = mast.mastHeight() + padTop;
         summary = createTopoPanel(idSum, panelOpts);
         summary = createTopoPanel(idSum, panelOpts);
         detail = createTopoPanel(idDet, panelOpts);
         detail = createTopoPanel(idDet, panelOpts);
 
 
@@ -469,10 +472,10 @@
     angular.module('ovTopo')
     angular.module('ovTopo')
     .factory('TopoPanelService',
     .factory('TopoPanelService',
         ['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService',
         ['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService',
-            'FlashService', 'WebSocketService', 'ButtonService',
+            'FlashService', 'WebSocketService', 'ButtonService', 'MastService',
 
 
         function (_$log_, _$window_, _$rootScope_,
         function (_$log_, _$window_, _$rootScope_,
-                  _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) {
+                  _fs_, _ps_, _gs_, _flash_, _wss_, _bns_, _mast_) {
             $log = _$log_;
             $log = _$log_;
             $window = _$window_;
             $window = _$window_;
             $rootScope = _$rootScope_;
             $rootScope = _$rootScope_;
@@ -482,6 +485,7 @@
             flash = _flash_;
             flash = _flash_;
             wss = _wss_;
             wss = _wss_;
             bns = _bns_;
             bns = _bns_;
+            mast = _mast_;
 
 
             return {
             return {
                 initPanels: initPanels,
                 initPanels: initPanels,

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected references
     // injected references
-    var $log, tbs, ps, api;
+    var $log, fs, tbs, ps, api;
 
 
     // internal state
     // internal state
     var toolbar, keyData, cachedState;
     var toolbar, keyData, cachedState;
@@ -124,8 +124,9 @@
         var v = keyData.get(key);
         var v = keyData.get(key);
         v.btn = toolbar.addButton(v.id, v.gid, v.cb, v.tt);
         v.btn = toolbar.addButton(v.id, v.gid, v.cb, v.tt);
     }
     }
-    function addToggle(key) {
+    function addToggle(key, suppressIfMobile) {
         var v = keyData.get(key);
         var v = keyData.get(key);
+        if (suppressIfMobile && fs.isMobile()) { return; }
         v.tog = toolbar.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
         v.tog = toolbar.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
     }
     }
 
 
@@ -137,9 +138,9 @@
 
 
         addToggle('H');
         addToggle('H');
         addToggle('M');
         addToggle('M');
-        addToggle('P');
+        addToggle('P', true);
         addToggle('B');
         addToggle('B');
-        addToggle('S');
+        addToggle('S', true);
     }
     }
     function addSecondRow() {
     function addSecondRow() {
         //addToggle('X');
         //addToggle('X');
@@ -197,10 +198,11 @@
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
         .factory('TopoToolbarService',
         .factory('TopoToolbarService',
-        ['$log', 'ToolbarService', 'PrefsService',
+        ['$log', 'FnService', 'ToolbarService', 'PrefsService',
 
 
-        function (_$log_, _tbs_, _ps_) {
+        function (_$log_, _fs_, _tbs_, _ps_) {
             $log = _$log_;
             $log = _$log_;
+            fs = _fs_;
             tbs = _tbs_;
             tbs = _tbs_;
             ps = _ps_;
             ps = _ps_;