홍길동 / 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 { ...@@ -42,3 +42,12 @@ div.mast {
42 .mast a:visited { 42 .mast a:visited {
43 color: white; 43 color: white;
44 } 44 }
45 +
46 +.mast svg {
47 + position: absolute;
48 + top: -1px;
49 + left: 88px;
50 +}
51 +.mast g.icon use.glyph.bird {
52 + fill: #CE5650;
53 +}
......
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 <div class="mast"> 19 <div class="mast">
20 <div class="left"> 20 <div class="left">
21 <a href="#/home" class="logo"><h1>CORD</h1></a> 21 <a href="#/home" class="logo"><h1>CORD</h1></a>
22 + <icon size="25px" id="bird"></icon>
22 </div> 23 </div>
23 24
24 <div class="right"> 25 <div class="right">
......
...@@ -17,13 +17,15 @@ ...@@ -17,13 +17,15 @@
17 head, body, footer, 17 head, body, footer,
18 h1, h2, h3, h4, h5, h6, p, 18 h1, h2, h3, h4, h5, h6, p,
19 a, ul, li, div, 19 a, ul, li, div,
20 -table, tr, td, th, thead, tbody { 20 +table, tr, td, th, thead, tbody,
21 +form, select, input, option, label {
21 padding: 0; 22 padding: 0;
22 margin: 0; 23 margin: 0;
23 } 24 }
24 25
25 h1, h2, h3, h4, h5, h6, 26 h1, h2, h3, h4, h5, h6,
26 -p, a, li, th, td { 27 +p, a, li, th, td,
28 +select, input, option, label {
27 font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif; 29 font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
28 } 30 }
29 31
...@@ -80,6 +82,7 @@ input[type="button"][disabled]:hover, ...@@ -80,6 +82,7 @@ input[type="button"][disabled]:hover,
80 input[type="reset"][disabled]:hover { 82 input[type="reset"][disabled]:hover {
81 background-color: lightgray; 83 background-color: lightgray;
82 color: graytext; 84 color: graytext;
85 + cursor: default;
83 } 86 }
84 87
85 div.container { 88 div.container {
...@@ -101,6 +104,13 @@ svg#icon-defs { ...@@ -101,6 +104,13 @@ svg#icon-defs {
101 display: none; 104 display: none;
102 } 105 }
103 106
107 +g.icon circle {
108 + fill: none;
109 +}
110 +g.icon use.glyph.checkMark {
111 + fill: rgb(68, 189, 83)
112 +}
113 +
104 /* animation */ 114 /* animation */
105 .fadein { 115 .fadein {
106 transition: all linear 0.5s; 116 transition: all linear 0.5s;
......
...@@ -14,6 +14,104 @@ ...@@ -14,6 +14,104 @@
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
16 16
17 -#user table.user-info { 17 +#user div.main-left {
18 + width: 98%;
19 + padding-left: 1%;
20 +}
21 +#user div.main-left.family {
22 + width: 61%;
23 + padding-left: 1%;
24 +}
25 +
26 +#user div.main-right {
27 + width: 0;
28 +}
29 +#user div.main-right.family {
30 + width: 37%;
31 +}
32 +
33 +#user table.user-info,
34 +#user table.user-form {
18 float: left; 35 float: left;
36 + width: 100%;
37 +}
38 +
39 +#user th.topLeft {
40 + border-top-left-radius: 3px;
41 +}
42 +#user th.topRight {
43 + border-top-right-radius: 3px;
44 +}
45 +
46 +#user table.user-info th,
47 +#user table.user-form th {
48 + text-align: left;
49 + background-color: rgba(173, 216, 230, 0.75);
50 + padding: 2% 1%;
51 +}
52 +
53 +#user div.main-left.family table.user-info th,
54 +#user div.main-right.family table.user-form th {
55 + padding: 17px;
56 +}
57 +
58 +#user div.main-left.family table.user-info td,
59 +#user div.main-right.family table.user-form td {
60 + padding: 10px;
61 + height: 23px;
62 +}
63 +#user table.user-info td {
64 + padding: 1%;
65 +}
66 +#user table.user-form td.buttons {
67 + text-align: right;
68 + border-bottom-left-radius: 3px;
69 + border-bottom-right-radius: 3px;
70 +}
71 +
72 +#user table.user-info tr:nth-of-type(odd),
73 +#user table.user-form tr:nth-of-type(odd) {
74 + background-color: rgba(173, 216, 230, 0.5);
75 +}
76 +#user table.user-info tr:nth-of-type(even),
77 +#user table.user-form tr:nth-of-type(even) {
78 + background-color: rgba(173, 216, 230, 0.25);
79 +}
80 +
81 +#user table.user-form tr.options td {
82 + padding-left: 5%;
83 +}
84 +
85 +#user select,
86 +#user select:focus {
87 + border: none;
88 +}
89 +
90 +#user select {
91 + font-size: 95%;
92 +}
93 +
94 +#user option,
95 +#user option:focus {
96 + border: none;
97 +}
98 +
99 +#user option[selected] {
100 + background-color: rgb(122, 188, 229);
101 +}
102 +
103 +#user label {
104 + font-weight: bold;
105 + display: block;
106 + text-align: center;
107 + padding: 5%;
108 +}
109 +
110 +#user input[type="button"],
111 +#user input[type="reset"] {
112 + width: 30%;
113 +}
114 +
115 +#user td.buttons svg {
116 + vertical-align: middle;
19 } 117 }
......
...@@ -2,32 +2,48 @@ ...@@ -2,32 +2,48 @@
2 <div class="container"> 2 <div class="container">
3 <nav></nav> 3 <nav></nav>
4 <div id="user"> 4 <div id="user">
5 - <table class="user-info"> 5 + <div class="main-left" ng-class="{family: isFamily}">
6 - <tr> 6 + <table class="user-info">
7 - <th>Name</th> 7 + <tr>
8 - <th>Mac</th> 8 + <th class="topLeft">Name</th>
9 - <th ng-if="isFamily">Select Site Rating</th> 9 + <th ng-class="{topRight: !isFamily}">Mac</th>
10 - </tr> 10 + </tr>
11 - <tr ng-repeat="user in users" class="fadein"> 11 + <tr ng-repeat="user in users" class="fadein">
12 - <td>{{user.name}}</td> 12 + <td>{{user.name}}</td>
13 - <td>{{user.mac}}</td> 13 + <td>{{user.mac}}</td>
14 - </tr> 14 + </tr>
15 - </table> 15 + </table>
16 + </div>
16 17
17 - <form ng-if="isFamily" 18 + <div class="main-right" ng-class="{family: isFamily}">
18 - name="changeLevels"> 19 + <form ng-if="isFamily"
19 - <select ng-repeat-start="user in users" class="fadein" 20 + name="changeLevels">
20 - ng-init="newLevels[user.id]=user.profile.url_filter.level" 21 + <table class="user-form">
21 - ng-model="newLevels[user.id]" 22 + <tr>
22 - ng-options="l for l in levels"> 23 + <th class="topRight">Select Site Rating</th>
23 - </select> 24 + </tr>
24 - <br ng-repeat-end> 25 + <tr ng-repeat="user in users" class="options">
25 - <input type="reset" value="Cancel" 26 + <td>
26 - ng-click="cancelChanges(changeLevels)" 27 + <select ng-init="newLevels[user.id]=user.profile.url_filter.level"
27 - ng-disabled="changeLevels.$pristine"> 28 + ng-model="newLevels[user.id]"
28 - <input type="button" value="Apply" 29 + ng-options="l for l in levels">
29 - ng-click="applyChanges()" 30 + </select>
30 - ng-disabled="changeLevels.$pristine"> 31 + </td>
31 - </form> 32 + </tr>
33 + <tr>
34 + <td class="buttons">
35 + <icon size="20px" id="checkMark"
36 + ng-show="showCheck"></icon>
37 + <input type="reset" value="Cancel"
38 + ng-click="cancelChanges(changeLevels)"
39 + ng-disabled="changeLevels.$pristine">
40 + <input type="button" value="Apply"
41 + ng-click="applyChanges(changeLevels)"
42 + ng-disabled="changeLevels.$pristine">
43 + </td>
44 + </tr>
45 + </table>
46 + </form>
47 + </div>
32 </div> 48 </div>
33 </div> 49 </div>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -23,12 +23,13 @@ ...@@ -23,12 +23,13 @@
23 url_filter = 'url_filter'; 23 url_filter = 'url_filter';
24 24
25 angular.module('cordUser', []) 25 angular.module('cordUser', [])
26 - .controller('CordUserCtrl', ['$log', '$scope', '$resource', 26 + .controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout',
27 - function ($log, $scope, $resource) { 27 + function ($log, $scope, $resource, $timeout) {
28 var BundleData, bundleResource; 28 var BundleData, bundleResource;
29 $scope.page = 'user'; 29 $scope.page = 'user';
30 $scope.isFamily = false; 30 $scope.isFamily = false;
31 $scope.newLevels = {}; 31 $scope.newLevels = {};
32 + $scope.showCheck = false;
32 33
33 // === Get data functions --- 34 // === Get data functions ---
34 35
...@@ -77,7 +78,7 @@ ...@@ -77,7 +78,7 @@
77 return userUrl + '/' + id + '/apply/url_filter/level/' + level; 78 return userUrl + '/' + id + '/apply/url_filter/level/' + level;
78 } 79 }
79 80
80 - $scope.applyChanges = function () { 81 + $scope.applyChanges = function (changeLevels) {
81 var requests = []; 82 var requests = [];
82 83
83 if ($scope.users) { 84 if ($scope.users) {
...@@ -93,6 +94,11 @@ ...@@ -93,6 +94,11 @@
93 getUsers(req); 94 getUsers(req);
94 }); 95 });
95 } 96 }
97 + changeLevels.$setPristine();
98 + $scope.showCheck = true;
99 + $timeout(function () {
100 + $scope.showCheck = false;
101 + }, 3000);
96 }; 102 };
97 103
98 $scope.cancelChanges = function (changeLevels) { 104 $scope.cancelChanges = function (changeLevels) {
...@@ -102,6 +108,7 @@ ...@@ -102,6 +108,7 @@
102 }); 108 });
103 } 109 }
104 changeLevels.$setPristine(); 110 changeLevels.$setPristine();
111 + $scope.showCheck = false;
105 }; 112 };
106 113
107 $log.debug('Cord User Ctrl has been created.'); 114 $log.debug('Cord User Ctrl has been created.');
......