ONOS-1935 - CORD-GUI -- CSS for demo bundles page created, apply button switches bundles user is subscribed to. WIP.
Change-Id: Iedc42682ea7d939a540a1c60ef1b61e26dab8fca
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
index f5165b2..f6b511d 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
@@ -26,6 +26,7 @@
margin-right: auto;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
+ z-index: 100;
}
.foot div {
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 ff75a2f..d28b4a6 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,5 +1,5 @@
<div id="available" ng-controller="CordAvailable as ctrl">
- <h2>{{available.name}}</h2>
+ <h3>{{available.name}}</h3>
<p>{{available.desc}}</p>
<button type="button">Apply</button>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
index 6e1fa2f..fe7303a 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -19,24 +19,58 @@
}
div#bundle div.main-right {
width: 38%;
+ height: 85vh;
+ background-color: rgba(173, 216, 230, 0.25);
+ border-radius: 5px;
}
#bundle table {
- width: 100%;
+ width: 95%;
+ margin-top: 5%;
+ margin-left: 2%;
+ border-radius: 3px;
}
#bundle td {
- text-align: center;
+ font-size: 90%;
}
#bundle td.icon {
+ text-align: center;
width: 50px;
height: 50px;
+ padding: 4%;
+}
+#bundle td.name {
+ border-left: solid 1px rgba(136, 0, 0, 0.25);
+ padding-left: 3%;
}
#bundle td.desc {
width: 50%;
text-align: left;
+ font-style: italic;
+}
+
+#bundle h2 {
+ text-align: center;
+ padding: 3%;
+ background-color: rgba(173, 216, 230, 0.75);
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ color: white;
+ font-weight: normal;
+}
+
+div#available {
+ padding: 5%;
+}
+
+#available p {
+ text-indent: initial;
+ text-align: initial;
}
#available button {
float: right;
-}
\ No newline at end of file
+ width: 33%;
+ margin-top: 5%;
+}
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 d74c0be..e44c205 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
@@ -2,20 +2,20 @@
<div id="bundle" class="container">
<nav></nav>
<div class="main-left">
- <h3>You are subscribed to the</h3>
- <h2>{{name}}</h2>
+ <h4>You are subscribed to the</h4>
+ <h3>{{name}}</h3>
<p>{{desc}}</p>
<table>
<tr ng-repeat="func in funcs">
<td class="icon">icon of function</td>
- <td>{{func.name}}</td>
+ <td class="name">{{func.name}}</td>
<td class="desc">{{func.desc}}</td>
- <td>{{func.params.level && "Level: " + func.params.level}}</td>
</tr>
</table>
</div>
<div class="main-right">
<h2>Available Bundles</h2>
<div bundle-available></div>
+ <!--Can use ng-repeat on the above div for how many bundles are available-->
</div>
</div>
\ No newline at end of file
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 c02af54..987c70a 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
@@ -24,13 +24,48 @@
var basic = 'basic',
family = 'family',
current,
+ bundleScope,
+ avScope,
avCb;
+ function setInfo(resource, scope) {
+ current = resource.bundle.id;
+ scope.name = resource.bundle.name;
+ scope.desc = resource.bundle.desc;
+ scope.funcs = resource.bundle.functions;
+ avCb(resource);
+ }
+
angular.module('cordBundle', [])
+ .directive('bundleAvailable', ['$resource', function ($resource) {
+ return {
+ templateUrl: 'app/view/bundle/available.html',
+ link: function (scope, elem) {
+ var button = $(elem).find('button'),
+ ApplyData, resource;
+
+ button.click(function () {
+ ApplyData = $resource(url + '/' + avScope.available.id);
+ resource = ApplyData.get({},
+ // success
+ function () {
+ setInfo(resource, bundleScope);
+ },
+ // error
+ function () {
+ $log.error('Problem with resource', resource);
+ }
+ );
+ });
+ }
+ };
+ }])
+
.controller('CordBundleCtrl', ['$log', '$scope', '$resource',
function (_$log_, $scope, _$resource_) {
var BundleData, resource;
$scope.page = 'bundle';
+ bundleScope = $scope;
$log = _$log_;
$resource = _$resource_;
@@ -38,11 +73,7 @@
resource = BundleData.get({},
// success
function () {
- current = resource.bundle.id;
- $scope.name = resource.bundle.name;
- $scope.desc = resource.bundle.desc;
- $scope.funcs = resource.bundle.functions;
- avCb(resource);
+ setInfo(resource, $scope);
},
// error
function () {
@@ -54,6 +85,7 @@
.controller('CordAvailable', ['$scope',
function ($scope) {
+ avScope = $scope;
avCb = function (resource) {
$scope.id = (current === basic) ? family : basic;
$scope.bundles = resource.bundles;
@@ -66,11 +98,5 @@
};
$log.debug('Cord Available Ctrl has been created.');
- }])
-
- .directive('bundleAvailable', function () {
- return {
- templateUrl: 'app/view/bundle/available.html'
- };
- });
+ }]);
}());
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 60cb43b..7889db6 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,9 +30,46 @@
body {
background-color: #efefef;
}
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
th, td {
color: rgba(0, 0, 0, 0.8);
}
+h3 {
+ font-weight: normal;
+ margin-bottom: 4%;
+}
+h4 {
+ color: rgb(107, 107, 107);
+ font-style: italic;
+ font-weight: normal;
+ font-size: 90%;
+ margin-bottom: 1%;
+}
+p {
+ font-size: 70%;
+ color: rgba(0,0,0, 0.8);
+ text-indent: 20px;
+ text-align: justify;
+}
+
+button {
+ height: 30px;
+ box-shadow: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ letter-spacing: 0.02em;
+ font-size: 14px;
+ background-color: lightgray;
+ transition: background-color 0.4s;
+}
+button:hover {
+ color: white;
+ background-color: #CE5650;
+}
div.container {
width: 75%;
@@ -51,3 +88,18 @@
svg#icon-defs {
display: none;
}
+
+/* animation */
+.fadein {
+ transition: all linear 0.5s;
+}
+.fadein.ng-enter {
+ opacity: 0;
+}
+.fadein.ng-enter-stagger {
+ transition-delay: 0.2s;
+ animation-delay: 0.2s;
+}
+.fadein.ng-enter.ng-enter-active {
+ opacity: 1;
+}
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 dae5251..fd873a1 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
@@ -28,10 +28,6 @@
text-align: center;
}
-#home table.content {
- border-spacing: 0;
- border-collapse: collapse;
-}
#home table.content th,
#home table.content td {
font-size: 90%;
@@ -51,23 +47,3 @@
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 7b95cb0..857d694 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
@@ -28,7 +28,7 @@
</tr>
</thead>
<tbody>
- <tr ng-repeat="user in users">
+ <tr ng-repeat="user in users" class="fadein">
<td>{{user.name}}</td>
<td>{{user.mac}}</td>
</tr>