홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
e7399f3b 1 parent c0e8bfa9

GUI -- Cleaned up code for practice scrollable table, added tableHeight as a par… 

…ameter to the directive.

Change-Id: I2f2187e0b1a8a4fdb2d05187bb1d708724aeca99
Inline Side-by-side
Showing 2 changed files with 193 additions and 19 deletions
...@@ -44,6 +44,10 @@ ...@@ -44,6 +44,10 @@
44 color: darkred; 44 color: darkred;
45 } 45 }
46 46
47 + table {
48 + height: 200px;
49 + }
50 +
47 </style> 51 </style>
48 52
49 </head> 53 </head>
...@@ -51,7 +55,7 @@ ...@@ -51,7 +55,7 @@
51 <body ng-app="practiceTable"> 55 <body ng-app="practiceTable">
52 <h2>Scrolling Table Practice</h2> 56 <h2>Scrolling Table Practice</h2>
53 <div> 57 <div>
54 - <table fixed-header> 58 + <table table-height="200px" fixed-header>
55 <thead> 59 <thead>
56 <tr> 60 <tr>
57 <th>URI</th> 61 <th>URI</th>
...@@ -68,6 +72,107 @@ ...@@ -68,6 +72,107 @@
68 <td>mfr</td> 72 <td>mfr</td>
69 <td>hw</td> 73 <td>hw</td>
70 <td>sw</td> 74 <td>sw</td>
75 + <td>serial#101291031813</td>
76 + <td>protocol protocol protocol protocol protocol protocol</td>
77 + </tr>
78 + <tr>
79 + <td>id</td>
80 + <td>mfr</td>
81 + <td>hw</td>
82 + <td>sw</td>
83 + <td>serial</td>
84 + <td>protocol</td>
85 + </tr>
86 + <tr>
87 + <td>id</td>
88 + <td>mfr</td>
89 + <td>hw</td>
90 + <td>sw</td>
91 + <td>serial</td>
92 + <td>protocol</td>
93 + </tr>
94 + <tr>
95 + <td>id</td>
96 + <td>mfr</td>
97 + <td>hw</td>
98 + <td>sw</td>
99 + <td>serial</td>
100 + <td>protocol</td>
101 + </tr><tr>
102 + <td>id</td>
103 + <td>mfr</td>
104 + <td>hw</td>
105 + <td>sw</td>
106 + <td>serial#101291031813</td>
107 + <td>protocol protocol protocol protocol protocol protocol</td>
108 + </tr>
109 + <tr>
110 + <td>id</td>
111 + <td>mfr</td>
112 + <td>hw</td>
113 + <td>sw</td>
114 + <td>serial</td>
115 + <td>protocol</td>
116 + </tr>
117 + <tr>
118 + <td>id</td>
119 + <td>mfr</td>
120 + <td>hw</td>
121 + <td>sw</td>
122 + <td>serial</td>
123 + <td>protocol</td>
124 + </tr>
125 + <tr>
126 + <td>id</td>
127 + <td>mfr</td>
128 + <td>hw</td>
129 + <td>sw</td>
130 + <td>serial</td>
131 + <td>protocol</td>
132 + </tr><tr>
133 + <td>id</td>
134 + <td>mfr</td>
135 + <td>hw</td>
136 + <td>sw</td>
137 + <td>serial#101291031813</td>
138 + <td>protocol protocol protocol protocol protocol protocol</td>
139 + </tr>
140 + <tr>
141 + <td>id</td>
142 + <td>mfr</td>
143 + <td>hw</td>
144 + <td>sw</td>
145 + <td>serial</td>
146 + <td>protocol</td>
147 + </tr>
148 + <tr>
149 + <td>id</td>
150 + <td>mfr</td>
151 + <td>hw</td>
152 + <td>sw</td>
153 + <td>serial</td>
154 + <td>protocol</td>
155 + </tr>
156 + <tr>
157 + <td>id</td>
158 + <td>mfr</td>
159 + <td>hw</td>
160 + <td>sw</td>
161 + <td>serial</td>
162 + <td>protocol</td>
163 + </tr><tr>
164 + <td>id</td>
165 + <td>mfr</td>
166 + <td>hw</td>
167 + <td>sw</td>
168 + <td>serial#101291031813</td>
169 + <td>protocol protocol protocol protocol protocol protocol</td>
170 + </tr>
171 + <tr>
172 + <td>id</td>
173 + <td>mfr</td>
174 + <td>hw</td>
175 + <td>sw</td>
71 <td>serial</td> 176 <td>serial</td>
72 <td>protocol</td> 177 <td>protocol</td>
73 </tr> 178 </tr>
...@@ -86,6 +191,83 @@ ...@@ -86,6 +191,83 @@
86 <td>sw</td> 191 <td>sw</td>
87 <td>serial</td> 192 <td>serial</td>
88 <td>protocol</td> 193 <td>protocol</td>
194 + </tr><tr>
195 + <td>id</td>
196 + <td>mfr</td>
197 + <td>hw</td>
198 + <td>sw</td>
199 + <td>serial#101291031813</td>
200 + <td>protocol protocol protocol protocol protocol protocol</td>
201 + </tr>
202 + <tr>
203 + <td>id</td>
204 + <td>mfr</td>
205 + <td>hw</td>
206 + <td>sw</td>
207 + <td>serial</td>
208 + <td>protocol</td>
209 + </tr>
210 + <tr>
211 + <td>id</td>
212 + <td>mfr</td>
213 + <td>hw</td>
214 + <td>sw</td>
215 + <td>serial</td>
216 + <td>protocol</td>
217 + </tr>
218 + <tr>
219 + <td>id</td>
220 + <td>mfr</td>
221 + <td>hw</td>
222 + <td>sw</td>
223 + <td>serial</td>
224 + <td>protocol</td>
225 + </tr><tr>
226 + <td>id</td>
227 + <td>mfr</td>
228 + <td>hw</td>
229 + <td>sw</td>
230 + <td>serial</td>
231 + <td>protocol</td>
232 + </tr>
233 + <tr>
234 + <td>id</td>
235 + <td>mfr</td>
236 + <td>hw</td>
237 + <td>sw</td>
238 + <td>serial</td>
239 + <td>protocol</td>
240 + </tr>
241 + <tr>
242 + <td>id</td>
243 + <td>mfr</td>
244 + <td>hw</td>
245 + <td>sw</td>
246 + <td>serial</td>
247 + <td>protocol</td>
248 + </tr><tr>
249 + <td>id</td>
250 + <td>mfr</td>
251 + <td>hw</td>
252 + <td>sw</td>
253 + <td>serial#101291031813</td>
254 + <td>protocol protocol protocol protocol protocol protocol</td>
255 + </tr>
256 + <tr>
257 + <td>id</td>
258 + <td>mfr</td>
259 + <td>hw</td>
260 + <td>sw</td>
261 + <td>serial</td>
262 + <td>protocol</td>
263 + </tr>
264 + <tr>
265 + <td>id</td>
266 + <td>mfr</td>
267 + <td>hw</td>
268 + <td>sw</td>
269 + <td>serial</td>
270 + <td>protocol</td>
89 </tr> 271 </tr>
90 <tr> 272 <tr>
91 <td>id</td> 273 <td>id</td>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 (function () { 21 (function () {
22 'use strict'; 22 'use strict';
23 23
24 - function setColWidth($log, t) { 24 + function setColWidth(t) {
25 var tHeaders, tdElement, colWidth; 25 var tHeaders, tdElement, colWidth;
26 26
27 tHeaders = t.selectAll('th'); 27 tHeaders = t.selectAll('th');
...@@ -36,28 +36,20 @@ ...@@ -36,28 +36,20 @@
36 36
37 thElement.style('width', colWidth); 37 thElement.style('width', colWidth);
38 tdElement.style('width', colWidth); 38 tdElement.style('width', colWidth);
39 - //thElement.style('color', 'blue');
40 - //tdElement.style('color', 'red');
41 -
42 }); 39 });
43 } 40 }
44 41
45 - function setCSS(thead, tbody) { 42 + function setCSS(thead, tbody, height) {
46 thead.style('display', 'block'); 43 thead.style('display', 'block');
47 tbody.style({'display': 'block', 44 tbody.style({'display': 'block',
48 - 'height': '100px', 45 + 'height': height || '500px',
49 'overflow': 'auto' 46 'overflow': 'auto'
50 }); 47 });
51 } 48 }
52 49
53 - function trimTable(tbody) { 50 + function fixTable(t, th, tb, height) {
54 - 51 + setColWidth(t);
55 - } 52 + setCSS(th, tb, height);
56 -
57 - function fixTable($log, t, th, tb) {
58 - setColWidth($log, t);
59 - setCSS(th, tb);
60 - trimTable(tb);
61 } 53 }
62 54
63 angular.module('practiceTable', []) 55 angular.module('practiceTable', [])
...@@ -65,6 +57,9 @@ ...@@ -65,6 +57,9 @@
65 .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) { 57 .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
66 return { 58 return {
67 restrict: 'A', 59 restrict: 'A',
60 + scope: {
61 + tableHeight: '@'
62 + },
68 63
69 link: function (scope, element, attrs) { 64 link: function (scope, element, attrs) {
70 var table = d3.select(element[0]), 65 var table = d3.select(element[0]),
...@@ -76,19 +71,16 @@ ...@@ -76,19 +71,16 @@
76 function () { return (!(table.offsetParent === null)); }, 71 function () { return (!(table.offsetParent === null)); },
77 function (newValue, oldValue) { 72 function (newValue, oldValue) {
78 if (newValue === true) { 73 if (newValue === true) {
79 - $log.log('table is visible');
80 74
81 // ensure thead and tbody have no display 75 // ensure thead and tbody have no display
82 thead.style('display', null); 76 thead.style('display', null);
83 tbody.style('display', null); 77 tbody.style('display', null);
84 78
85 $timeout(function() { 79 $timeout(function() {
86 - $log.log('timeout is over'); 80 + fixTable(table, thead, tbody, scope.tableHeight);
87 - fixTable($log, table, thead, tbody);
88 }); 81 });
89 } 82 }
90 }); 83 });
91 - $log.log('fixedHeader directive has been created');
92 } 84 }
93 }; 85 };
94 }]); 86 }]);
......