ONOS-1934 - CORD-GUI -- CSS for demo user page and navigation bar. Updated bundles page to use the new JSON format. WIP.

Change-Id: I8d6b8c5c5d3de0a23d9cb7e2ccf7529bb27de299

apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css

@@ -24,11 +24,18 @@
 
 .nav li {
     background-color: lightgray;
-    padding: 1% 0;
+    padding: 2.5% 0;
+    transition: background-color 0.4s;
+}
+.nav li:hover {
+    background-color: #CE5650;
+
 }
 .nav li.selected {
     font-weight: bold;
-    background-color: darkgray;
+    color: white;
+    background: linear-gradient(#CE5650, #ce3630);
+    letter-spacing: 0.03em;
 }
 
 .nav a {

apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html

@@ -1,11 +1,5 @@
 <div id="available" ng-controller="CordAvailable as ctrl">
-    <h2>{{name}}</h2>
+    <h2>{{available.name}}</h2>
-    <table>
+    <p>{{available.desc}}</p>
-        <tr ng-repeat="func in funcs">
-            <td class="icon">icon of function</td>
-            <td>{{func.name}}</td>
-            <td class="desc">{{func.desc}}</td>
-        </tr>
-    </table>
     <button type="button">Apply</button>
 </div>

apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html

@@ -4,6 +4,7 @@
     <div class="main-left">
         <h3>You are subscribed to the</h3>
         <h2>{{name}}</h2>
+        <p>{{desc}}</p>
         <table>
             <tr ng-repeat="func in funcs">
                 <td class="icon">icon of function</td>

apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js

@@ -19,30 +19,12 @@
 
     var $log, $resource;
 
-    var before = 'http://localhost:8080/rs/bundle/0',
+    var url = 'http://localhost:8080/rs/bundle';
-        after = 'http://localhost:8080/rs/bundle/1';
 
-    var basic = 'Basic Bundle',
+    var basic = 'basic',
-        family = 'Family Bundle',
+        family = 'family',
-        current, which,
+        current,
-        avScope;
+        avCb;
-
-    function getAvailable(scope) {
-        var AvailableData, resource;
-
-        AvailableData = $resource(which);
-        resource = AvailableData.get({},
-            // success
-            function () {
-                scope.name = resource.bundle.name;
-                scope.funcs = resource.bundle.functions;
-            },
-            // error
-            function () {
-                $log.error('Problem with resource', resource);
-            });
-        $log.debug('Resource received:', resource);
-    }
 
     angular.module('cordBundle', [])
         .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
@@ -52,29 +34,36 @@
                 $log = _$log_;
                 $resource = _$resource_;
 
-                BundleData = $resource(after);
+                BundleData = $resource(url);
                 resource = BundleData.get({},
                     // success
                     function () {
+                        current = resource.bundle.id;
                         $scope.name = resource.bundle.name;
-                        current = $scope.name;
+                        $scope.desc = resource.bundle.desc;
                         $scope.funcs = resource.bundle.functions;
-
+                        avCb(resource);
-                        which = (current === basic) ? after : before;
-                        getAvailable(avScope);
                     },
                     // error
                     function () {
                         $log.error('Problem with resource', resource);
                     });
-                $log.debug('Resource received:', resource);
 
                 $log.debug('Cord Bundle Ctrl has been created.');
         }])
 
         .controller('CordAvailable', ['$scope',
             function ($scope) {
-                avScope = $scope;
+                avCb = function (resource) {
+                    $scope.id = (current === basic) ? family : basic;
+                    $scope.bundles = resource.bundles;
+
+                    $scope.bundles.forEach(function (bundle) {
+                        if (bundle.id === $scope.id) {
+                            $scope.available = bundle;
+                        }
+                    });
+                };
 
                 $log.debug('Cord Available Ctrl has been created.');
         }])

apps/demo/cord-gui/src/main/webapp/app/view/common/common.css

@@ -30,6 +30,9 @@ p, a, li, th, td {
 body {
     background-color: #efefef;
 }
+th, td {
+    color: rgba(0, 0, 0, 0.8);
+}
 
 div.container {
     width: 75%;

apps/demo/cord-gui/src/main/webapp/app/view/home/home.css

@@ -15,9 +15,59 @@
  */
 
 #home table {
-    width: 100%;
+    width: 94%;
+    table-layout: fixed;
+    margin-left: 6%;
+}
+#home table.title {
+    background: linear-gradient(lightgray, darkgray);
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+#home table.title th {
+    text-align: center;
+}
+
+#home table.content {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+#home table.content th,
+#home table.content td {
+    font-size: 90%;
+}
+#home table.content th {
+    background-color: rgba(173, 216, 230, 0.75);
+}
+
+#home table.content tbody tr:nth-of-type(even) {
+    background-color: rgba(173, 216, 230, 0.25);
+}
+#home table.content tbody tr:nth-of-type(odd) {
+    background-color: rgba(173, 216, 230, 0.5);
 }
 
 #home td, #home th {
-    text-align: center;
+    text-align: left;
+    padding: 2%;
+}
+
+#home h3 {
+    font-weight: normal;
+    margin-bottom: 4%;
+}
+
+#home h4 {
+    color: rgb(107, 107, 107);
+    font-style: italic;
+    font-weight: normal;
+    font-size: 90%;
+    margin-bottom: 1%;
+}
+
+#home p {
+    font-size: 70%;
+    color: rgba(0,0,0, 0.8);
+    text-indent: 20px;
+    text-align: justify;
 }

apps/demo/cord-gui/src/main/webapp/app/view/home/home.html

@@ -2,9 +2,16 @@
 <div id="home" class="container">
     <nav></nav>
     <div class="main-left">
-        <h2>Dashboard</h2>
         <h4>You are subscribed to the</h4>
         <h3>{{bundle}}</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
+            amet ultricies metus. Praesent pretium diam et nibh lacinia
+            faucibus. Donec commodo efficitur ex quis faucibus.
+            Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
+            tempor, quis fringilla arcu pellentesque. Duis efficitur massa
+            libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
+        </p>
     </div>
 
     <div class="main-right">

apps/demo/cord-gui/src/main/webapp/app/view/home/home.js

@@ -17,8 +17,7 @@
 (function () {
     'use strict';
 
-    var before = 'http://localhost:8080/rs/dashboard/0',
+    var url = 'http://localhost:8080/rs/dashboard';
-        after = 'http://localhost:8080/rs/dashboard/1';
 
     angular.module('cordHome', [])
         .controller('CordHomeCtrl', ['$log', '$scope', '$resource',
@@ -26,7 +25,7 @@
                 var DashboardData, resource;
                 $scope.page = 'dashboard';
 
-                DashboardData = $resource(before);
+                DashboardData = $resource(url);
                 resource = DashboardData.get({},
                     // success
                     function () {

apps/demo/cord-gui/src/main/webapp/cord.js

@@ -20,6 +20,7 @@
     var modules = [
             'ngRoute',
             'ngResource',
+            'ngAnimate',
             'cordMast',
             'cordFoot',
             'cordNav'