홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
a1bb7a20 1 parent 6046e020

ONOS-1412 - GUI -- Selected items no longer disappear in Firefox, height adjust… 

…ment for toolbar arrow in Safari.

Change-Id: I36ebd929ae8c4ce56235db80e61599220e7834fa
Inline Side-by-side
Showing 4 changed files with 46 additions and 16 deletions
...@@ -18,21 +18,37 @@ ...@@ -18,21 +18,37 @@
18 ONOS GUI -- Toolbar Service -- CSS file 18 ONOS GUI -- Toolbar Service -- CSS file
19 */ 19 */
20 20
21 -.light .tbarArrow svg.embeddedIcon .icon .glyph { 21 +.light .tbar-arrow svg.embeddedIcon .icon .glyph {
22 fill: #838383; 22 fill: #838383;
23 } 23 }
24 -.dark .tbarArrow svg.embeddedIcon .icon .glyph { 24 +.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
25 fill: #B2B2B2; 25 fill: #B2B2B2;
26 } 26 }
27 27
28 28
29 -.tbarArrow svg.embeddedIcon .icon rect { 29 +div.tbar-arrow {
30 + position: absolute;
31 + top: 53%;
32 + left: 96%;
33 + margin-right: -4%;
34 + transform: translate(-50%, -50%);
35 + cursor: pointer;
36 +}
37 +.safari div.tbar-arrow {
38 + top: 46%;
39 +}
40 +.firefox div.tbar-arrow {
41 + left: 97%;
42 + margin-right: -3%;
43 +}
44 +
45 +.tbar-arrow svg.embeddedIcon .icon rect {
30 stroke: none; 46 stroke: none;
31 } 47 }
32 -.light .tbarArrow svg.embeddedIcon .icon rect { 48 +.light .tbar-arrow svg.embeddedIcon .icon rect {
33 fill: none; 49 fill: none;
34 } 50 }
35 -.dark .tbarArrow svg.embeddedIcon .icon rect { 51 +.dark .tbar-arrow svg.embeddedIcon .icon rect {
36 fill: none; 52 fill: none;
37 } 53 }
38 54
......
...@@ -58,15 +58,7 @@ ...@@ -58,15 +58,7 @@
58 58
59 function createArrow(panel) { 59 function createArrow(panel) {
60 var arrowDiv = panel.append('div') 60 var arrowDiv = panel.append('div')
61 - .classed('tbarArrow', true) 61 + .classed('tbar-arrow', true);
62 - .style({
63 - 'position': 'absolute',
64 - 'top': '53%',
65 - 'left': '96%',
66 - 'margin-right': '-4%',
67 - 'transform': 'translate(-50%, -50%)',
68 - 'cursor': 'pointer'
69 - });
70 is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true); 62 is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true);
71 return arrowDiv; 63 return arrowDiv;
72 } 64 }
......
...@@ -298,7 +298,12 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -298,7 +298,12 @@ html[data-platform='iPad'] #topo-p-detail {
298 .dark #topo-p-instance .onosInst.mastership.affinity svg rect { 298 .dark #topo-p-instance .onosInst.mastership.affinity svg rect {
299 filter: url(#yellow-glow); 299 filter: url(#yellow-glow);
300 } 300 }
301 - 301 +.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
302 + filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
303 +}
304 +.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
305 + filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
306 +}
302 307
303 /* --- Topo Nodes --- */ 308 /* --- Topo Nodes --- */
304 309
...@@ -320,6 +325,14 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -320,6 +325,14 @@ html[data-platform='iPad'] #topo-p-detail {
320 fill: #f90; 325 fill: #f90;
321 filter: url(#yellow-glow); 326 filter: url(#yellow-glow);
322 } 327 }
328 +.light.firefox #ov-topo svg .node.selected rect,
329 +.light.firefox #ov-topo svg .node.selected circle {
330 + filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
331 +}
332 +.dark.firefox #ov-topo svg .node.selected rect,
333 +.dark.firefox #ov-topo svg .node.selected circle {
334 + filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
335 +}
323 336
324 #ov-topo svg .node text { 337 #ov-topo svg .node text {
325 pointer-events: none; 338 pointer-events: none;
...@@ -446,6 +459,15 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -446,6 +459,15 @@ html[data-platform='iPad'] #topo-p-detail {
446 .dark #ov-topo svg .link.enhanced { 459 .dark #ov-topo svg .link.enhanced {
447 filter: url(#yellow-glow); 460 filter: url(#yellow-glow);
448 } 461 }
462 +.light.firefox #ov-topo svg .link.selected,
463 +.light.firefox #ov-topo svg .link.enhanced {
464 + filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
465 +}
466 +.dark.firefox #ov-topo svg .link.selected,
467 +.dark.firefox #ov-topo svg .link.enhanced {
468 + filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
469 +
470 +}
449 471
450 #ov-topo svg .link.inactive { 472 #ov-topo svg .link.inactive {
451 opacity: .5; 473 opacity: .5;
......
...@@ -78,7 +78,7 @@ describe('factory: fw/widget/toolbar.js', function () { ...@@ -78,7 +78,7 @@ describe('factory: fw/widget/toolbar.js', function () {
78 78
79 // NOTE: toolbar service prefixes id with 'toolbar-' 79 // NOTE: toolbar service prefixes id with 'toolbar-'
80 var tbar = d3.select('#toolbar-test'), 80 var tbar = d3.select('#toolbar-test'),
81 - arrow = tbar.select('.tbarArrow'); 81 + arrow = tbar.select('.tbar-arrow');
82 82
83 expect(arrow.size()).toBe(1); 83 expect(arrow.size()).toBe(1);
84 expect(arrow.select('svg').size()).toBe(1); 84 expect(arrow.select('svg').size()).toBe(1);
......