graphics tweaks
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 9857bc6..f9aa830 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -106,6 +106,34 @@
border-bottom: 1px solid #AAA;;
}
+#onos {
+ background-color: #333;
+}
+
+#cluster-label {
+ font-size: 22px;
+ display: -webkit-box;
+ -webkit-box-align: center;
+ padding-left: .5em;
+ padding-right: .5em;
+ color: #EEE;
+}
+
+#actions {
+ padding-right: .25em;
+ padding-left: .25em;
+ border-left: 1px solid white;
+ display: -webkit-box;
+ -webkit-box-align: center;
+}
+
+#controllers {
+ padding: .25em;
+ background-color: black;
+ margin: .25em;
+ border-radius: 8px;
+}
+
#flowChooser .selectedFlow {
background-color: rgba(255, 255, 255, .75);
color: black;
@@ -208,6 +236,7 @@
border: 1px solid #444;
color: white;
position: relative;
+ border-radius: 8px;
}
.controller:hover {
@@ -395,19 +424,21 @@
.action {
margin: .25em;
- padding: .25em;
- padding-left: 1em;
- padding-right: 1em;
- border: 1px solid #AAA;
+ border: 2px solid #AAA;
+ height: 2em;
+ width: 2em;
background-color: #444;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
- color: white;
+ color: #AAA;
+ border-radius: 50%;
+ -webkit-box-sizing: border-box;
}
.action:hover {
- border: 1px solid #FFF;
+ border: 2px solid #FFF;
+ color: white;
}
.action:active {
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index ca930ec..12ac5f9 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -20,11 +20,13 @@
</div>
<div id='onos'>
+ <div id='cluster-label'>ONOS Node Cluster</div>
<div id='controllers'></div>
<div id='actions'>
- <div id='action-all' class='action'>ALL</div>
- <div id='action-local' class='action'>LOCAL</div>
- <div id='action-scale' class='action'>SCALE</div>
+ <div id='action-all' class='action'>A</div>
+ <div id='action-local' class='action'>1</div>
+ <div id='action-scale' class='action'>S</div>
+ <div id='action-reset' class='action'>R</div>
</div>
</div>
diff --git a/web/ons-demo/js/init.js b/web/ons-demo/js/init.js
index dd11bf8..a412440 100644
--- a/web/ons-demo/js/init.js
+++ b/web/ons-demo/js/init.js
@@ -25,5 +25,9 @@
alert('scale')
});
+ d3.select('#action-reset').on('click', function () {
+ alert('reset')
+ });
+
createTopologyView(cb);
}