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
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index 35f8103..aa23af9 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/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 {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
index 912b9ac..ff75a2f 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
+++ b/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>
- <table>
- <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>
+ <h2>{{available.name}}</h2>
+ <p>{{available.desc}}</p>
<button type="button">Apply</button>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index d8574b5..d74c0be 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/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>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index a65214b..c02af54 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/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',
- after = 'http://localhost:8080/rs/bundle/1';
+ var url = 'http://localhost:8080/rs/bundle';
- var basic = 'Basic Bundle',
- family = 'Family Bundle',
- current, which,
- avScope;
-
- 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);
- }
+ var basic = 'basic',
+ family = 'family',
+ current,
+ avCb;
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;
-
- which = (current === basic) ? after : before;
- getAvailable(avScope);
+ avCb(resource);
},
// 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.');
}])
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index 34f16bc..60cb43b 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -30,6 +30,9 @@
body {
background-color: #efefef;
}
+th, td {
+ color: rgba(0, 0, 0, 0.8);
+}
div.container {
width: 75%;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
index 31cfe98..dae5251 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
+++ b/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;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
index 2d9130e..7b95cb0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
+++ b/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">
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
index b4b8a0d..be600f7 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
+++ b/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',
- after = 'http://localhost:8080/rs/dashboard/1';
+ var url = 'http://localhost:8080/rs/dashboard';
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 () {
diff --git a/apps/demo/cord-gui/src/main/webapp/cord.js b/apps/demo/cord-gui/src/main/webapp/cord.js
index 842c976..81aa565 100644
--- a/apps/demo/cord-gui/src/main/webapp/cord.js
+++ b/apps/demo/cord-gui/src/main/webapp/cord.js
@@ -20,6 +20,7 @@
var modules = [
'ngRoute',
'ngResource',
+ 'ngAnimate',
'cordMast',
'cordFoot',
'cordNav'