GUI -- Created NavService and implemented simple navigation (click on the bird!)
Change-Id: I2bda5a3a1b279167194a84564408760eebcb59fd
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.css b/web/gui/src/main/webapp/app/fw/mast/mast.css
index 9a68e0a..0722f6d 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.css
@@ -39,6 +39,12 @@
height: 38px;
padding-left: 8px;
padding-right: 8px;
+ cursor: pointer;
+}
+
+#mast img.logo:hover {
+ /* need something better */
+ /*background-color: #888;*/
}
#mast .title {
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.html b/web/gui/src/main/webapp/app/fw/mast/mast.html
index dc086e9..e10d6ca 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.html
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.html
@@ -1,3 +1,3 @@
<!-- Masthead partial HTML -->
-<img class="logo" src="../data/img/onos-logo.png">
-<span class="title">Open Network Operating System</span>
\ No newline at end of file
+<img class="logo" src="../data/img/onos-logo.png" ng-click="mastCtrl.toggleNav()">
+<span class="title">Open Network Operating System</span>
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.js b/web/gui/src/main/webapp/app/fw/mast/mast.js
index b8b02b4..3705d89 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.js
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.js
@@ -22,14 +22,22 @@
(function () {
'use strict';
- angular.module('onosMast', [])
- .controller('MastCtrl', ['$log', function (_$log_) {
- var $log = _$log_,
- self = this;
+ var $log;
+
+ angular.module('onosMast', ['onosNav'])
+ .controller('MastCtrl', ['$log', 'NavService', function (_$log_, ns) {
+ var self = this;
+
+ $log = _$log_;
// initialize mast controller here...
self.radio = null;
+ // delegate to NavService
+ self.toggleNav = function () {
+ ns.toggleNav();
+ };
+
$log.log('MastCtrl has been created');
}]);
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.css b/web/gui/src/main/webapp/app/fw/nav/nav.css
new file mode 100644
index 0000000..02d32f7
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.css
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2014,2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Navigation -- CSS file
+
+ @author Simon Hunt
+ @author Bri Prebilic Cole
+ */
+
+#nav {
+ position: absolute;
+ top: 50px;
+ left: 8px;
+ width: 160px;
+ height: 100px;
+ padding: 4px;
+ z-index: 3000;
+ visibility: hidden;
+}
+
+.light #nav {
+ background-color: #ccf;
+ box-shadow: 0 2px 8px #777;
+}
+.dark #nav {
+ background-color: #444;
+ box-shadow: 0 2px 8px #777;
+}
+
+#nav ul li {
+ font-size: 10pt;
+}
+
+
+#nav h2 {
+ font-size: 12pt;
+ margin: 0;
+}
+#nav h3 {
+ font-size: 8pt;
+ font-style: italic;
+ margin: 0;
+}
+
+.light #nav h2,
+.light #nav h3 {
+ color: black;
+}
+
+.dark #nav h2,
+.dark #nav h3 {
+ color: #ddd;
+}
+
+.dark #nav a {
+ color: #ddd;
+}
+
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.html b/web/gui/src/main/webapp/app/fw/nav/nav.html
new file mode 100644
index 0000000..b938b1c
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.html
@@ -0,0 +1,8 @@
+<!-- Navigation partial HTML -->
+<h2>Navigation</h2>
+<h3>(Note - this is temporary)</h3>
+
+<ul>
+ <li> <a ng-click="navCtrl.hideNav()" href="#/sample">Sample View</a></li>
+ <li> <a ng-click="navCtrl.hideNav()" href="#/topo">Topology View</a></li>
+</ul>
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.js b/web/gui/src/main/webapp/app/fw/nav/nav.js
new file mode 100644
index 0000000..7ab6981
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.js
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2014,2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Navigation Module
+
+ @author Simon Hunt
+ @author Bri Prebilic Cole
+ */
+(function () {
+ 'use strict';
+
+ // injected dependencies
+ var $log;
+
+ // internal state
+ var navShown = false;
+
+ function updatePane() {
+ var vis = navShown ? 'visible' : 'hidden';
+ d3.select('#nav').style('visibility', vis);
+ }
+
+
+ function showNav() {
+ navShown = true;
+ updatePane();
+ }
+ function hideNav() {
+ navShown = false;
+ updatePane();
+ }
+ function toggleNav() {
+ navShown = !navShown;
+ updatePane();
+ }
+
+ angular.module('onosNav', [])
+ .controller('NavCtrl', [
+ '$log', function (_$log_) {
+ var self = this;
+ $log = _$log_;
+
+ self.hideNav = hideNav;
+ $log.log('NavCtrl has been created');
+ }
+ ])
+ .factory('NavService', ['$log', function (_$log_) {
+ $log = _$log_;
+
+ return {
+ showNav: showNav,
+ hideNav: hideNav,
+ toggleNav: toggleNav
+ };
+ }]);
+
+}());
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index c238d7f..5a61721 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -39,6 +39,7 @@
<script src="fw/util/keys.js"></script>
<script src="fw/mast/mast.js"></script>
+ <script src="fw/nav/nav.js"></script>
<script src="fw/svg/svg.js"></script>
<script src="fw/svg/glyph.js"></script>
@@ -50,6 +51,7 @@
<!-- TODO: use a single catenated-minified file here -->
<link rel="stylesheet" href="onos.css">
<link rel="stylesheet" href="fw/mast/mast.css">
+ <link rel="stylesheet" href="fw/nav/nav.css">
<!-- This is where contributed javascript will get injected -->
<!-- {INJECTED-JAVASCRIPT} -->
@@ -71,6 +73,10 @@
<div id="view" ng-view></div>
+ <div id="nav"
+ ng-controller="NavCtrl as navCtrl"
+ ng-include="'fw/nav/nav.html'"></div>
+
<div id="floatpanels"></div>
<div id="alerts"></div>
<div id="flash"></div>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 84a4eff..ddd0246 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -29,5 +29,5 @@
}
#ov-topo svg {
- background-color: #88f;
+ background-color: #dde;
}