홍길동 / 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 { ...@@ -32,19 +32,19 @@ public final class TopoConstants {
32 public static final class Glyphs { 32 public static final class Glyphs {
33 public static final String BIRD = "bird"; 33 public static final String BIRD = "bird";
34 34
35 - public static final String UNKNOWN = "unknown"; 35 + public static final String UNKNOWN = "m_unknown";
36 public static final String QUERY = "query"; 36 public static final String QUERY = "query";
37 public static final String NODE = "node"; 37 public static final String NODE = "node";
38 38
39 - public static final String SWITCH = "switch"; 39 + public static final String SWITCH = "m_switch";
40 public static final String ROUTER = "router"; 40 public static final String ROUTER = "router";
41 - public static final String ROADM = "roadm"; 41 + public static final String ROADM = "m_roadm";
42 public static final String OTN = "otn"; 42 public static final String OTN = "otn";
43 public static final String ROADM_OTN = "roadm_otn"; 43 public static final String ROADM_OTN = "roadm_otn";
44 public static final String FIBER_SWITCH = "fiber_switch"; 44 public static final String FIBER_SWITCH = "fiber_switch";
45 public static final String MICROWAVE = "microwave"; 45 public static final String MICROWAVE = "microwave";
46 46
47 - public static final String ENDSTATION = "endstation"; 47 + public static final String ENDSTATION = "m_endstation";
48 public static final String BGP_SPEAKER = "bgpSpeaker"; 48 public static final String BGP_SPEAKER = "bgpSpeaker";
49 49
50 public static final String CHAIN = "chain"; 50 public static final String CHAIN = "chain";
...@@ -59,25 +59,25 @@ public final class TopoConstants { ...@@ -59,25 +59,25 @@ public final class TopoConstants {
59 public static final String GROUP_TABLE = "groupTable"; 59 public static final String GROUP_TABLE = "groupTable";
60 public static final String METER_TABLE = "meterTable"; 60 public static final String METER_TABLE = "meterTable";
61 61
62 - public static final String SUMMARY = "summary"; 62 + public static final String SUMMARY = "m_summary";
63 - public static final String DETAILS = "details"; 63 + public static final String DETAILS = "m_details";
64 - public static final String PORTS = "ports"; 64 + public static final String PORTS = "m_ports";
65 - public static final String MAP = "map"; 65 + public static final String MAP = "m_map";
66 - public static final String CYCLE_LABELS = "cycleLabels"; 66 + public static final String CYCLE_LABELS = "m_cycleLabels";
67 - public static final String OBLIQUE = "oblique"; 67 + public static final String OBLIQUE = "m_oblique";
68 - public static final String FILTERS = "filters"; 68 + public static final String FILTERS = "m_filters";
69 - public static final String RESET_ZOOM = "resetZoom"; 69 + public static final String RESET_ZOOM = "m_resetZoom";
70 - public static final String RELATED_INTENTS = "relatedIntents"; 70 + public static final String RELATED_INTENTS = "m_relatedIntents";
71 - public static final String NEXT_INTENT = "nextIntent"; 71 + public static final String NEXT = "m_next";
72 - public static final String PREV_INTENT = "prevIntent"; 72 + public static final String PREV = "m_prev";
73 - public static final String INTENT_TRAFFIC = "intentTraffic"; 73 + public static final String INTENT_TRAFFIC = "m_intentTraffic";
74 - public static final String ALL_TRAFFIC = "allTraffic"; 74 + public static final String ALL_TRAFFIC = "m_allTraffic";
75 - public static final String FLOWS = "flows"; 75 + public static final String FLOWS = "m_flows";
76 - public static final String EQ_MASTER = "eqMaster"; 76 + public static final String EQ_MASTER = "m_eqMaster";
77 - 77 +
78 - public static final String UI_ATTACHED = "uiAttached"; 78 + public static final String UI_ATTACHED = "m_uiAttached";
79 public static final String CHECK_MARK = "checkMark"; 79 public static final String CHECK_MARK = "checkMark";
80 - public static final String X_MARK = "xMark"; 80 + public static final String X_MARK = "m_xMark";
81 public static final String TRIANGLE_UP = "triangleUp"; 81 public static final String TRIANGLE_UP = "triangleUp";
82 public static final String TRIANGLE_DOWN = "triangleDown"; 82 public static final String TRIANGLE_DOWN = "triangleDown";
83 public static final String PLUS = "plus"; 83 public static final String PLUS = "plus";
...@@ -85,7 +85,7 @@ public final class TopoConstants { ...@@ -85,7 +85,7 @@ public final class TopoConstants {
85 public static final String PLAY = "play"; 85 public static final String PLAY = "play";
86 public static final String STOP = "stop"; 86 public static final String STOP = "stop";
87 87
88 - public static final String CLOUD = "cloud"; 88 + public static final String CLOUD = "m_cloud";
89 } 89 }
90 90
91 /** 91 /**
......
...@@ -978,7 +978,32 @@ ...@@ -978,7 +978,32 @@
978 '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' + 978 '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' +
979 'a7.7,7.7,0,0,0-4.4,1.3l-1-2.7A11.3,11.3,0,0,1,49.5,28' + 979 'a7.7,7.7,0,0,0-4.4,1.3l-1-2.7A11.3,11.3,0,0,1,49.5,28' +
980 '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' + 980 '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' +
981 - 'm-1,6a2.5,2.5,0,0,1,2.6-2.7A2.7,2.7,0,1,1,46.3,55.3Z' 981 + 'm-1,6a2.5,2.5,0,0,1,2.6-2.7A2.7,2.7,0,1,1,46.3,55.3Z',
982 +
983 + // TODO: replace with MOJO official design
984 + m_endstation: 'M75,52H25a1.8,1.8,0,0,1-1.8-1.8V37.3' +
985 + 'A1.8,1.8,0,0,1,25,35.5H75a1.8,1.8,0,0,1,1.8,1.8V50.2' +
986 + 'A1.8,1.8,0,0,1,75,52ZM26.9,48.3H73.1V39.1H26.9v9.2ZM35.5,45.7' +
987 + 'H30.7a1.8,1.8,0,0,1,0-3.7h4.8A1.8,1.8,0,1,1,35.5,45.7Z' +
988 + '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' +
989 + 'V56a1.8,1.8,0,1,1,3.7,0v4.8H70.2A1.9,1.9,0,0,1,72.1,62.7Z',
990 +
991 + // TODO: replace with (updated) MOJO official design
992 + m_relatedIntents: 'M31.1,65.3H21.4a3,3,0,0,1-3-3V52.5' +
993 + 'a3,3,0,0,1,3-3h9.7a3,3,0,0,1,3,3v9.8A3,3,0,0,1,31.1,65.3Z' +
994 + 'M78.3,38.8H68.6a3,3,0,0,1-3-3V26a3,3,0,0,1,3-3h9.7' +
995 + 'a3,3,0,0,1,3,3v9.8A3,3,0,0,1,78.3,38.8ZM40.9,35H31' +
996 + 'A3,3,0,0,1,28,32V22.2a3,3,0,0,1,3.1-3h9.9a3,3,0,0,1,3.1,3V32' +
997 + 'A3,3,0,0,1,40.9,35ZM58.9,80.6H49a3.1,3.1,0,0,1-3.1-3V67.8' +
998 + 'a3.1,3.1,0,0,1,3.1-3h9.9a3.1,3.1,0,0,1,3.1,3v9.8' +
999 + 'A3.1,3.1,0,0,1,58.9,80.6ZM37.5,58.5a1.9,1.9,0,0,1-1.2-3.3' +
1000 + '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' +
1001 + 'M42.5,75.2H41.9L27.6,70a1.9,1.9,0,0,1,1.2-3.5l14.3,5' +
1002 + 'A1.9,1.9,0,0,1,42.5,75.2ZM64.8,73.8H64.2A1.9,1.9,0,0,1,63,71.5' +
1003 + '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' +
1004 + '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' +
1005 + 'l-5.8,7.7A1.8,1.8,0,0,1,27.4,47.9ZM62.6,32H62.3L46.6,28.7' +
1006 + 'a1.9,1.9,0,0,1,.7-3.6L63,28.3A1.9,1.9,0,0,1,62.6,32Z'
982 1007
983 }; 1008 };
984 1009
......
...@@ -18,82 +18,62 @@ ...@@ -18,82 +18,62 @@
18 ONOS GUI -- Button Service (theme) -- CSS file 18 ONOS GUI -- Button Service (theme) -- CSS file
19 */ 19 */
20 20
21 +/* TODO: dark theme */
21 22
22 -/* Selected button color */ 23 +
23 -.light .button svg.embeddedIcon .icon rect, 24 +/* === SELECTED BUTTONS === */
25 +
26 +/* Selected toggle / radio button */
24 .light .toggleButton.selected svg.embeddedIcon .icon rect, 27 .light .toggleButton.selected svg.embeddedIcon .icon rect,
25 .light .radioButton.selected svg.embeddedIcon .icon rect { 28 .light .radioButton.selected svg.embeddedIcon .icon rect {
26 - fill: #939598; 29 + fill: #e4f0f6;
27 } 30 }
28 31
29 -.light .button:hover svg.embeddedIcon .icon rect, 32 +/* Selected:hover (normal) button */
30 -.light .toggleButton.selected:hover svg.embeddedIcon .icon rect 33 +.light .button:hover svg.embeddedIcon .icon rect {
31 - /* NOTE: selected radio button should NOT have hover highlight */ 34 + stroke: black;
32 -{ 35 + stroke-width: 1px;
33 - fill: #444444;
34 } 36 }
35 37
38 +/* Selected:hover toggle-button */
39 +.light .toggleButton.selected:hover svg.embeddedIcon .icon rect {
40 + fill: #c0d8f0;
41 + stroke: black;
42 + stroke-width: 1px;
43 +}
44 +
45 +/* Selected toggle/radio button and normal button glyph color */
36 .light .button svg.embeddedIcon .glyph, 46 .light .button svg.embeddedIcon .glyph,
37 .light .toggleButton.selected svg.embeddedIcon .glyph, 47 .light .toggleButton.selected svg.embeddedIcon .glyph,
38 .light .radioButton.selected svg.embeddedIcon .glyph { 48 .light .radioButton.selected svg.embeddedIcon .glyph {
39 - fill: white; 49 + fill: #5b99d2;
40 } 50 }
41 51
42 -.dark .button svg.embeddedIcon .icon rect,
43 -.dark .toggleButton.selected svg.embeddedIcon .icon rect,
44 -.dark .radioButton.selected svg.embeddedIcon .icon rect {
45 - fill: #151515;
46 -}
47 52
48 -.dark .button:hover svg.embeddedIcon .icon rect, 53 +/* === UNSELECTED BUTTONS === */
49 -.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
50 - /* NOTE: selected radio button should NOT have hover highlight */
51 -{
52 - fill: #444;
53 -}
54 -
55 -.dark .button svg.embeddedIcon .glyph,
56 -.dark .toggleButton.selected svg.embeddedIcon .glyph,
57 -.dark .radioButton.selected svg.embeddedIcon .glyph {
58 - fill: #B2B2B2;
59 -}
60 54
61 -/* Unselected button color */ 55 +/* Unselected toggle / radio button */
62 .light .toggleButton svg.embeddedIcon .icon rect, 56 .light .toggleButton svg.embeddedIcon .icon rect,
63 .light .radioButton svg.embeddedIcon .icon rect { 57 .light .radioButton svg.embeddedIcon .icon rect {
64 - fill: #eee; 58 + /* no fill */
65 } 59 }
66 60
61 +/* Unselected:hover toggle / radio button */
67 .light .toggleButton:hover svg.embeddedIcon .icon rect, 62 .light .toggleButton:hover svg.embeddedIcon .icon rect,
68 .light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect { 63 .light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
69 - fill: #ccc; 64 + fill: #e4f0f6;
65 + stroke: black;
66 + stroke-width: 1px;
70 } 67 }
71 68
69 +/* Unselected toggle / radio button */
72 .light .toggleButton svg.embeddedIcon .glyph, 70 .light .toggleButton svg.embeddedIcon .glyph,
73 .light .radioButton svg.embeddedIcon .glyph { 71 .light .radioButton svg.embeddedIcon .glyph {
74 fill: #bbb; 72 fill: #bbb;
75 } 73 }
74 +
75 +/* Unselected:hover toggle / radio button */
76 .light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph, 76 .light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
77 .light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph { 77 .light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
78 - fill: #999; 78 + fill: #5b99d2;
79 -}
80 -
81 -.dark .toggleButton svg.embeddedIcon .icon rect,
82 -.dark .radioButton svg.embeddedIcon .icon rect {
83 - fill: #303030;
84 -}
85 -
86 -.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
87 -.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
88 - fill: #555;
89 -}
90 -
91 -.dark .toggleButton svg.embeddedIcon .glyph,
92 -.dark .radioButton svg.embeddedIcon .glyph {
93 - fill: #565656;
94 -}
95 -
96 -.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
97 -.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
98 - fill: #777;
99 } 79 }
......
...@@ -64,6 +64,9 @@ ...@@ -64,6 +64,9 @@
64 fill: #c0242b; 64 fill: #c0242b;
65 } 65 }
66 66
67 +#toolbar-topo-tbar .tbar-row.right {
68 + color: #aaa;
69 +}
67 70
68 /* --- Topo Instance Panel --- */ 71 /* --- Topo Instance Panel --- */
69 72
......
...@@ -42,24 +42,22 @@ ...@@ -42,24 +42,22 @@
42 42
43 // key to button mapping data 43 // key to button mapping data
44 var k2b = { 44 var k2b = {
45 - O: { id: 'summary-tog', gid: 'summary', isel: true}, 45 + O: { id: 'summary-tog', gid: 'm_summary', isel: true},
46 - I: { id: 'instance-tog', gid: 'uiAttached', isel: true }, 46 + I: { id: 'instance-tog', gid: 'm_uiAttached', isel: true },
47 - D: { id: 'details-tog', gid: 'details', isel: true }, 47 + D: { id: 'details-tog', gid: 'm_details', isel: true },
48 - H: { id: 'hosts-tog', gid: 'endstation', isel: false }, 48 + H: { id: 'hosts-tog', gid: 'm_endstation', isel: false },
49 - M: { id: 'offline-tog', gid: 'switch', isel: true }, 49 + M: { id: 'offline-tog', gid: 'm_switch', isel: true },
50 - P: { id: 'ports-tog', gid: 'ports', isel: true }, 50 + P: { id: 'ports-tog', gid: 'm_ports', isel: true },
51 - B: { id: 'bkgrnd-tog', gid: 'map', isel: false }, 51 + B: { id: 'bkgrnd-tog', gid: 'm_map', isel: false },
52 - G: { id: 'bkgrnd-sel', gid: 'filters' }, 52 + G: { id: 'bkgrnd-sel', gid: 'm_selectMap' },
53 - S: { id: 'sprite-tog', gid: 'cloud', isel: false }, 53 + S: { id: 'sprite-tog', gid: 'm_cloud', isel: false },
54 - 54 +
55 - // TODO: add reset-node-locations button to toolbar 55 + Z: { id: 'oblique-tog', gid: 'm_oblique', isel: false },
56 - //X: { id: 'nodelock-tog', gid: 'lock', isel: false }, 56 + N: { id: 'filters-btn', gid: 'm_filters' },
57 - Z: { id: 'oblique-tog', gid: 'oblique', isel: false }, 57 + L: { id: 'cycleLabels-btn', gid: 'm_cycleLabels' },
58 - N: { id: 'filters-btn', gid: 'filters' }, 58 + R: { id: 'resetZoom-btn', gid: 'm_resetZoom' },
59 - L: { id: 'cycleLabels-btn', gid: 'cycleLabels' }, 59 +
60 - R: { id: 'resetZoom-btn', gid: 'resetZoom' }, 60 + E: { id: 'eqMaster-btn', gid: 'm_eqMaster' }
61 -
62 - E: { id: 'eqMaster-btn', gid: 'eqMaster' }
63 }; 61 };
64 62
65 var prohibited = [ 63 var prohibited = [
...@@ -171,7 +169,7 @@ ...@@ -171,7 +169,7 @@
171 169
172 // generate radio button set for overlays; start with 'none' 170 // generate radio button set for overlays; start with 'none'
173 var rset = [{ 171 var rset = [{
174 - gid: 'unknown', 172 + gid: 'm_unknown',
175 tooltip: 'No Overlay', 173 tooltip: 'No Overlay',
176 cb: function () { 174 cb: function () {
177 tov.tbSelection(null, switchOverlayActions); 175 tov.tbSelection(null, switchOverlayActions);
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 // traffic overlay definition 35 // traffic overlay definition
36 var overlay = { 36 var overlay = {
37 overlayId: 'traffic', 37 overlayId: 'traffic',
38 - glyphId: 'allTraffic', 38 + glyphId: 'm_allTraffic',
39 tooltip: 'Traffic Overlay', 39 tooltip: 'Traffic Overlay',
40 40
41 // NOTE: Traffic glyphs already installed as part of the base ONOS set. 41 // NOTE: Traffic glyphs already installed as part of the base ONOS set.
...@@ -53,13 +53,13 @@ ...@@ -53,13 +53,13 @@
53 // (keys match button identifiers, also defined in TrafficOverlay.java) 53 // (keys match button identifiers, also defined in TrafficOverlay.java)
54 buttons: { 54 buttons: {
55 showDeviceFlows: { 55 showDeviceFlows: {
56 - gid: 'flows', 56 + gid: 'm_flows',
57 tt: 'Show Device Flows', 57 tt: 'Show Device Flows',
58 cb: function (data) { tts.showDeviceLinkFlows(); } 58 cb: function (data) { tts.showDeviceLinkFlows(); }
59 }, 59 },
60 60
61 showRelatedTraffic: { 61 showRelatedTraffic: {
62 - gid: 'relatedIntents', 62 + gid: 'm_relatedIntents',
63 tt: 'Show Related Traffic', 63 tt: 'Show Related Traffic',
64 cb: function (data) { tts.showRelatedIntents(); } 64 cb: function (data) { tts.showRelatedIntents(); }
65 } 65 }
...@@ -71,43 +71,43 @@ ...@@ -71,43 +71,43 @@
71 0: { 71 0: {
72 cb: function () { tts.cancelTraffic(true); }, 72 cb: function () { tts.cancelTraffic(true); },
73 tt: 'Cancel traffic monitoring', 73 tt: 'Cancel traffic monitoring',
74 - gid: 'xMark' 74 + gid: 'm_xMark'
75 }, 75 },
76 76
77 A: { 77 A: {
78 cb: function () { tts.showAllFlowTraffic(); }, 78 cb: function () { tts.showAllFlowTraffic(); },
79 tt: 'Monitor all traffic using flow stats', 79 tt: 'Monitor all traffic using flow stats',
80 - gid: 'allTraffic' 80 + gid: 'm_allTraffic'
81 }, 81 },
82 Q: { 82 Q: {
83 cb: function () { tts.showAllPortTraffic(); }, 83 cb: function () { tts.showAllPortTraffic(); },
84 tt: 'Monitor all traffic using port stats', 84 tt: 'Monitor all traffic using port stats',
85 - gid: 'allTraffic' 85 + gid: 'm_allTraffic'
86 }, 86 },
87 F: { 87 F: {
88 cb: function () { tts.showDeviceLinkFlows(); }, 88 cb: function () { tts.showDeviceLinkFlows(); },
89 tt: 'Show device link flows', 89 tt: 'Show device link flows',
90 - gid: 'flows' 90 + gid: 'm_flows'
91 }, 91 },
92 V: { 92 V: {
93 cb: function () { tts.showRelatedIntents(); }, 93 cb: function () { tts.showRelatedIntents(); },
94 tt: 'Show all related intents', 94 tt: 'Show all related intents',
95 - gid: 'relatedIntents' 95 + gid: 'm_relatedIntents'
96 }, 96 },
97 leftArrow: { 97 leftArrow: {
98 cb: function () { tts.showPrevIntent(); }, 98 cb: function () { tts.showPrevIntent(); },
99 tt: 'Show previous related intent', 99 tt: 'Show previous related intent',
100 - gid: 'prevIntent' 100 + gid: 'm_prev'
101 }, 101 },
102 rightArrow: { 102 rightArrow: {
103 cb: function () { tts.showNextIntent(); }, 103 cb: function () { tts.showNextIntent(); },
104 tt: 'Show next related intent', 104 tt: 'Show next related intent',
105 - gid: 'nextIntent' 105 + gid: 'm_next'
106 }, 106 },
107 W: { 107 W: {
108 cb: function () { tts.showSelectedIntentTraffic(); }, 108 cb: function () { tts.showSelectedIntentTraffic(); },
109 tt: 'Monitor traffic of selected intent', 109 tt: 'Monitor traffic of selected intent',
110 - gid: 'intentTraffic' 110 + gid: 'm_intentTraffic'
111 }, 111 },
112 112
113 _keyOrder: [ 113 _keyOrder: [
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 describe('factory: fw/svg/glyph.js', function() { 21 describe('factory: fw/svg/glyph.js', function() {
22 var $log, fs, gs, d3Elem, svg; 22 var $log, fs, gs, d3Elem, svg;
23 23
24 - var numBaseGlyphs = 79, 24 + var numBaseGlyphs = 81,
25 vbBird = '352 224 113 112', 25 vbBird = '352 224 113 112',
26 vbGlyph = '0 0 110 110', 26 vbGlyph = '0 0 110 110',
27 vbBadge = '0 0 10 10', 27 vbBadge = '0 0 10 10',
......