use white-eye for flow chooser popup control
diff --git a/web/ons-demo/assets/eye.svg b/web/ons-demo/assets/black-eye.svg
similarity index 100%
rename from web/ons-demo/assets/eye.svg
rename to web/ons-demo/assets/black-eye.svg
diff --git a/web/ons-demo/assets/white-eye.svg b/web/ons-demo/assets/white-eye.svg
new file mode 100644
index 0000000..8f3b180
--- /dev/null
+++ b/web/ons-demo/assets/white-eye.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ width="512"
+ height="512"
+ viewBox="0 0 512 512"
+ id="Layer_1"
+ xml:space="preserve"><metadata
+ id="metadata13"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs11" />
+<g
+ id="g3"
+ style="fill:#ffffff;fill-opacity:1">
+ <path
+ d="m 506.637,242.501 c -5.362,-6.347 -11.263,-12.33 -17.171,-18.193 -31.897,-31.679 -68.549,-59.921 -108.648,-80.411 -25.618,-13.08 -53.038,-23.655 -81.451,-28.721 -14.453,-2.586 -28.617,-3.912 -43.474,-3.938 -14.447,0.025 -28.908,1.353 -43.361,3.938 -28.412,5.065 -55.775,15.641 -81.393,28.721 -40.102,20.489 -76.724,48.733 -108.622,80.411 -5.909,5.862 -11.794,11.847 -17.155,18.193 -7.147,8.484 -7.147,18.515 0,27 16.344,19.353 35.774,36.575 55.542,52.321 42.57,33.915 91.25,62.278 144.993,73.711 16.621,3.524 33.299,5.244 49.998,5.228 16.904,0.018 33.488,-1.702 50.107,-5.228 53.744,-11.433 102.534,-39.796 145.104,-73.711 19.768,-15.745 39.194,-32.969 55.538,-52.321 7.146,-8.483 7.139,-18.514 -0.007,-27 z M 255.892,354.552 c -54.334,-0.104 -98.348,-44.177 -98.348,-98.554 0,-54.351 44.014,-98.438 98.348,-98.543 54.809,0.104 98.347,44.192 98.347,98.543 0.001,54.376 -43.538,98.447 -98.347,98.554 z"
+ id="path5"
+ style="fill:#ffffff;fill-opacity:1" />
+ <path
+ d="m 255.86,217.881 c -21.06,0 -38.106,17.059 -38.106,38.115 0,21.068 17.047,38.123 38.106,38.123 21.058,0 38.124,-17.055 38.124,-38.123 0,-21.056 -17.067,-38.115 -38.124,-38.115 z"
+ id="path7"
+ style="fill:#ffffff;fill-opacity:1" />
+</g>
+</svg>
\ No newline at end of file
diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index 7b9da5e..018e728 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -58,6 +58,12 @@
position: relative;
}
+#showFlowChooser {
+ position: relative;
+ display: -webkit-box;
+ -webkit-box-pack: center;
+}
+
.selectedFlow .srcDPID, .selectedFlow .dstDPID {
-webkit-user-select: auto;
}
@@ -67,12 +73,6 @@
height: 1.5em;
}
-
-.flowId {
- width: 5em;
-}
-
-
.iperf {
width: 100%;
-webkit-box-flex: 1.0;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 6a72b7e..aebf68b 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -146,8 +146,10 @@
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
+ width: 3em;
}
+
.srcDPID, .dstDPID {
width: 12em;
}
@@ -168,13 +170,22 @@
position: relative;
}
-.eye {
+.black-eye {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 2.25em;
- background-image: url('../assets/eye.svg');
+ background-image: url('../assets/black-eye.svg');
+ background-size: auto 100%;
+ background-repeat: no-repeat;
+ background-position: .25em center;
+}
+
+.white-eye {
+ height: 100%;
+ width: 2.25em;
+ background-image: url('../assets/white-eye.svg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: .25em center;
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 45e1eeb..d157ecc 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -38,7 +38,7 @@
</div>
</div>
<div id='selectedFlowsHeader'>
- <div id='showFlowChooser' class='flowId'>flow</div>
+ <div id='showFlowChooser' class='flowId'><div class='white-eye'></div></div>
<div class='srcDPID'>src</div>
<div class='dstDPID'>dst</div>
<div class='iperf'>iperf</div>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 17189c2..84cffd0 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -114,7 +114,7 @@
var row = d3.select(this);
row.append('div')
- .classed('eye', true).
+ .classed('black-eye', true).
on('click', function () {
selectedFlows.unshift(d);
selectedFlows = selectedFlows.slice(0, 3);
@@ -847,7 +847,7 @@
return d;
})
.append('div')
- .attr('class', 'eye');
+ .attr('class', 'black-eye');
controllers.attr('class', function (d) {
var color = 'colorInactive';
@@ -877,7 +877,7 @@
}
});
- controllers.select('.eye').on('click', function (c) {
+ controllers.select('.black-eye').on('click', function (c) {
var allSelected = true;
for (var key in controllerColorMap) {
if (!d3.select(document.body).classed(controllerColorMap[key] + '-selected')) {
