홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
a7f62e1d 1 parent fbfd8b58

ONOS-4359: continued work on theming UI 

- cleaning up device table view, and device details panel.
- updated xMark glyph, added xClose glyph.

Change-Id: I1f5e4496dbfaa58315ddf0a8c2e0f6e4ff163239
Inline Side-by-side
Showing 10 changed files with 76 additions and 107 deletions
...@@ -138,8 +138,7 @@ public class UiExtensionManager ...@@ -138,8 +138,7 @@ public class UiExtensionManager
138 new UiView(NETWORK, "link", "Links", "nav_links"), 138 new UiView(NETWORK, "link", "Links", "nav_links"),
139 new UiView(NETWORK, "host", "Hosts", "nav_hosts"), 139 new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
140 new UiView(NETWORK, "intent", "Intents", "nav_intents"), 140 new UiView(NETWORK, "intent", "Intents", "nav_intents"),
141 - //TODO add a new type of icon for tunnel 141 + new UiView(NETWORK, "tunnel", "Tunnels", "nav_tunnels")
142 - new UiView(NETWORK, "tunnel", "Tunnels", "nav_links")
143 ); 142 );
144 143
145 UiMessageHandlerFactory messageHandlerFactory = 144 UiMessageHandlerFactory messageHandlerFactory =
......
...@@ -529,14 +529,8 @@ ...@@ -529,14 +529,8 @@
529 529
530 checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z', 530 checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z',
531 531
532 - xMark: "M9.0,7.2C8.2,6.9,7.4,6.1,6.7,5.2c0.4-0.5," + 532 + xMark: "M7.8,6.7L6.7,7.8,5,6.1,3.3,7.8,2.2,6.7,3.9,5,2.2,3.3,3.3," +
533 - "0.7-0.8,0.8-1.0C7.8,3.5,9.4,1.6,8.1,1.1" + 533 + "2.2,5,3.9,6.7,2.2,7.8,3.3,6.1,5Z",
534 - "C6.8,0.6,6.6,1.7,6.6,1.7C6.4,2.1,6.0,2.7,5.4," +
535 - "3.4C4.9,2.5,4.5,1.9,4.5,1.9" +
536 - "S3.8,0.2,2.9,0.7C1.9,1.1,2.3,2.3,2.3,2.3c0.3,1.1,0.8,2.1,1.4,2.9" +
537 - "C2.5,6.4,1.3,7.4,1.3,7.4S0.8,7.8,0.8,8.1C0.9,8.3,0.9,9.6,2.4,9.1" +
538 - "C3.1,8.8,4.1,7.9,5.1,7.0c1.3,1.3,2.5,1.9,2.5,1.9s0.5,0.5,1.4-0.2" +
539 - "C9.8,7.9,9.0,7.2,9.0,7.2z",
540 534
541 triangleUp: "M0.5,6.2c0,0,3.8-3.8,4.2-4.2C5,1.7,5.3,2,5.3,2l4.3," + 535 triangleUp: "M0.5,6.2c0,0,3.8-3.8,4.2-4.2C5,1.7,5.3,2,5.3,2l4.3," +
542 "4.3c0,0,0.4,0.4-0.1,0.4c-1.7,0-8.2,0-8.8,0C0,6.6,0.5,6.2,0.5,6.2z", 536 "4.3c0,0,0.4,0.4-0.1,0.4c-1.7,0-8.2,0-8.8,0C0,6.6,0.5,6.2,0.5,6.2z",
...@@ -551,7 +545,10 @@ ...@@ -551,7 +545,10 @@
551 545
552 play: "M2.5,2l5.5,3l-5.5,3z", 546 play: "M2.5,2l5.5,3l-5.5,3z",
553 547
554 - stop: "M2.5,2.5h5v5h-5z" 548 + stop: "M2.5,2.5h5v5h-5z",
549 +
550 + xClose: "M8.6,6.8L6.8,8.6,5,6.8,3.2,8.6,1.4,6.8,3.2,5,1.4,3.2," +
551 + "3.2,1.4,5,3.2,6.8,1.4,8.6,3.2,6.8,5Z"
555 }, 552 },
556 553
557 spriteData = { 554 spriteData = {
......
...@@ -18,22 +18,25 @@ ...@@ -18,22 +18,25 @@
18 ONOS GUI -- Icon Service (theme) -- CSS file 18 ONOS GUI -- Icon Service (theme) -- CSS file
19 */ 19 */
20 20
21 -.light svg.embeddedIcon g.icon .glyph { 21 +.light div.close-btn svg.embeddedIcon g.icon .glyph {
22 - fill: white; 22 + fill: #9fa296;
23 } 23 }
24 -.dark svg.embeddedIcon g.icon .glyph { 24 +.dark div.close-btn svg.embeddedIcon g.icon .glyph {
25 - fill: white; 25 + /* TODO: dark theme */
26 + fill: #9fa296;
26 } 27 }
27 28
28 29
29 /* Sortable table headers */ 30 /* Sortable table headers */
30 .light div.tableColSort svg.embeddedIcon .icon .glyph { 31 .light div.tableColSort svg.embeddedIcon .icon .glyph {
31 - fill: black; 32 + fill: #353333;
32 } 33 }
33 .dark div.tableColSort svg.embeddedIcon .icon .glyph { 34 .dark div.tableColSort svg.embeddedIcon .icon .glyph {
34 - fill: #ccc; 35 + /* TODO: dark theme */
36 + fill: #353333;
35 } 37 }
36 38
39 +/* active / inactive (check/xmark) icons */
37 .light svg.embeddedIcon .icon.active .glyph { 40 .light svg.embeddedIcon .icon.active .glyph {
38 fill: #04bf34; 41 fill: #04bf34;
39 } 42 }
...@@ -43,25 +46,19 @@ ...@@ -43,25 +46,19 @@
43 } 46 }
44 47
45 .light svg.embeddedIcon .icon.inactive .glyph { 48 .light svg.embeddedIcon .icon.inactive .glyph {
46 - /* TODO: */ 49 + fill: #c0242b;
47 - fill: darkred;
48 } 50 }
49 .dark svg.embeddedIcon .icon.inactive .glyph { 51 .dark svg.embeddedIcon .icon.inactive .glyph {
50 /* TODO: dark theme */ 52 /* TODO: dark theme */
51 - fill: darkred; 53 + fill: #c0242b;
52 } 54 }
53 55
54 -.light table svg.embeddedIcon { 56 +.light table svg.embeddedIcon .icon .glyph {
55 - fill: #ccc; 57 + fill: #3c3a3a;
56 -}
57 -.dark table svg.embeddedIcon {
58 - fill: #222;
59 -}
60 -.light table svg.embeddedIcon .glyph {
61 - fill: #333;
62 } 58 }
63 .dark table svg.embeddedIcon .glyph { 59 .dark table svg.embeddedIcon .glyph {
64 - fill: #ccc; 60 + /* TODO: dark theme */
61 + fill: #3c3a3a;
65 } 62 }
66 63
67 64
......
...@@ -36,6 +36,8 @@ ...@@ -36,6 +36,8 @@
36 minus: 'minus', 36 minus: 'minus',
37 play: 'play', 37 play: 'play',
38 stop: 'stop', 38 stop: 'stop',
39 +
40 + close: 'xClose',
39 41
40 topo: 'topo', 42 topo: 'topo',
41 43
...@@ -60,15 +62,18 @@ ...@@ -60,15 +62,18 @@
60 hostIcon_router: 'router', 62 hostIcon_router: 'router',
61 hostIcon_bgpSpeaker: 'bgpSpeaker', 63 hostIcon_bgpSpeaker: 'bgpSpeaker',
62 64
65 + // navigation menu icons...
63 nav_apps: 'bird', 66 nav_apps: 'bird',
64 nav_settings: 'chain', 67 nav_settings: 'chain',
65 nav_cluster: 'node', 68 nav_cluster: 'node',
69 + nav_processors: 'allTraffic',
70 +
66 nav_topo: 'topo', 71 nav_topo: 'topo',
67 nav_devs: 'switch', 72 nav_devs: 'switch',
68 nav_links: 'ports', 73 nav_links: 'ports',
69 nav_hosts: 'endstation', 74 nav_hosts: 'endstation',
70 nav_intents: 'relatedIntents', 75 nav_intents: 'relatedIntents',
71 - nav_processors: 'allTraffic' 76 + nav_tunnels: 'ports' // TODO: use tunnel glyph, when available
72 }; 77 };
73 78
74 function ensureIconLibDefs() { 79 function ensureIconLibDefs() {
......
...@@ -72,11 +72,14 @@ ...@@ -72,11 +72,14 @@
72 72
73 /* TODO: dark theme */ 73 /* TODO: dark theme */
74 74
75 +/* INACTIVE */
75 .light .ctrl-btns div svg.embeddedIcon g.icon use { 76 .light .ctrl-btns div svg.embeddedIcon g.icon use {
76 - fill: #e4eef2; 77 + fill: #e0dfd6;
77 } 78 }
78 /* note: no change for inactive buttons when hovered */ 79 /* note: no change for inactive buttons when hovered */
79 80
81 +
82 +/* ACTIVE */
80 .light .ctrl-btns div.active svg.embeddedIcon g.icon use { 83 .light .ctrl-btns div.active svg.embeddedIcon g.icon use {
81 fill: #939598; 84 fill: #939598;
82 } 85 }
...@@ -84,7 +87,15 @@ ...@@ -84,7 +87,15 @@
84 fill: #ce5b58; 87 fill: #ce5b58;
85 } 88 }
86 89
87 -/* Refresh button specific */ 90 +/* CURRENT-VIEW */
91 +.light .ctrl-btns div.current-view svg.embeddedIcon g.icon rect {
92 + fill: #518ecc;
93 +}
94 +.light .ctrl-btns div.current-view svg.embeddedIcon g.icon use {
95 + fill: white;
96 +}
97 +
98 +/* REFRESH */
88 .light .ctrl-btns div.refresh svg.embeddedIcon g.icon use { 99 .light .ctrl-btns div.refresh svg.embeddedIcon g.icon use {
89 fill: #cdeff2; 100 fill: #cdeff2;
90 } 101 }
......
...@@ -18,77 +18,39 @@ ...@@ -18,77 +18,39 @@
18 ONOS GUI -- Device View (theme) -- CSS file 18 ONOS GUI -- Device View (theme) -- CSS file
19 */ 19 */
20 20
21 -.light #ov-device .current-view use {
22 - fill: white;
23 -}
24 -.dark #ov-device .current-view use {
25 - fill: #304860;
26 -}
27 -
28 -.light #ov-device .current-view rect {
29 - fill: deepskyblue;
30 -}
31 -.dark #ov-device .current-view rect {
32 - fill: #eee;
33 -}
34 21
35 -.light #device-details-panel.floatpanel { 22 +.light .dev-icon svg.embeddedIcon .icon .glyph {
36 - background-color: rgb(229, 234, 237); 23 + fill: #0071bd;
37 } 24 }
38 -.dark #device-details-panel.floatpanel { 25 +.dark .dev-icon svg.embeddedIcon .icon .glyph {
39 - background-color: #3A4042; 26 + /* TODO: dark theme */
27 + fill: #0071bd;
40 } 28 }
41 29
42 -.light .close-btn svg.embeddedIcon .icon.plus .glyph { 30 +.light #device-details-panel .editable {
43 - fill: #aaa; 31 + border-bottom: 1px dashed #ca504b;
44 -}
45 -.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
46 - fill: #ccc;
47 } 32 }
48 33
49 -.light .dev-icon svg.embeddedIcon .glyph {
50 - fill: rgb(0, 172, 229);
51 -}
52 -.dark .dev-icon svg.embeddedIcon .glyph {
53 - fill: #486D91;
54 -}
55 -
56 -#device-details-panel .editable {
57 - cursor: pointer;
58 - border-bottom: 1px dashed darkgreen;
59 -}
60 -
61 -#device-details-panel td.label {
62 - /* works for both light and dark themes ... */
63 - color: #777;
64 -}
65 -
66 -.light #device-details-panel hr {
67 - opacity: .5;
68 - border-color: #FFF;
69 -}
70 -.dark #device-details-panel hr {
71 - border-color: #666;
72 -}
73 34
74 .light #device-details-panel .bottom th { 35 .light #device-details-panel .bottom th {
75 - background-color: #CCC; 36 + background-color: #e5e5e6;
76 - /* default text color */
77 } 37 }
78 .dark #device-details-panel .bottom th { 38 .dark #device-details-panel .bottom th {
79 - background-color: #131313; 39 + /* TODO: dark theme */
80 - color: #ccc; 40 + background-color: #e5e5e6;
81 } 41 }
82 42
83 .light #device-details-panel .bottom tr:nth-child(odd) { 43 .light #device-details-panel .bottom tr:nth-child(odd) {
84 - background-color: #f9f9f9; 44 + background-color: #fbfbfb;
85 } 45 }
86 .light #device-details-panel .bottom tr:nth-child(even) { 46 .light #device-details-panel .bottom tr:nth-child(even) {
87 - background-color: #EBEDF2; 47 + background-color: #f4f4f4;
88 } 48 }
89 .dark #device-details-panel .bottom tr:nth-child(odd) { 49 .dark #device-details-panel .bottom tr:nth-child(odd) {
90 - background-color: #333; 50 + /* TODO: dark theme */
51 + background-color: #fbfbfb;
91 } 52 }
92 .dark #device-details-panel .bottom tr:nth-child(even) { 53 .dark #device-details-panel .bottom tr:nth-child(even) {
93 - background-color: #555; 54 + /* TODO: dark theme */
55 + background-color: #f4f4f4;
94 } 56 }
......
...@@ -29,8 +29,6 @@ ...@@ -29,8 +29,6 @@
29 /* More in generic panel.css */ 29 /* More in generic panel.css */
30 30
31 #device-details-panel.floatpanel { 31 #device-details-panel.floatpanel {
32 - -moz-border-radius: 0;
33 - border-radius: 0;
34 z-index: 0; 32 z-index: 0;
35 } 33 }
36 34
...@@ -41,8 +39,8 @@ ...@@ -41,8 +39,8 @@
41 39
42 #device-details-panel .close-btn { 40 #device-details-panel .close-btn {
43 position: absolute; 41 position: absolute;
44 - right: 10px; 42 + right: 6px;
45 - top: 0; 43 + top: 6px;
46 cursor: pointer; 44 cursor: pointer;
47 } 45 }
48 46
...@@ -59,7 +57,8 @@ ...@@ -59,7 +57,8 @@
59 57
60 58
61 #device-details-panel h2 input { 59 #device-details-panel h2 input {
62 - font-size: 1.0em; 60 + font-size: 0.90em;
61 + width: 106%;
63 } 62 }
64 63
65 #device-details-panel .top div.left { 64 #device-details-panel .top div.left {
...@@ -71,20 +70,20 @@ ...@@ -71,20 +70,20 @@
71 } 70 }
72 71
73 #device-details-panel td.label { 72 #device-details-panel td.label {
74 - font-style: italic; 73 + font-weight: bold;
75 - padding-right: 12px; 74 + text-align: right;
75 + padding-right: 6px;
76 } 76 }
77 77
78 #device-details-panel .actionBtns div { 78 #device-details-panel .actionBtns div {
79 padding: 12px 6px; 79 padding: 12px 6px;
80 } 80 }
81 81
82 -#device-details-panel .top hr { 82 +#device-details-panel hr {
83 - width: 95%; 83 + width: 100%;
84 - margin: 0 auto; 84 + margin: 2px auto;
85 } 85 }
86 86
87 -
88 #device-details-panel .bottom table { 87 #device-details-panel .bottom table {
89 border-spacing: 0; 88 border-spacing: 0;
90 } 89 }
...@@ -93,7 +92,6 @@ ...@@ -93,7 +92,6 @@
93 letter-spacing: 0.02em; 92 letter-spacing: 0.02em;
94 } 93 }
95 94
96 -
97 #device-details-panel .bottom th, 95 #device-details-panel .bottom th,
98 #device-details-panel .bottom td { 96 #device-details-panel .bottom td {
99 padding: 6px 12px; 97 padding: 6px 12px;
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 <td colId="type" class="table-icon"></td> 42 <td colId="type" class="table-icon"></td>
43 <td colId="name" sortable>Friendly Name </td> 43 <td colId="name" sortable>Friendly Name </td>
44 <td colId="id" sortable>Device ID </td> 44 <td colId="id" sortable>Device ID </td>
45 - <td colId="masterid" sortable>Master Instance </td> 45 + <td colId="masterid" col-width="100px" sortable>Master </td>
46 <td colId="num_ports" col-width="70px" sortable>Ports </td> 46 <td colId="num_ports" col-width="70px" sortable>Ports </td>
47 <td colId="mfr" sortable>Vendor </td> 47 <td colId="mfr" sortable>Vendor </td>
48 <td colId="hw" sortable>H/W Version </td> 48 <td colId="hw" sortable>H/W Version </td>
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 editingName = false; 35 editingName = false;
36 36
37 // constants 37 // constants
38 - var topPdg = 13, 38 + var topPdg = 28,
39 ctnrPdg = 24, 39 ctnrPdg = 24,
40 scrollSize = 17, 40 scrollSize = 17,
41 portsTblPdg = 50, 41 portsTblPdg = 50,
...@@ -71,14 +71,13 @@ ...@@ -71,14 +71,13 @@
71 } 71 }
72 72
73 function addCloseBtn(div) { 73 function addCloseBtn(div) {
74 - is.loadEmbeddedIcon(div, 'plus', 30); 74 + is.loadEmbeddedIcon(div, 'close', 20);
75 - div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
76 div.on('click', closePanel); 75 div.on('click', closePanel);
77 } 76 }
78 77
79 function exitEditMode(nameH2, name) { 78 function exitEditMode(nameH2, name) {
80 nameH2.html(name); 79 nameH2.html(name);
81 - nameH2.classed('editable', true); 80 + nameH2.classed('editable clickable', true);
82 editingName = false; 81 editingName = false;
83 ks.enableGlobalKeys(true); 82 ks.enableGlobalKeys(true);
84 } 83 }
...@@ -112,7 +111,7 @@ ...@@ -112,7 +111,7 @@
112 tf, el; 111 tf, el;
113 112
114 if (!editingName) { 113 if (!editingName) {
115 - nameH2.classed('editable', false); 114 + nameH2.classed('editable clickable', false);
116 nameH2.html(''); 115 nameH2.html('');
117 tf = nameH2.append('input').classed('name-input', true) 116 tf = nameH2.append('input').classed('name-input', true)
118 .attr('type', 'text') 117 .attr('type', 'text')
...@@ -139,7 +138,7 @@ ...@@ -139,7 +138,7 @@
139 closeBtn = top.append('div').classed('close-btn', true); 138 closeBtn = top.append('div').classed('close-btn', true);
140 addCloseBtn(closeBtn); 139 addCloseBtn(closeBtn);
141 iconDiv = top.append('div').classed('dev-icon', true); 140 iconDiv = top.append('div').classed('dev-icon', true);
142 - top.append('h2').classed('editable', true).on('click', editName); 141 + top.append('h2').classed('editable clickable', true).on('click', editName);
143 142
144 tblDiv = top.append('div').classed('top-tables', true); 143 tblDiv = top.append('div').classed('top-tables', true);
145 tblDiv.append('div').classed('left', true).append('table'); 144 tblDiv.append('div').classed('left', true).append('table');
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 describe('factory: fw/svg/glyph.js', function() { 23 describe('factory: fw/svg/glyph.js', function() {
24 var $log, fs, gs, d3Elem, svg; 24 var $log, fs, gs, d3Elem, svg;
25 25
26 - var numBaseGlyphs = 50, 26 + var numBaseGlyphs = 51,
27 vbBird = '352 224 113 112', 27 vbBird = '352 224 113 112',
28 vbGlyph = '0 0 110 110', 28 vbGlyph = '0 0 110 110',
29 vbBadge = '0 0 10 10', 29 vbBadge = '0 0 10 10',
...@@ -73,13 +73,14 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -73,13 +73,14 @@ describe('factory: fw/svg/glyph.js', function() {
73 // badges 73 // badges
74 uiAttached: 'M2,2.5a.5,.5', 74 uiAttached: 'M2,2.5a.5,.5',
75 checkMark: 'M8.6,3.4L4', 75 checkMark: 'M8.6,3.4L4',
76 - xMark: 'M9.0,7.2C8.2', 76 + xMark: 'M7.8,6.7L6.7',
77 triangleUp: 'M0.5,6.2c0', 77 triangleUp: 'M0.5,6.2c0',
78 triangleDown: 'M9.5,4.2c0', 78 triangleDown: 'M9.5,4.2c0',
79 plus: 'M4,2h2v2h2v2', 79 plus: 'M4,2h2v2h2v2',
80 minus: 'M2,4h6v2', 80 minus: 'M2,4h6v2',
81 play: 'M2.5,2l5.5,3', 81 play: 'M2.5,2l5.5,3',
82 stop: 'M2.5,2.5h5', 82 stop: 'M2.5,2.5h5',
83 + xClose: 'M8.6,6.8L6.8,8.6',
83 84
84 cloud: 'M37.6,79.5c-6.9,8.7-20.4,8.6', 85 cloud: 'M37.6,79.5c-6.9,8.7-20.4,8.6',
85 86
......