ONOS-1937, ONOS-1938 - CORD-GUI -- User view CSS finished, icon appears when changes are applied, masthead has ONOS bird over the CORD logo.
Change-Id: I5ca6fe7cc43509f03edb8ac12285dfb0ba957fca
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
index e89f218..c1a6ec3 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
@@ -42,3 +42,12 @@
.mast a:visited {
color: white;
}
+
+.mast svg {
+ position: absolute;
+ top: -1px;
+ left: 88px;
+}
+.mast g.icon use.glyph.bird {
+ fill: #CE5650;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
index 82dd2e3..b89520d 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
@@ -19,6 +19,7 @@
<div class="mast">
<div class="left">
<a href="#/home" class="logo"><h1>CORD</h1></a>
+ <icon size="25px" id="bird"></icon>
</div>
<div class="right">
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 968b9c8..b95f5b3 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
@@ -17,13 +17,15 @@
head, body, footer,
h1, h2, h3, h4, h5, h6, p,
a, ul, li, div,
-table, tr, td, th, thead, tbody {
+table, tr, td, th, thead, tbody,
+form, select, input, option, label {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6,
-p, a, li, th, td {
+p, a, li, th, td,
+select, input, option, label {
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
}
@@ -80,6 +82,7 @@
input[type="reset"][disabled]:hover {
background-color: lightgray;
color: graytext;
+ cursor: default;
}
div.container {
@@ -101,6 +104,13 @@
display: none;
}
+g.icon circle {
+ fill: none;
+}
+g.icon use.glyph.checkMark {
+ fill: rgb(68, 189, 83)
+}
+
/* animation */
.fadein {
transition: all linear 0.5s;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
index acb98e0..6dcb40d 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
@@ -14,6 +14,104 @@
* limitations under the License.
*/
-#user table.user-info {
+#user div.main-left {
+ width: 98%;
+ padding-left: 1%;
+}
+#user div.main-left.family {
+ width: 61%;
+ padding-left: 1%;
+}
+
+#user div.main-right {
+ width: 0;
+}
+#user div.main-right.family {
+ width: 37%;
+}
+
+#user table.user-info,
+#user table.user-form {
float: left;
+ width: 100%;
+}
+
+#user th.topLeft {
+ border-top-left-radius: 3px;
+}
+#user th.topRight {
+ border-top-right-radius: 3px;
+}
+
+#user table.user-info th,
+#user table.user-form th {
+ text-align: left;
+ background-color: rgba(173, 216, 230, 0.75);
+ padding: 2% 1%;
+}
+
+#user div.main-left.family table.user-info th,
+#user div.main-right.family table.user-form th {
+ padding: 17px;
+}
+
+#user div.main-left.family table.user-info td,
+#user div.main-right.family table.user-form td {
+ padding: 10px;
+ height: 23px;
+}
+#user table.user-info td {
+ padding: 1%;
+}
+#user table.user-form td.buttons {
+ text-align: right;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+#user table.user-info tr:nth-of-type(odd),
+#user table.user-form tr:nth-of-type(odd) {
+ background-color: rgba(173, 216, 230, 0.5);
+}
+#user table.user-info tr:nth-of-type(even),
+#user table.user-form tr:nth-of-type(even) {
+ background-color: rgba(173, 216, 230, 0.25);
+}
+
+#user table.user-form tr.options td {
+ padding-left: 5%;
+}
+
+#user select,
+#user select:focus {
+ border: none;
+}
+
+#user select {
+ font-size: 95%;
+}
+
+#user option,
+#user option:focus {
+ border: none;
+}
+
+#user option[selected] {
+ background-color: rgb(122, 188, 229);
+}
+
+#user label {
+ font-weight: bold;
+ display: block;
+ text-align: center;
+ padding: 5%;
+}
+
+#user input[type="button"],
+#user input[type="reset"] {
+ width: 30%;
+}
+
+#user td.buttons svg {
+ vertical-align: middle;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
index 1de09bb..adc672f 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
@@ -2,32 +2,48 @@
<div class="container">
<nav></nav>
<div id="user">
- <table class="user-info">
- <tr>
- <th>Name</th>
- <th>Mac</th>
- <th ng-if="isFamily">Select Site Rating</th>
- </tr>
- <tr ng-repeat="user in users" class="fadein">
- <td>{{user.name}}</td>
- <td>{{user.mac}}</td>
- </tr>
- </table>
+ <div class="main-left" ng-class="{family: isFamily}">
+ <table class="user-info">
+ <tr>
+ <th class="topLeft">Name</th>
+ <th ng-class="{topRight: !isFamily}">Mac</th>
+ </tr>
+ <tr ng-repeat="user in users" class="fadein">
+ <td>{{user.name}}</td>
+ <td>{{user.mac}}</td>
+ </tr>
+ </table>
+ </div>
- <form ng-if="isFamily"
- name="changeLevels">
- <select ng-repeat-start="user in users" class="fadein"
- ng-init="newLevels[user.id]=user.profile.url_filter.level"
- ng-model="newLevels[user.id]"
- ng-options="l for l in levels">
- </select>
- <br ng-repeat-end>
- <input type="reset" value="Cancel"
- ng-click="cancelChanges(changeLevels)"
- ng-disabled="changeLevels.$pristine">
- <input type="button" value="Apply"
- ng-click="applyChanges()"
- ng-disabled="changeLevels.$pristine">
- </form>
+ <div class="main-right" ng-class="{family: isFamily}">
+ <form ng-if="isFamily"
+ name="changeLevels">
+ <table class="user-form">
+ <tr>
+ <th class="topRight">Select Site Rating</th>
+ </tr>
+ <tr ng-repeat="user in users" class="options">
+ <td>
+ <select ng-init="newLevels[user.id]=user.profile.url_filter.level"
+ ng-model="newLevels[user.id]"
+ ng-options="l for l in levels">
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <td class="buttons">
+ <icon size="20px" id="checkMark"
+ ng-show="showCheck"></icon>
+ <input type="reset" value="Cancel"
+ ng-click="cancelChanges(changeLevels)"
+ ng-disabled="changeLevels.$pristine">
+ <input type="button" value="Apply"
+ ng-click="applyChanges(changeLevels)"
+ ng-disabled="changeLevels.$pristine">
+ </td>
+ </tr>
+ </table>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
index 8e97c015b..3ccfe04 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
@@ -23,12 +23,13 @@
url_filter = 'url_filter';
angular.module('cordUser', [])
- .controller('CordUserCtrl', ['$log', '$scope', '$resource',
- function ($log, $scope, $resource) {
+ .controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout',
+ function ($log, $scope, $resource, $timeout) {
var BundleData, bundleResource;
$scope.page = 'user';
$scope.isFamily = false;
$scope.newLevels = {};
+ $scope.showCheck = false;
// === Get data functions ---
@@ -77,7 +78,7 @@
return userUrl + '/' + id + '/apply/url_filter/level/' + level;
}
- $scope.applyChanges = function () {
+ $scope.applyChanges = function (changeLevels) {
var requests = [];
if ($scope.users) {
@@ -93,6 +94,11 @@
getUsers(req);
});
}
+ changeLevels.$setPristine();
+ $scope.showCheck = true;
+ $timeout(function () {
+ $scope.showCheck = false;
+ }, 3000);
};
$scope.cancelChanges = function (changeLevels) {
@@ -102,6 +108,7 @@
});
}
changeLevels.$setPristine();
+ $scope.showCheck = false;
};
$log.debug('Cord User Ctrl has been created.');