GUI -- Created NavService and implemented simple navigation (click on the bird!)

Change-Id: I2bda5a3a1b279167194a84564408760eebcb59fd

@@ -39,6 +39,12 @@
     height: 38px;
     height: 38px;
     padding-left: 8px;
     padding-left: 8px;
     padding-right: 8px;
     padding-right: 8px;
+    cursor: pointer;
+}
+
+#mast img.logo:hover {
+    /* need something better */
+    /*background-color: #888;*/
 }
 }
 
 
 #mast .title {
 #mast .title {

 <!-- Masthead partial HTML -->
 <!-- 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>

@@ -22,14 +22,22 @@
 (function () {
 (function () {
     'use strict';
     '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...
             // initialize mast controller here...
             self.radio = null;
             self.radio = null;
 
 
+            // delegate to NavService
+            self.toggleNav = function () {
+                ns.toggleNav();
+            };
+
             $log.log('MastCtrl has been created');
             $log.log('MastCtrl has been created');
         }]);
         }]);
 
 

+/*
+ * 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;
+}
+

+<!-- 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>

+/*
+ * 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
+            };
+        }]);
+
+}());

@@ -39,6 +39,7 @@
     <script src="fw/util/keys.js"></script>
     <script src="fw/util/keys.js"></script>
 
 
     <script src="fw/mast/mast.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/svg.js"></script>
     <script src="fw/svg/glyph.js"></script>
     <script src="fw/svg/glyph.js"></script>
@@ -50,6 +51,7 @@
     <!-- TODO: use a single catenated-minified file here -->
     <!-- TODO: use a single catenated-minified file here -->
     <link rel="stylesheet" href="onos.css">
     <link rel="stylesheet" href="onos.css">
     <link rel="stylesheet" href="fw/mast/mast.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 -->
     <!-- This is where contributed javascript will get injected -->
     <!-- {INJECTED-JAVASCRIPT} -->
     <!-- {INJECTED-JAVASCRIPT} -->
@@ -71,6 +73,10 @@
 
 
         <div id="view" ng-view></div>
         <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="floatpanels"></div>
         <div id="alerts"></div>
         <div id="alerts"></div>
         <div id="flash"></div>
         <div id="flash"></div>

@@ -29,5 +29,5 @@
 }
 }
 
 
 #ov-topo svg {
 #ov-topo svg {
-    background-color: #88f;
+    background-color: #dde;
 }
 }