GUI -- Resizing tabular view refactor and minor CSS edits. App View auto-refreshes by default again.
Change-Id: I362733996c340ed9fd5d674534c29181b7015410
Showing
17 changed files
with
135 additions
and
154 deletions
... | @@ -79,14 +79,5 @@ | ... | @@ -79,14 +79,5 @@ |
79 | }); | 79 | }); |
80 | } | 80 | } |
81 | }; | 81 | }; |
82 | - }]) | ||
83 | - | ||
84 | - // create a general ng-repeat complete notifier directive | ||
85 | - .directive('ngRepeatDone', [function () { | ||
86 | - return function (scope) { | ||
87 | - if (scope.$last) { | ||
88 | - scope.$emit('LastElement'); | ||
89 | - } | ||
90 | - }; | ||
91 | }]); | 82 | }]); |
92 | }()); | 83 | }()); | ... | ... |
... | @@ -35,72 +35,62 @@ | ... | @@ -35,72 +35,62 @@ |
35 | // internal state | 35 | // internal state |
36 | var currCol = {}, | 36 | var currCol = {}, |
37 | prevCol = {}, | 37 | prevCol = {}, |
38 | + cstmWidths = {}, | ||
38 | sortIconAPI; | 39 | sortIconAPI; |
39 | 40 | ||
40 | - // Functions for creating a scrolling table body with fixed table header | 41 | + // Functions for resizing a tabular view to the window |
41 | 42 | ||
42 | function _width(elem, width) { | 43 | function _width(elem, width) { |
43 | elem.style('width', width); | 44 | elem.style('width', width); |
44 | } | 45 | } |
45 | 46 | ||
46 | - function defaultSize(table, width) { | 47 | + function findCstmWidths(table) { |
47 | - var thead = table.select('.table-header').select('table'), | 48 | + var headers = table.select('.table-header').selectAll('td'); |
48 | - tbody = table.select('.table-body').select('table'), | ||
49 | - wpx = width + 'px'; | ||
50 | - _width(thead, wpx); | ||
51 | - _width(tbody, wpx); | ||
52 | - } | ||
53 | - | ||
54 | - function adjustTable(table, width, height) { | ||
55 | - var thead = table.select('.table-header').select('table'), | ||
56 | - tbodyDiv = table.select('.table-body'), | ||
57 | - tbody = tbodyDiv.select('table'), | ||
58 | - cstmWidths = {}; | ||
59 | - | ||
60 | - function findCstmWidths() { | ||
61 | - var headers = thead.selectAll('td'); | ||
62 | 49 | ||
63 | - headers.each(function (d, i) { | 50 | + headers.each(function (d, i) { |
64 | - var h = d3.select(this), | 51 | + var h = d3.select(this), |
65 | - index = i.toString(); | 52 | + index = i.toString(); |
66 | - if (h.classed(tableIcon)) { | 53 | + if (h.classed(tableIcon)) { |
67 | - cstmWidths[index] = tableIconTdSize + 'px'; | 54 | + cstmWidths[index] = tableIconTdSize + 'px'; |
68 | - } | 55 | + } |
69 | - if (h.attr(colWidth)) { | 56 | + if (h.attr(colWidth)) { |
70 | - cstmWidths[index] = h.attr(colWidth); | 57 | + cstmWidths[index] = h.attr(colWidth); |
71 | - } | ||
72 | - }); | ||
73 | - if (fs.debugOn('widget')) { | ||
74 | - $log.debug('Headers with custom widths: ', cstmWidths); | ||
75 | } | 58 | } |
59 | + }); | ||
60 | + if (fs.debugOn('widget')) { | ||
61 | + $log.debug('Headers with custom widths: ', cstmWidths); | ||
76 | } | 62 | } |
63 | + } | ||
77 | 64 | ||
78 | - function setTdWidths(elem) { | 65 | + function setTdWidths(elem, width) { |
79 | - var tds = elem.selectAll('tr:not(.ignore-width)').selectAll('td'); | 66 | + var tds = elem.select('tr:first-child').selectAll('td'); |
80 | - _width(elem, width + 'px'); | 67 | + _width(elem, width + 'px'); |
81 | 68 | ||
82 | - tds.each(function (d, i) { | 69 | + tds.each(function (d, i) { |
83 | - var td = d3.select(this), | 70 | + var td = d3.select(this), |
84 | - index = i.toString(); | 71 | + index = i.toString(); |
85 | - if (cstmWidths.hasOwnProperty(index)) { | 72 | + if (cstmWidths.hasOwnProperty(index)) { |
86 | - _width(td, cstmWidths[index]); | 73 | + _width(td, cstmWidths[index]); |
87 | - } | 74 | + } |
88 | - }); | 75 | + }); |
89 | - } | 76 | + } |
90 | - | ||
91 | - function setHeight(body) { | ||
92 | - var h = height - (mast.mastHeight() + | ||
93 | - fs.noPxStyle(d3.select('.tabular-header'), 'height') + | ||
94 | - fs.noPxStyle(thead, 'height') + pdg); | ||
95 | - body.style('height', h + 'px'); | ||
96 | - } | ||
97 | 77 | ||
98 | - findCstmWidths(); | 78 | + function setHeight(thead, body, height) { |
99 | - setTdWidths(thead); | 79 | + var h = height - (mast.mastHeight() + |
100 | - setTdWidths(tbody); | 80 | + fs.noPxStyle(d3.select('.tabular-header'), 'height') + |
101 | - setHeight(tbodyDiv); | 81 | + fs.noPxStyle(thead, 'height') + pdg); |
82 | + body.style('height', h + 'px'); | ||
83 | + } | ||
102 | 84 | ||
103 | - cstmWidths = {}; | 85 | + function adjustTable(haveItems, tableElems, width, height) { |
86 | + if (haveItems) { | ||
87 | + setTdWidths(tableElems.thead, width); | ||
88 | + setTdWidths(tableElems.tbody, width); | ||
89 | + setHeight(tableElems.thead, tableElems.table.select('.table-body'), height); | ||
90 | + } else { | ||
91 | + setTdWidths(tableElems.thead, width); | ||
92 | + _width(tableElems.tbody, width + 'px'); | ||
93 | + } | ||
104 | } | 94 | } |
105 | 95 | ||
106 | // Functions for sorting table rows by header | 96 | // Functions for sorting table rows by header |
... | @@ -147,7 +137,7 @@ | ... | @@ -147,7 +137,7 @@ |
147 | } | 137 | } |
148 | 138 | ||
149 | angular.module('onosWidget') | 139 | angular.module('onosWidget') |
150 | - .directive('onosFixedHeader', ['$log','$window', | 140 | + .directive('onosTableResize', ['$log','$window', |
151 | 'FnService', 'MastService', | 141 | 'FnService', 'MastService', |
152 | 142 | ||
153 | function (_$log_, _$window_, _fs_, _mast_) { | 143 | function (_$log_, _$window_, _fs_, _mast_) { |
... | @@ -158,31 +148,41 @@ | ... | @@ -158,31 +148,41 @@ |
158 | mast = _mast_; | 148 | mast = _mast_; |
159 | 149 | ||
160 | var table = d3.select(element[0]), | 150 | var table = d3.select(element[0]), |
161 | - canAdjust = false; | 151 | + tableElems = { |
152 | + table: table, | ||
153 | + thead: table.select('.table-header').select('table'), | ||
154 | + tbody: table.select('.table-body').select('table') | ||
155 | + }, | ||
156 | + wsz; | ||
162 | 157 | ||
158 | + findCstmWidths(table); | ||
159 | + | ||
160 | + // adjust table on window resize | ||
163 | scope.$watchCollection(function () { | 161 | scope.$watchCollection(function () { |
164 | return { | 162 | return { |
165 | h: $window.innerHeight, | 163 | h: $window.innerHeight, |
166 | w: $window.innerWidth | 164 | w: $window.innerWidth |
167 | }; | 165 | }; |
168 | }, function () { | 166 | }, function () { |
169 | - var wsz = fs.windowSize(0, 30), | 167 | + wsz = fs.windowSize(0, 30); |
170 | - wWidth = wsz.width, | 168 | + adjustTable( |
171 | - wHeight = wsz.height; | 169 | + scope.tableData.length, |
172 | - | 170 | + tableElems, |
173 | - if (!scope.tableData.length) { | 171 | + wsz.width, wsz.height |
174 | - defaultSize(table, wWidth); | 172 | + ); |
175 | - } | 173 | + }); |
176 | - | 174 | + |
177 | - scope.$on('LastElement', function () { | 175 | + // adjust table when data changes |
178 | - // only adjust the table once it's completely loaded | 176 | + scope.$watchCollection('tableData', function () { |
179 | - adjustTable(table, wWidth, wHeight); | 177 | + adjustTable( |
180 | - canAdjust = true; | 178 | + scope.tableData.length, |
181 | - }); | 179 | + tableElems, |
180 | + wsz.width, wsz.height | ||
181 | + ); | ||
182 | + }); | ||
182 | 183 | ||
183 | - if (canAdjust) { | 184 | + scope.$on('$destroy', function () { |
184 | - adjustTable(table, wWidth, wHeight); | 185 | + cstmWidths = {}; |
185 | - } | ||
186 | }); | 186 | }); |
187 | }; | 187 | }; |
188 | }]) | 188 | }]) | ... | ... |
... | @@ -31,7 +31,7 @@ | ... | @@ -31,7 +31,7 @@ |
31 | </div> | 31 | </div> |
32 | </div> | 32 | </div> |
33 | 33 | ||
34 | - <div class="summary-list" onos-fixed-header> | 34 | + <div class="summary-list" onos-table-resize> |
35 | 35 | ||
36 | <div class="table-header" | 36 | <div class="table-header" |
37 | onos-sortable-header | 37 | onos-sortable-header |
... | @@ -50,16 +50,15 @@ | ... | @@ -50,16 +50,15 @@ |
50 | 50 | ||
51 | <div class="table-body"> | 51 | <div class="table-body"> |
52 | <table> | 52 | <table> |
53 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 53 | + <tr ng-if="!tableData.length" class="no-data"> |
54 | <td colspan="5"> | 54 | <td colspan="5"> |
55 | No Applications found | 55 | No Applications found |
56 | </td> | 56 | </td> |
57 | </tr> | 57 | </tr> |
58 | 58 | ||
59 | - <tr ng-repeat="app in tableData" | 59 | + <tr ng-repeat="app in tableData track by $index" |
60 | ng-click="selectCallback($event, app)" | 60 | ng-click="selectCallback($event, app)" |
61 | - ng-class="{selected: app.id === selId}" | 61 | + ng-class="{selected: app.id === selId}"> |
62 | - ng-repeat-done> | ||
63 | <td class="table-icon"> | 62 | <td class="table-icon"> |
64 | <div icon icon-id="{{app._iconid_state}}"></div> | 63 | <div icon icon-id="{{app._iconid_state}}"></div> |
65 | </td> | 64 | </td> | ... | ... |
... | @@ -63,7 +63,6 @@ | ... | @@ -63,7 +63,6 @@ |
63 | selCb: selCb, | 63 | selCb: selCb, |
64 | respCb: refreshCtrls | 64 | respCb: refreshCtrls |
65 | }); | 65 | }); |
66 | - $scope.toggleRefresh(); | ||
67 | 66 | ||
68 | $scope.appAction = function (action) { | 67 | $scope.appAction = function (action) { |
69 | if ($scope.ctrlBtnState.selection) { | 68 | if ($scope.ctrlBtnState.selection) { | ... | ... |
... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | - <div class="summary-list" onos-fixed-header> | 28 | + <div class="summary-list" onos-table-resize> |
29 | 29 | ||
30 | <div class="table-header" | 30 | <div class="table-header" |
31 | onos-sortable-header | 31 | onos-sortable-header |
... | @@ -44,14 +44,13 @@ | ... | @@ -44,14 +44,13 @@ |
44 | 44 | ||
45 | <div class="table-body"> | 45 | <div class="table-body"> |
46 | <table> | 46 | <table> |
47 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 47 | + <tr ng-if="!tableData.length" class="no-data"> |
48 | <td colspan="5"> | 48 | <td colspan="5"> |
49 | No Cluster Nodes found | 49 | No Cluster Nodes found |
50 | </td> | 50 | </td> |
51 | </tr> | 51 | </tr> |
52 | 52 | ||
53 | - <tr ng-repeat="node in tableData" | 53 | + <tr ng-repeat="node in tableData track by $index"> |
54 | - ng-repeat-done> | ||
55 | <td class="table-icon"> | 54 | <td class="table-icon"> |
56 | <div icon icon-id="{{node._iconid_state}}"></div> | 55 | <div icon icon-id="{{node._iconid_state}}"></div> |
57 | </td> | 56 | </td> | ... | ... |
... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
9 | </div> | 9 | </div> |
10 | </div> | 10 | </div> |
11 | 11 | ||
12 | - <div class="summary-list" onos-fixed-header> | 12 | + <div class="summary-list" onos-table-resize> |
13 | 13 | ||
14 | <div class="table-header" | 14 | <div class="table-header" |
15 | onos-sortable-header | 15 | onos-sortable-header |
... | @@ -32,16 +32,15 @@ | ... | @@ -32,16 +32,15 @@ |
32 | 32 | ||
33 | <div class="table-body"> | 33 | <div class="table-body"> |
34 | <table> | 34 | <table> |
35 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 35 | + <tr ng-if="!tableData.length" class="no-data"> |
36 | <td colspan="9"> | 36 | <td colspan="9"> |
37 | No Devices found | 37 | No Devices found |
38 | </td> | 38 | </td> |
39 | </tr> | 39 | </tr> |
40 | 40 | ||
41 | - <tr ng-repeat="dev in tableData track by dev.id" | 41 | + <tr ng-repeat="dev in tableData track by $index" |
42 | ng-click="selectCallback($event, dev)" | 42 | ng-click="selectCallback($event, dev)" |
43 | - ng-class="{selected: dev.id === selId}" | 43 | + ng-class="{selected: dev.id === selId}"> |
44 | - ng-repeat-done> | ||
45 | <td class="table-icon"> | 44 | <td class="table-icon"> |
46 | <div icon icon-id="{{dev._iconid_available}}"></div> | 45 | <div icon icon-id="{{dev._iconid_available}}"></div> |
47 | </td> | 46 | </td> | ... | ... |
... | @@ -26,24 +26,24 @@ | ... | @@ -26,24 +26,24 @@ |
26 | width: 45px; | 26 | width: 45px; |
27 | } | 27 | } |
28 | 28 | ||
29 | +.light #ov-flow tr:nth-child(6n + 1), | ||
29 | .light #ov-flow tr:nth-child(6n + 2), | 30 | .light #ov-flow tr:nth-child(6n + 2), |
30 | -.light #ov-flow tr:nth-child(6n + 3), | 31 | +.light #ov-flow tr:nth-child(6n + 3) { |
31 | -.light #ov-flow tr:nth-child(6n + 4) { | ||
32 | background-color: #eee; | 32 | background-color: #eee; |
33 | } | 33 | } |
34 | +.light #ov-flow tr:nth-child(6n + 4), | ||
34 | .light #ov-flow tr:nth-child(6n + 5), | 35 | .light #ov-flow tr:nth-child(6n + 5), |
35 | -.light #ov-flow tr:nth-child(6n + 6), | 36 | +.light #ov-flow tr:nth-child(6n) { |
36 | -.light #ov-flow tr:nth-child(6n + 1) { | ||
37 | background-color: #ddd; | 37 | background-color: #ddd; |
38 | } | 38 | } |
39 | +.dark #ov-flow tr:nth-child(6n + 1), | ||
39 | .dark #ov-flow tr:nth-child(6n + 2), | 40 | .dark #ov-flow tr:nth-child(6n + 2), |
40 | -.dark #ov-flow tr:nth-child(6n + 3), | 41 | +.dark #ov-flow tr:nth-child(6n + 3) { |
41 | -.dark #ov-flow tr:nth-child(6n + 4) { | ||
42 | background-color: #444; | 42 | background-color: #444; |
43 | } | 43 | } |
44 | +.dark #ov-flow tr:nth-child(6n + 4), | ||
44 | .dark #ov-flow tr:nth-child(6n + 5), | 45 | .dark #ov-flow tr:nth-child(6n + 5), |
45 | -.dark #ov-flow tr:nth-child(6n + 6), | 46 | +.dark #ov-flow tr:nth-child(6n) { |
46 | -.dark #ov-flow tr:nth-child(6n + 1) { | ||
47 | background-color: #333; | 47 | background-color: #333; |
48 | } | 48 | } |
49 | 49 | ... | ... |
... | @@ -12,7 +12,7 @@ | ... | @@ -12,7 +12,7 @@ |
12 | </div> | 12 | </div> |
13 | </div> | 13 | </div> |
14 | 14 | ||
15 | - <div class="summary-list" onos-fixed-header> | 15 | + <div class="summary-list" onos-table-resize> |
16 | 16 | ||
17 | <div class="table-header" | 17 | <div class="table-header" |
18 | onos-sortable-header | 18 | onos-sortable-header |
... | @@ -36,13 +36,13 @@ | ... | @@ -36,13 +36,13 @@ |
36 | 36 | ||
37 | <div class="table-body"> | 37 | <div class="table-body"> |
38 | <table> | 38 | <table> |
39 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 39 | + <tr ng-if="!tableData.length" class="no-data"> |
40 | <td colspan="10"> | 40 | <td colspan="10"> |
41 | No Flows found | 41 | No Flows found |
42 | </td> | 42 | </td> |
43 | </tr> | 43 | </tr> |
44 | 44 | ||
45 | - <tr ng-repeat-start="flow in tableData"> | 45 | + <tr ng-repeat-start="flow in tableData track by $index"> |
46 | <td>{{flow.id}}</td> | 46 | <td>{{flow.id}}</td> |
47 | <td>{{flow.appId}}</td> | 47 | <td>{{flow.appId}}</td> |
48 | <td>{{flow.groupId}}</td> | 48 | <td>{{flow.groupId}}</td> |
... | @@ -54,11 +54,10 @@ | ... | @@ -54,11 +54,10 @@ |
54 | <td>{{flow.packets}}</td> | 54 | <td>{{flow.packets}}</td> |
55 | <td>{{flow.bytes}}</td> | 55 | <td>{{flow.bytes}}</td> |
56 | </tr> | 56 | </tr> |
57 | - <tr class="ignore-width"> | 57 | + <tr> |
58 | <td class="selector" colspan="10">{{flow.selector}}</td> | 58 | <td class="selector" colspan="10">{{flow.selector}}</td> |
59 | </tr> | 59 | </tr> |
60 | - <tr class="ignore-width" | 60 | + <tr ng-repeat-end> |
61 | - ng-repeat-end ng-repeat-done> | ||
62 | <td class="treatment" colspan="10">{{flow.treatment}}</td> | 61 | <td class="treatment" colspan="10">{{flow.treatment}}</td> |
63 | </tr> | 62 | </tr> |
64 | </table> | 63 | </table> | ... | ... |
... | @@ -26,20 +26,20 @@ | ... | @@ -26,20 +26,20 @@ |
26 | width: 45px; | 26 | width: 45px; |
27 | } | 27 | } |
28 | 28 | ||
29 | -.light #ov-group tr:nth-child(4n + 2), | 29 | +.light #ov-group tr:nth-child(4n + 1), |
30 | -.light #ov-group tr:nth-child(4n + 3) { | 30 | +.light #ov-group tr:nth-child(4n + 2) { |
31 | background-color: #eee; | 31 | background-color: #eee; |
32 | } | 32 | } |
33 | -.light #ov-group tr:nth-child(4n + 4), | 33 | +.light #ov-group tr:nth-child(4n + 3), |
34 | -.light #ov-group tr:nth-child(4n + 1) { | 34 | +.light #ov-group tr:nth-child(4n) { |
35 | background-color: #ddd; | 35 | background-color: #ddd; |
36 | } | 36 | } |
37 | -.dark #ov-group tr:nth-child(4n + 2), | 37 | +.dark #ov-group tr:nth-child(4n + 1), |
38 | -.dark #ov-group tr:nth-child(4n + 3) { | 38 | +.dark #ov-group tr:nth-child(4n + 2) { |
39 | background-color: #444; | 39 | background-color: #444; |
40 | } | 40 | } |
41 | -.dark #ov-group tr:nth-child(4n + 4), | 41 | +.dark #ov-group tr:nth-child(4n + 3), |
42 | -.dark #ov-group tr:nth-child(4n + 1) { | 42 | +.dark #ov-group tr:nth-child(4n) { |
43 | background-color: #333; | 43 | background-color: #333; |
44 | } | 44 | } |
45 | 45 | ... | ... |
... | @@ -28,7 +28,7 @@ | ... | @@ -28,7 +28,7 @@ |
28 | </div> | 28 | </div> |
29 | </div> | 29 | </div> |
30 | 30 | ||
31 | - <div class="summary-list" onos-fixed-header> | 31 | + <div class="summary-list" onos-table-resize> |
32 | 32 | ||
33 | <div class="table-header" | 33 | <div class="table-header" |
34 | onos-sortable-header | 34 | onos-sortable-header |
... | @@ -48,13 +48,13 @@ | ... | @@ -48,13 +48,13 @@ |
48 | 48 | ||
49 | <div class="table-body"> | 49 | <div class="table-body"> |
50 | <table> | 50 | <table> |
51 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 51 | + <tr ng-if="!tableData.length" class="no-data"> |
52 | <td colspan="6"> | 52 | <td colspan="6"> |
53 | No Groups found | 53 | No Groups found |
54 | </td> | 54 | </td> |
55 | </tr> | 55 | </tr> |
56 | 56 | ||
57 | - <tr ng-repeat-start="group in tableData"> | 57 | + <tr ng-repeat-start="group in tableData track by $index"> |
58 | <td>{{group.id}}</td> | 58 | <td>{{group.id}}</td> |
59 | <td>{{group.app_id}}</td> | 59 | <td>{{group.app_id}}</td> |
60 | <td>{{group.state}}</td> | 60 | <td>{{group.state}}</td> |
... | @@ -62,8 +62,7 @@ | ... | @@ -62,8 +62,7 @@ |
62 | <td>{{group.packets}}</td> | 62 | <td>{{group.packets}}</td> |
63 | <td>{{group.bytes}}</td> | 63 | <td>{{group.bytes}}</td> |
64 | </tr> | 64 | </tr> |
65 | - <tr class="ignore-width" | 65 | + <tr ng-repeat-end> |
66 | - ng-repeat-end ng-repeat-done> | ||
67 | <td class="buckets" colspan="6" | 66 | <td class="buckets" colspan="6" |
68 | ng-bind-html="group.buckets"></td> | 67 | ng-bind-html="group.buckets"></td> |
69 | </tr> | 68 | </tr> | ... | ... |
... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
9 | </div> | 9 | </div> |
10 | </div> | 10 | </div> |
11 | 11 | ||
12 | - <div class="summary-list" onos-fixed-header> | 12 | + <div class="summary-list" onos-table-resize> |
13 | 13 | ||
14 | <div class="table-header" | 14 | <div class="table-header" |
15 | onos-sortable-header | 15 | onos-sortable-header |
... | @@ -29,14 +29,13 @@ | ... | @@ -29,14 +29,13 @@ |
29 | 29 | ||
30 | <div class="table-body"> | 30 | <div class="table-body"> |
31 | <table> | 31 | <table> |
32 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 32 | + <tr ng-if="!tableData.length" class="no-data"> |
33 | <td colspan="6"> | 33 | <td colspan="6"> |
34 | No Hosts found | 34 | No Hosts found |
35 | </td> | 35 | </td> |
36 | </tr> | 36 | </tr> |
37 | 37 | ||
38 | - <tr ng-repeat="host in tableData" | 38 | + <tr ng-repeat="host in tableData track by $index"> |
39 | - ng-repeat-done> | ||
40 | <td class="table-icon"> | 39 | <td class="table-icon"> |
41 | <div icon icon-id="{{host._iconid_type}}"></div> | 40 | <div icon icon-id="{{host._iconid_type}}"></div> |
42 | </td> | 41 | </td> | ... | ... |
... | @@ -26,24 +26,24 @@ | ... | @@ -26,24 +26,24 @@ |
26 | width: 45px; | 26 | width: 45px; |
27 | } | 27 | } |
28 | 28 | ||
29 | +.light #ov-intent tr:nth-child(6n + 1), | ||
29 | .light #ov-intent tr:nth-child(6n + 2), | 30 | .light #ov-intent tr:nth-child(6n + 2), |
30 | -.light #ov-intent tr:nth-child(6n + 3), | 31 | +.light #ov-intent tr:nth-child(6n + 3) { |
31 | -.light #ov-intent tr:nth-child(6n + 4) { | ||
32 | background-color: #eee; | 32 | background-color: #eee; |
33 | } | 33 | } |
34 | +.light #ov-intent tr:nth-child(6n + 4), | ||
34 | .light #ov-intent tr:nth-child(6n + 5), | 35 | .light #ov-intent tr:nth-child(6n + 5), |
35 | -.light #ov-intent tr:nth-child(6n + 6), | 36 | +.light #ov-intent tr:nth-child(6n) { |
36 | -.light #ov-intent tr:nth-child(6n + 1) { | ||
37 | background-color: #ddd; | 37 | background-color: #ddd; |
38 | } | 38 | } |
39 | +.dark #ov-intent tr:nth-child(6n + 1), | ||
39 | .dark #ov-intent tr:nth-child(6n + 2), | 40 | .dark #ov-intent tr:nth-child(6n + 2), |
40 | -.dark #ov-intent tr:nth-child(6n + 3), | 41 | +.dark #ov-intent tr:nth-child(6n + 3) { |
41 | -.dark #ov-intent tr:nth-child(6n + 4) { | ||
42 | background-color: #444; | 42 | background-color: #444; |
43 | } | 43 | } |
44 | +.dark #ov-intent tr:nth-child(6n + 4), | ||
44 | .dark #ov-intent tr:nth-child(6n + 5), | 45 | .dark #ov-intent tr:nth-child(6n + 5), |
45 | -.dark #ov-intent tr:nth-child(6n + 6), | 46 | +.dark #ov-intent tr:nth-child(6n) { |
46 | -.dark #ov-intent tr:nth-child(6n + 1) { | ||
47 | background-color: #333; | 47 | background-color: #333; |
48 | } | 48 | } |
49 | 49 | ... | ... |
... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | - <div class="summary-list" onos-fixed-header> | 28 | + <div class="summary-list" onos-table-resize> |
29 | 29 | ||
30 | <div class="table-header" | 30 | <div class="table-header" |
31 | onos-sortable-header | 31 | onos-sortable-header |
... | @@ -44,13 +44,13 @@ | ... | @@ -44,13 +44,13 @@ |
44 | 44 | ||
45 | <div class="table-body"> | 45 | <div class="table-body"> |
46 | <table> | 46 | <table> |
47 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 47 | + <tr ng-if="!tableData.length" class="no-data"> |
48 | <td colspan="5"> | 48 | <td colspan="5"> |
49 | No Intents found | 49 | No Intents found |
50 | </td> | 50 | </td> |
51 | </tr> | 51 | </tr> |
52 | 52 | ||
53 | - <tr ng-repeat-start="intent in tableData"> | 53 | + <tr ng-repeat-start="intent in tableData track by $index"> |
54 | <td>{{intent.appId}}</td> | 54 | <td>{{intent.appId}}</td> |
55 | <td>{{intent.key}}</td> | 55 | <td>{{intent.key}}</td> |
56 | <td>{{intent.type}}</td> | 56 | <td>{{intent.type}}</td> |
... | @@ -60,7 +60,7 @@ | ... | @@ -60,7 +60,7 @@ |
60 | <tr> | 60 | <tr> |
61 | <td class="resources" colspan="5">{{intent.resources}}</td> | 61 | <td class="resources" colspan="5">{{intent.resources}}</td> |
62 | </tr> | 62 | </tr> |
63 | - <tr ng-repeat-end ng-repeat-done> | 63 | + <tr ng-repeat-end> |
64 | <td class="details" colspan="5">{{intent.details}}</td> | 64 | <td class="details" colspan="5">{{intent.details}}</td> |
65 | </tr> | 65 | </tr> |
66 | </table> | 66 | </table> | ... | ... |
... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | - <div class="summary-list" onos-fixed-header> | 28 | + <div class="summary-list" onos-table-resize> |
29 | 29 | ||
30 | <div class="table-header" | 30 | <div class="table-header" |
31 | onos-sortable-header | 31 | onos-sortable-header |
... | @@ -45,14 +45,13 @@ | ... | @@ -45,14 +45,13 @@ |
45 | 45 | ||
46 | <div class="table-body"> | 46 | <div class="table-body"> |
47 | <table> | 47 | <table> |
48 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 48 | + <tr ng-if="!tableData.length" class="no-data"> |
49 | <td colspan="6"> | 49 | <td colspan="6"> |
50 | No Links found | 50 | No Links found |
51 | </td> | 51 | </td> |
52 | </tr> | 52 | </tr> |
53 | 53 | ||
54 | - <tr ng-repeat="link in tableData" | 54 | + <tr ng-repeat="link in tableData track by $index"> |
55 | - ng-repeat-done> | ||
56 | <td class="table-icon"> | 55 | <td class="table-icon"> |
57 | <div icon icon-id="{{link._iconid_state}}"></div> | 56 | <div icon icon-id="{{link._iconid_state}}"></div> |
58 | </td> | 57 | </td> | ... | ... |
... | @@ -28,7 +28,7 @@ | ... | @@ -28,7 +28,7 @@ |
28 | </div> | 28 | </div> |
29 | </div> | 29 | </div> |
30 | 30 | ||
31 | - <div class="summary-list" onos-fixed-header> | 31 | + <div class="summary-list" onos-table-resize> |
32 | 32 | ||
33 | <div class="table-header" | 33 | <div class="table-header" |
34 | onos-sortable-header | 34 | onos-sortable-header |
... | @@ -50,14 +50,13 @@ | ... | @@ -50,14 +50,13 @@ |
50 | 50 | ||
51 | <div class="table-body"> | 51 | <div class="table-body"> |
52 | <table> | 52 | <table> |
53 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 53 | + <tr ng-if="!tableData.length" class="no-data"> |
54 | <td colspan="8"> | 54 | <td colspan="8"> |
55 | No Ports found | 55 | No Ports found |
56 | </td> | 56 | </td> |
57 | </tr> | 57 | </tr> |
58 | 58 | ||
59 | - <tr ng-repeat="port in tableData" | 59 | + <tr ng-repeat="port in tableData track by $index"> |
60 | - ng-repeat-done> | ||
61 | <td>{{port.id}}</td> | 60 | <td>{{port.id}}</td> |
62 | <td>{{port.pkt_rx}}</td> | 61 | <td>{{port.pkt_rx}}</td> |
63 | <td>{{port.pkt_tx}}</td> | 62 | <td>{{port.pkt_tx}}</td> | ... | ... |
... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
9 | </div> | 9 | </div> |
10 | </div> | 10 | </div> |
11 | 11 | ||
12 | - <div class="summary-list" onos-fixed-header> | 12 | + <div class="summary-list" onos-table-resize> |
13 | 13 | ||
14 | <div class="table-header" | 14 | <div class="table-header" |
15 | onos-sortable-header | 15 | onos-sortable-header |
... | @@ -17,26 +17,25 @@ | ... | @@ -17,26 +17,25 @@ |
17 | sort-callback="sortCallback(sortParams)"> | 17 | sort-callback="sortCallback(sortParams)"> |
18 | <table> | 18 | <table> |
19 | <tr> | 19 | <tr> |
20 | - <td colId="component" sortable col-width="350px">Component </td> | 20 | + <td colId="component" sortable col-width="200px">Component </td> |
21 | <td colId="id" sortable>Property </td> | 21 | <td colId="id" sortable>Property </td> |
22 | <td colId="type" sortable col-width="70px">Type </td> | 22 | <td colId="type" sortable col-width="70px">Type </td> |
23 | <td colId="value" sortable>Value </td> | 23 | <td colId="value" sortable>Value </td> |
24 | <td colId="defValue" sortable>Default </td> | 24 | <td colId="defValue" sortable>Default </td> |
25 | - <td colId="desc" col-width="520px">Description </td> | 25 | + <td colId="desc" col-width="400px">Description </td> |
26 | </tr> | 26 | </tr> |
27 | </table> | 27 | </table> |
28 | </div> | 28 | </div> |
29 | 29 | ||
30 | <div class="table-body"> | 30 | <div class="table-body"> |
31 | <table> | 31 | <table> |
32 | - <tr ng-hide="tableData.length" class="no-data ignore-width"> | 32 | + <tr ng-if="!tableData.length" class="no-data"> |
33 | <td colspan="6"> | 33 | <td colspan="6"> |
34 | No Settings found | 34 | No Settings found |
35 | </td> | 35 | </td> |
36 | </tr> | 36 | </tr> |
37 | 37 | ||
38 | - <tr ng-repeat="prop in tableData" | 38 | + <tr ng-repeat="prop in tableData track by $index"> |
39 | - ng-repeat-done> | ||
40 | <td>{{prop.component}}</td> | 39 | <td>{{prop.component}}</td> |
41 | <td>{{prop.id}}</td> | 40 | <td>{{prop.id}}</td> |
42 | <td>{{prop.type}}</td> | 41 | <td>{{prop.type}}</td> | ... | ... |
... | @@ -135,7 +135,7 @@ html[data-platform='iPad'] #topo-p-detail { | ... | @@ -135,7 +135,7 @@ html[data-platform='iPad'] #topo-p-detail { |
135 | .topo-p h2 { | 135 | .topo-p h2 { |
136 | padding: 0 4px; | 136 | padding: 0 4px; |
137 | margin: 0; | 137 | margin: 0; |
138 | - word-break: break-all; | 138 | + word-wrap: break-word; |
139 | display: inline-block; | 139 | display: inline-block; |
140 | width: 210px; | 140 | width: 210px; |
141 | vertical-align: middle; | 141 | vertical-align: middle; |
... | @@ -150,7 +150,7 @@ html[data-platform='iPad'] #topo-p-detail { | ... | @@ -150,7 +150,7 @@ html[data-platform='iPad'] #topo-p-detail { |
150 | .topo-p h3 { | 150 | .topo-p h3 { |
151 | padding: 0 4px; | 151 | padding: 0 4px; |
152 | margin: 0; | 152 | margin: 0; |
153 | - word-break: break-all; | 153 | + word-wrap: break-word; |
154 | top: 20px; | 154 | top: 20px; |
155 | left: 50px; | 155 | left: 50px; |
156 | } | 156 | } |
... | @@ -167,7 +167,7 @@ html[data-platform='iPad'] #topo-p-detail { | ... | @@ -167,7 +167,7 @@ html[data-platform='iPad'] #topo-p-detail { |
167 | } | 167 | } |
168 | 168 | ||
169 | .topo-p td { | 169 | .topo-p td { |
170 | - word-break: break-all; | 170 | + word-wrap: break-word; |
171 | } | 171 | } |
172 | .topo-p td.label { | 172 | .topo-p td.label { |
173 | font-style: italic; | 173 | font-style: italic; | ... | ... |
-
Please register or login to post a comment