Enhanced look and feel of the GUI navigation pane to be consistent with the mast…

…-head look and feel. Also enabled the dynamic content generation in web.xml by default; accessible via onos/ui/main.html URL.

Change-Id: I9f3ad321ff3eadc4092bd131f30568ec7c7b6f9d

@@ -41,7 +41,7 @@ public class AbstractInjectionResource extends BaseResource {
      */
     protected int split(String string, int start, String stopPattern) {
         int i = stopPattern != null ? string.indexOf(stopPattern, start) : string.length();
-        checkArgument(i > 0, "Unable to locate stop pattern %s", stopPattern);
+        checkArgument(i >= 0, "Unable to locate pattern %s", stopPattern);
         return i + (stopPattern != null ? stopPattern.length() : 0);
     }
 

@@ -45,7 +45,7 @@ public class MainNavResource extends AbstractInjectionResource {
 
 
     private static final String NAV_FORMAT =
-            "    <li> <a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s</a></li>";
+            "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s</a>\n";
 
     @GET
     @Produces(MediaType.TEXT_HTML)

@@ -50,6 +50,7 @@
     -->
 
     <!--
+    -->
     <servlet>
         <servlet-name>Index Page</servlet-name>
         <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
@@ -125,7 +126,6 @@
         <servlet-name>View Module</servlet-name>
         <url-pattern>/app/view/*</url-pattern>
     </servlet-mapping>
-    -->
 
     <servlet>
         <servlet-name>JAX-RS Service</servlet-name>

@@ -20,50 +20,45 @@
 
 #nav {
     position: absolute;
-    top: 50px;
-    left: 8px;
-    width: 160px;
-    height: 100px;
-    padding: 4px;
+    top: 45px;
+    left: 1px;
+    Xwidth: 200px;
+    padding: 0px;
     z-index: 3000;
     visibility: hidden;
 }
 
 .light #nav {
-    background-color: #ccf;
+    background-color: #bbb;
     box-shadow: 0 2px 8px #777;
 }
 .dark #nav {
     background-color: #444;
-    box-shadow: 0 2px 8px #777;
+    box-shadow: 0 2px 8px #555;
 }
 
-#nav ul li {
-    font-size: 10pt;
+#nav a {
+    text-decoration: none;
+    font-size: 14pt;
+    display: block;
+    padding: 8px 16px 6px 16px;
 }
 
-
-#nav h2 {
-    font-size: 12pt;
-    margin: 0;
-}
-#nav h3 {
-    font-size: 8pt;
-    font-style: italic;
-    margin: 0;
+.light #nav a {
+    color: #369;
+    border-bottom: solid #ccc 1px;
 }
 
-.light #nav h2,
-.light #nav h3 {
-    color: black;
+.dark #nav a {
+    color: #eee;
+    border-bottom: solid #333 1px;
 }
 
-.dark #nav h2,
-.dark #nav h3 {
-    color: #ddd;
+.light #nav a:hover {
+    background-color: #ddd;
 }
 
-.dark #nav a {
-    color: #ddd;
+.dark #nav a:hover {
+    background-color: #999;
 }
 

-<!-- Navigation partial HTML -->
-<h2>Navigation</h2>
-<h3>(Note - this is temporary)</h3>
-
-<ul>
-    <!-- {INJECTED-VIEW-NAV-START} -->
-    <li> <a ng-click="navCtrl.hideNav()" href="#/sample">Sample View</a></li>
-    <li> <a ng-click="navCtrl.hideNav()" href="#/topo">Topology View</a></li>
-    <li> <a ng-click="navCtrl.hideNav()" href="#/device">Device View</a></li>
-    <!-- {INJECTED-VIEW-NAV-END} -->
-</ul>
+<!-- {INJECTED-VIEW-NAV-START} -->
+<a ng-click="navCtrl.hideNav()" href="#/sample">Sample</a>
+<a ng-click="navCtrl.hideNav()" href="#/topo">Network Topology</a>
+<a ng-click="navCtrl.hideNav()" href="#/device">Device List</a>
+<!-- {INJECTED-VIEW-NAV-END} -->