mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-21 12:22:18 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Change-Id: I8d6b8c5c5d3de0a23d9cb7e2ccf7529bb27de299
This commit is contained in:
Bri Prebilic Cole 2015-05-21 16:35:06 -07:00
parent 0b2b6d1c2f
commit f3eba316e8
9 changed files with 97 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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>

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

@ -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>

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

@ -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.');
}])

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

@ -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%;

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

@ -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;
}

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

@ -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">

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

@ -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 () {

1
apps/demo/cord-gui/src/main/webapp/cord.js
View File

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