홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
5d6153e9 1 parent 48e832c5

ONOS-1937, ONOS-1938 - CORD-GUI -- User view CSS finished, icon appears when cha… 

…nges are applied, masthead has ONOS bird over the CORD logo.

Change-Id: I5ca6fe7cc43509f03edb8ac12285dfb0ba957fca
Inline Side-by-side
Showing 6 changed files with 173 additions and 32 deletions
......@@ -42,3 +42,12 @@ div.mast {
.mast a:visited {
color: white;
}
.mast svg {
position: absolute;
top: -1px;
left: 88px;
}
.mast g.icon use.glyph.bird {
fill: #CE5650;
}
......
......@@ -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">
......
......@@ -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="button"][disabled]:hover,
input[type="reset"][disabled]:hover {
background-color: lightgray;
color: graytext;
cursor: default;
}
div.container {
......@@ -101,6 +104,13 @@ svg#icon-defs {
display: none;
}
g.icon circle {
fill: none;
}
g.icon use.glyph.checkMark {
fill: rgb(68, 189, 83)
}
/* animation */
.fadein {
transition: all linear 0.5s;
......
......@@ -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;
}
......
......@@ -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
......
......@@ -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.');
......