홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
c217cb99 1 parent 31bfc111

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
Inline Side-by-side
Showing 7 changed files with 111 additions and 105 deletions
......@@ -32,19 +32,19 @@ public final class TopoConstants {
public static final class Glyphs {
public static final String BIRD = "bird";
public static final String UNKNOWN = "unknown";
public static final String UNKNOWN = "m_unknown";
public static final String QUERY = "query";
public static final String NODE = "node";
public static final String SWITCH = "switch";
public static final String SWITCH = "m_switch";
public static final String ROUTER = "router";
public static final String ROADM = "roadm";
public static final String ROADM = "m_roadm";
public static final String OTN = "otn";
public static final String ROADM_OTN = "roadm_otn";
public static final String FIBER_SWITCH = "fiber_switch";
public static final String MICROWAVE = "microwave";
public static final String ENDSTATION = "endstation";
public static final String ENDSTATION = "m_endstation";
public static final String BGP_SPEAKER = "bgpSpeaker";
public static final String CHAIN = "chain";
......@@ -59,25 +59,25 @@ public final class TopoConstants {
public static final String GROUP_TABLE = "groupTable";
public static final String METER_TABLE = "meterTable";
public static final String SUMMARY = "summary";
public static final String DETAILS = "details";
public static final String PORTS = "ports";
public static final String MAP = "map";
public static final String CYCLE_LABELS = "cycleLabels";
public static final String OBLIQUE = "oblique";
public static final String FILTERS = "filters";
public static final String RESET_ZOOM = "resetZoom";
public static final String RELATED_INTENTS = "relatedIntents";
public static final String NEXT_INTENT = "nextIntent";
public static final String PREV_INTENT = "prevIntent";
public static final String INTENT_TRAFFIC = "intentTraffic";
public static final String ALL_TRAFFIC = "allTraffic";
public static final String FLOWS = "flows";
public static final String EQ_MASTER = "eqMaster";
public static final String UI_ATTACHED = "uiAttached";
public static final String SUMMARY = "m_summary";
public static final String DETAILS = "m_details";
public static final String PORTS = "m_ports";
public static final String MAP = "m_map";
public static final String CYCLE_LABELS = "m_cycleLabels";
public static final String OBLIQUE = "m_oblique";
public static final String FILTERS = "m_filters";
public static final String RESET_ZOOM = "m_resetZoom";
public static final String RELATED_INTENTS = "m_relatedIntents";
public static final String NEXT = "m_next";
public static final String PREV = "m_prev";
public static final String INTENT_TRAFFIC = "m_intentTraffic";
public static final String ALL_TRAFFIC = "m_allTraffic";
public static final String FLOWS = "m_flows";
public static final String EQ_MASTER = "m_eqMaster";
public static final String UI_ATTACHED = "m_uiAttached";
public static final String CHECK_MARK = "checkMark";
public static final String X_MARK = "xMark";
public static final String X_MARK = "m_xMark";
public static final String TRIANGLE_UP = "triangleUp";
public static final String TRIANGLE_DOWN = "triangleDown";
public static final String PLUS = "plus";
......@@ -85,7 +85,7 @@ public final class TopoConstants {
public static final String PLAY = "play";
public static final String STOP = "stop";
public static final String CLOUD = "cloud";
public static final String CLOUD = "m_cloud";
}
/**
......
......@@ -978,7 +978,32 @@
'M47.2,49.3V48.1c-0.3-2.3.5-4.9,2.7-7.5s3-4,3-5.9-1.4-3.7-4.1-3.7' +
'a7.7,7.7,0,0,0-4.4,1.3l-1-2.7A11.3,11.3,0,0,1,49.5,28' +
'c5,0,7.2,3.1,7.2,6.3s-1.6,5-3.7,7.5-2.6,4.1-2.5,6.3v1.1H47.2Z' +
'm-1,6a2.5,2.5,0,0,1,2.6-2.7A2.7,2.7,0,1,1,46.3,55.3Z'
'm-1,6a2.5,2.5,0,0,1,2.6-2.7A2.7,2.7,0,1,1,46.3,55.3Z',
// TODO: replace with MOJO official design
m_endstation: 'M75,52H25a1.8,1.8,0,0,1-1.8-1.8V37.3' +
'A1.8,1.8,0,0,1,25,35.5H75a1.8,1.8,0,0,1,1.8,1.8V50.2' +
'A1.8,1.8,0,0,1,75,52ZM26.9,48.3H73.1V39.1H26.9v9.2ZM35.5,45.7' +
'H30.7a1.8,1.8,0,0,1,0-3.7h4.8A1.8,1.8,0,1,1,35.5,45.7Z' +
'M72.1,62.7a1.8,1.8,0,0,1-1.8,1.8H29.8a1.8,1.8,0,1,1,0-3.7H48.2' +
'V56a1.8,1.8,0,1,1,3.7,0v4.8H70.2A1.9,1.9,0,0,1,72.1,62.7Z',
// TODO: replace with (updated) MOJO official design
m_relatedIntents: 'M31.1,65.3H21.4a3,3,0,0,1-3-3V52.5' +
'a3,3,0,0,1,3-3h9.7a3,3,0,0,1,3,3v9.8A3,3,0,0,1,31.1,65.3Z' +
'M78.3,38.8H68.6a3,3,0,0,1-3-3V26a3,3,0,0,1,3-3h9.7' +
'a3,3,0,0,1,3,3v9.8A3,3,0,0,1,78.3,38.8ZM40.9,35H31' +
'A3,3,0,0,1,28,32V22.2a3,3,0,0,1,3.1-3h9.9a3,3,0,0,1,3.1,3V32' +
'A3,3,0,0,1,40.9,35ZM58.9,80.6H49a3.1,3.1,0,0,1-3.1-3V67.8' +
'a3.1,3.1,0,0,1,3.1-3h9.9a3.1,3.1,0,0,1,3.1,3v9.8' +
'A3.1,3.1,0,0,1,58.9,80.6ZM37.5,58.5a1.9,1.9,0,0,1-1.2-3.3' +
'L61.2,34.3a1.9,1.9,0,0,1,2.4,2.8L38.6,58A1.8,1.8,0,0,1,37.5,58.5Z' +
'M42.5,75.2H41.9L27.6,70a1.9,1.9,0,0,1,1.2-3.5l14.3,5' +
'A1.9,1.9,0,0,1,42.5,75.2ZM64.8,73.8H64.2A1.9,1.9,0,0,1,63,71.5' +
'l8.7-29.7a1.9,1.9,0,0,1,3.6,1L66.5,72.5A1.9,1.9,0,0,1,64.8,73.8Z' +
'M27.4,47.9a1.9,1.9,0,0,1-1.5-3l5.8-7.7a1.9,1.9,0,0,1,2.9,2.2' +
'l-5.8,7.7A1.8,1.8,0,0,1,27.4,47.9ZM62.6,32H62.3L46.6,28.7' +
'a1.9,1.9,0,0,1,.7-3.6L63,28.3A1.9,1.9,0,0,1,62.6,32Z'
};
......
......@@ -18,82 +18,62 @@
ONOS GUI -- Button Service (theme) -- CSS file
*/
/* TODO: dark theme */
/* Selected button color */
.light .button svg.embeddedIcon .icon rect,
/* === SELECTED BUTTONS === */
/* Selected toggle / radio button */
.light .toggleButton.selected svg.embeddedIcon .icon rect,
.light .radioButton.selected svg.embeddedIcon .icon rect {
fill: #939598;
fill: #e4f0f6;
}
.light .button:hover svg.embeddedIcon .icon rect,
.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
/* NOTE: selected radio button should NOT have hover highlight */
{
fill: #444444;
/* Selected:hover (normal) button */
.light .button:hover svg.embeddedIcon .icon rect {
stroke: black;
stroke-width: 1px;
}
/* Selected:hover toggle-button */
.light .toggleButton.selected:hover svg.embeddedIcon .icon rect {
fill: #c0d8f0;
stroke: black;
stroke-width: 1px;
}
/* Selected toggle/radio button and normal button glyph color */
.light .button svg.embeddedIcon .glyph,
.light .toggleButton.selected svg.embeddedIcon .glyph,
.light .radioButton.selected svg.embeddedIcon .glyph {
fill: white;
fill: #5b99d2;
}
.dark .button svg.embeddedIcon .icon rect,
.dark .toggleButton.selected svg.embeddedIcon .icon rect,
.dark .radioButton.selected svg.embeddedIcon .icon rect {
fill: #151515;
}
.dark .button:hover svg.embeddedIcon .icon rect,
.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
/* NOTE: selected radio button should NOT have hover highlight */
{
fill: #444;
}
.dark .button svg.embeddedIcon .glyph,
.dark .toggleButton.selected svg.embeddedIcon .glyph,
.dark .radioButton.selected svg.embeddedIcon .glyph {
fill: #B2B2B2;
}
/* === UNSELECTED BUTTONS === */
/* Unselected button color */
/* Unselected toggle / radio button */
.light .toggleButton svg.embeddedIcon .icon rect,
.light .radioButton svg.embeddedIcon .icon rect {
fill: #eee;
/* no fill */
}
/* Unselected:hover toggle / radio button */
.light .toggleButton:hover svg.embeddedIcon .icon rect,
.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
fill: #ccc;
fill: #e4f0f6;
stroke: black;
stroke-width: 1px;
}
/* Unselected toggle / radio button */
.light .toggleButton svg.embeddedIcon .glyph,
.light .radioButton svg.embeddedIcon .glyph {
fill: #bbb;
}
/* Unselected:hover toggle / radio button */
.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
fill: #999;
}
.dark .toggleButton svg.embeddedIcon .icon rect,
.dark .radioButton svg.embeddedIcon .icon rect {
fill: #303030;
}
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
fill: #555;
}
.dark .toggleButton svg.embeddedIcon .glyph,
.dark .radioButton svg.embeddedIcon .glyph {
fill: #565656;
}
.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
fill: #777;
fill: #5b99d2;
}
......
......@@ -64,6 +64,9 @@
fill: #c0242b;
}
#toolbar-topo-tbar .tbar-row.right {
color: #aaa;
}
/* --- Topo Instance Panel --- */
......
......@@ -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 },
// 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' },
E: { id: 'eqMaster-btn', gid: 'eqMaster' }
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 },
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: '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);
......
......@@ -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: [
......
......@@ -21,7 +21,7 @@
describe('factory: fw/svg/glyph.js', function() {
var $log, fs, gs, d3Elem, svg;
var numBaseGlyphs = 79,
var numBaseGlyphs = 81,
vbBird = '352 224 113 112',
vbGlyph = '0 0 110 110',
vbBadge = '0 0 10 10',
......