Updated topo toolbar to use mojo glyphs and give it a cleaner look.
- Changed color scheme / hover behavior
- Differentiate between regular buttons and toggle buttons (visually)
- (Added temp. placeholders for 'endstation' and 'relatedIntents' glyphs)
Change-Id: I0338b076fe71e58a274542360b2b077c93dd867d
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index e0b88e3..7b15a0d 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -64,6 +64,9 @@
fill: #c0242b;
}
+#toolbar-topo-tbar .tbar-row.right {
+ color: #aaa;
+}
/* --- Topo Instance Panel --- */
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 136e7d8..6d07da7 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
@@ -42,24 +42,22 @@
// key to button mapping data
var k2b = {
- O: { id: 'summary-tog', gid: 'summary', isel: true},
- I: { id: 'instance-tog', gid: 'uiAttached', isel: true },
- D: { id: 'details-tog', gid: 'details', isel: true },
- H: { id: 'hosts-tog', gid: 'endstation', isel: false },
- M: { id: 'offline-tog', gid: 'switch', isel: true },
- P: { id: 'ports-tog', gid: 'ports', isel: true },
- B: { id: 'bkgrnd-tog', gid: 'map', isel: false },
- G: { id: 'bkgrnd-sel', gid: 'filters' },
- S: { id: 'sprite-tog', gid: 'cloud', isel: false },
+ O: { id: 'summary-tog', gid: 'm_summary', isel: true},
+ I: { id: 'instance-tog', gid: 'm_uiAttached', isel: true },
+ D: { id: 'details-tog', gid: 'm_details', isel: true },
+ H: { id: 'hosts-tog', gid: 'm_endstation', isel: false },
+ M: { id: 'offline-tog', gid: 'm_switch', isel: true },
+ P: { id: 'ports-tog', gid: 'm_ports', isel: true },
+ B: { id: 'bkgrnd-tog', gid: 'm_map', isel: false },
+ G: { id: 'bkgrnd-sel', gid: 'm_selectMap' },
+ S: { id: 'sprite-tog', gid: 'm_cloud', isel: false },
- // TODO: add reset-node-locations button to toolbar
- //X: { id: 'nodelock-tog', gid: 'lock', isel: false },
- Z: { id: 'oblique-tog', gid: 'oblique', isel: false },
- N: { id: 'filters-btn', gid: 'filters' },
- L: { id: 'cycleLabels-btn', gid: 'cycleLabels' },
- R: { id: 'resetZoom-btn', gid: 'resetZoom' },
+ Z: { id: 'oblique-tog', gid: 'm_oblique', isel: false },
+ N: { id: 'filters-btn', gid: 'm_filters' },
+ L: { id: 'cycleLabels-btn', gid: 'm_cycleLabels' },
+ R: { id: 'resetZoom-btn', gid: 'm_resetZoom' },
- E: { id: 'eqMaster-btn', gid: 'eqMaster' }
+ E: { id: 'eqMaster-btn', gid: 'm_eqMaster' }
};
var prohibited = [
@@ -171,7 +169,7 @@
// generate radio button set for overlays; start with 'none'
var rset = [{
- gid: 'unknown',
+ gid: 'm_unknown',
tooltip: 'No Overlay',
cb: function () {
tov.tbSelection(null, switchOverlayActions);
diff --git a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
index a7a3c60..304b4e6 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoTrafficNew.js
@@ -35,7 +35,7 @@
// traffic overlay definition
var overlay = {
overlayId: 'traffic',
- glyphId: 'allTraffic',
+ glyphId: 'm_allTraffic',
tooltip: 'Traffic Overlay',
// NOTE: Traffic glyphs already installed as part of the base ONOS set.
@@ -53,13 +53,13 @@
// (keys match button identifiers, also defined in TrafficOverlay.java)
buttons: {
showDeviceFlows: {
- gid: 'flows',
+ gid: 'm_flows',
tt: 'Show Device Flows',
cb: function (data) { tts.showDeviceLinkFlows(); }
},
showRelatedTraffic: {
- gid: 'relatedIntents',
+ gid: 'm_relatedIntents',
tt: 'Show Related Traffic',
cb: function (data) { tts.showRelatedIntents(); }
}
@@ -71,43 +71,43 @@
0: {
cb: function () { tts.cancelTraffic(true); },
tt: 'Cancel traffic monitoring',
- gid: 'xMark'
+ gid: 'm_xMark'
},
A: {
cb: function () { tts.showAllFlowTraffic(); },
tt: 'Monitor all traffic using flow stats',
- gid: 'allTraffic'
+ gid: 'm_allTraffic'
},
Q: {
cb: function () { tts.showAllPortTraffic(); },
tt: 'Monitor all traffic using port stats',
- gid: 'allTraffic'
+ gid: 'm_allTraffic'
},
F: {
cb: function () { tts.showDeviceLinkFlows(); },
tt: 'Show device link flows',
- gid: 'flows'
+ gid: 'm_flows'
},
V: {
cb: function () { tts.showRelatedIntents(); },
tt: 'Show all related intents',
- gid: 'relatedIntents'
+ gid: 'm_relatedIntents'
},
leftArrow: {
cb: function () { tts.showPrevIntent(); },
tt: 'Show previous related intent',
- gid: 'prevIntent'
+ gid: 'm_prev'
},
rightArrow: {
cb: function () { tts.showNextIntent(); },
tt: 'Show next related intent',
- gid: 'nextIntent'
+ gid: 'm_next'
},
W: {
cb: function () { tts.showSelectedIntentTraffic(); },
tt: 'Monitor traffic of selected intent',
- gid: 'intentTraffic'
+ gid: 'm_intentTraffic'
},
_keyOrder: [