mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-22 12:51:09 +02:00
Code Issues Projects Releases Wiki Activity

ONOS-1412 - GUI -- Selected items no longer disappear in Firefox, height adjustment for toolbar arrow in Safari.

Browse Source 
Change-Id: I36ebd929ae8c4ce56235db80e61599220e7834fa
This commit is contained in:
Bri Prebilic Cole 2015-08-04 16:54:08 -07:00
parent ae9faf1f37
commit dd80557afc
4 changed files with 46 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/gui/src/main/webapp/app/fw/widget/toolbar.css
View File

@ -18,21 +18,37 @@
ONOS GUI -- Toolbar Service -- CSS file
*/
.light .tbarArrow svg.embeddedIcon .icon .glyph {
.light .tbar-arrow svg.embeddedIcon .icon .glyph {
fill: #838383;
}
.dark .tbarArrow svg.embeddedIcon .icon .glyph {
.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
fill: #B2B2B2;
}
.tbarArrow svg.embeddedIcon .icon rect {
div.tbar-arrow {
position: absolute;
top: 53%;
left: 96%;
margin-right: -4%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.safari div.tbar-arrow {
top: 46%;
}
.firefox div.tbar-arrow {
left: 97%;
margin-right: -3%;
}
.tbar-arrow svg.embeddedIcon .icon rect {
stroke: none;
}
.light .tbarArrow svg.embeddedIcon .icon rect {
.light .tbar-arrow svg.embeddedIcon .icon rect {
fill: none;
}
.dark .tbarArrow svg.embeddedIcon .icon rect {
.dark .tbar-arrow svg.embeddedIcon .icon rect {
fill: none;
}

10
web/gui/src/main/webapp/app/fw/widget/toolbar.js
View File

@ -58,15 +58,7 @@
function createArrow(panel) {
var arrowDiv = panel.append('div')
.classed('tbarArrow', true)
.style({
'position': 'absolute',
'top': '53%',
'left': '96%',
'margin-right': '-4%',
'transform': 'translate(-50%, -50%)',
'cursor': 'pointer'
});
.classed('tbar-arrow', true);
is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true);
return arrowDiv;
}

24
web/gui/src/main/webapp/app/view/topo/topo.css
View File

@ -298,7 +298,12 @@ html[data-platform='iPad'] #topo-p-detail {
.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
filter: url(#yellow-glow);
}
.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
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");
}
.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
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");
}
/* --- Topo Nodes --- */
@ -320,6 +325,14 @@ html[data-platform='iPad'] #topo-p-detail {
fill: #f90;
filter: url(#yellow-glow);
}
.light.firefox #ov-topo svg .node.selected rect,
.light.firefox #ov-topo svg .node.selected circle {
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");
}
.dark.firefox #ov-topo svg .node.selected rect,
.dark.firefox #ov-topo svg .node.selected circle {
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");
}
#ov-topo svg .node text {
pointer-events: none;
@ -446,6 +459,15 @@ html[data-platform='iPad'] #topo-p-detail {
.dark #ov-topo svg .link.enhanced {
filter: url(#yellow-glow);
}
.light.firefox #ov-topo svg .link.selected,
.light.firefox #ov-topo svg .link.enhanced {
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");
}
.dark.firefox #ov-topo svg .link.selected,
.dark.firefox #ov-topo svg .link.enhanced {
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");
}
#ov-topo svg .link.inactive {
opacity: .5;

2
web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
View File

@ -78,7 +78,7 @@ describe('factory: fw/widget/toolbar.js', function () {
// NOTE: toolbar service prefixes id with 'toolbar-'
var tbar = d3.select('#toolbar-test'),
arrow = tbar.select('.tbarArrow');
arrow = tbar.select('.tbar-arrow');
expect(arrow.size()).toBe(1);
expect(arrow.select('svg').size()).toBe(1);