From f3eba316e8dfefcba54cd45956dd9236fd64e29e Mon Sep 17 00:00:00 2001 From: Bri Prebilic Cole Date: Thu, 21 May 2015 16:35:06 -0700 Subject: [PATCH] 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 --- .../src/main/webapp/app/fw/nav/nav.css | 11 +++- .../webapp/app/view/bundle/available.html | 10 +--- .../main/webapp/app/view/bundle/bundle.html | 1 + .../src/main/webapp/app/view/bundle/bundle.js | 49 +++++++---------- .../main/webapp/app/view/common/common.css | 3 ++ .../src/main/webapp/app/view/home/home.css | 54 ++++++++++++++++++- .../src/main/webapp/app/view/home/home.html | 9 +++- .../src/main/webapp/app/view/home/home.js | 5 +- apps/demo/cord-gui/src/main/webapp/cord.js | 1 + 9 files changed, 97 insertions(+), 46 deletions(-) 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 35f8103109..aa23af9e99 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 912b9ac1cc..ff75a2fb25 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 @@
-

{{name}}

- - - - - - -
icon of function{{func.name}}{{func.desc}}
+

{{available.name}}

+

{{available.desc}}

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 d8574b53d7..d74c0bec12 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 @@

You are subscribed to the

{{name}}

+

{{desc}}

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 a65214bdd3..c02af54e80 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 34f16bca91..60cb43bf48 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 @@ p, a, li, th, td { 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 31cfe98f0d..dae525104e 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 2d9130efc2..7b95cb075f 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 @@
-

Dashboard

You are subscribed to the

{{bundle}}

+

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

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 b4b8a0d4d4..be600f746b 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 842c9761bc..81aa565019 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'
icon of function