GUI -- Empty table now has a "no items found" row, and table width set to track window width.
Change-Id: I32d3403926fe3c3686fc0219b4880dcb15888e61
Showing
5 changed files
with
50 additions
and
23 deletions
| ... | @@ -30,6 +30,11 @@ table.summary-list tbody { | ... | @@ -30,6 +30,11 @@ table.summary-list tbody { |
| 30 | border-radius: 0 0 8px 8px; | 30 | border-radius: 0 0 8px 8px; |
| 31 | } | 31 | } |
| 32 | 32 | ||
| 33 | +table.summary-list td.nodata { | ||
| 34 | + text-align: center; | ||
| 35 | + font-style: italic; | ||
| 36 | +} | ||
| 37 | + | ||
| 33 | .light table.summary-list tr:nth-child(even) { | 38 | .light table.summary-list tr:nth-child(even) { |
| 34 | background-color: #ddd; | 39 | background-color: #ddd; |
| 35 | } | 40 | } | ... | ... |
| ... | @@ -167,9 +167,13 @@ | ... | @@ -167,9 +167,13 @@ |
| 167 | w: window.innerWidth | 167 | w: window.innerWidth |
| 168 | }; | 168 | }; |
| 169 | }, function (newVal) { | 169 | }, function (newVal) { |
| 170 | + var wsz = fs.windowSize(0, 30); | ||
| 170 | scope.windowHeight = newVal.h; | 171 | scope.windowHeight = newVal.h; |
| 171 | scope.windowWidth = newVal.w; | 172 | scope.windowWidth = newVal.w; |
| 172 | 173 | ||
| 174 | + // default table size in case no data elements | ||
| 175 | + table.style('width', wsz.width + 'px'); | ||
| 176 | + | ||
| 173 | scope.$on('LastElement', function () { | 177 | scope.$on('LastElement', function () { |
| 174 | // only adjust the table once it's completely loaded | 178 | // only adjust the table once it's completely loaded |
| 175 | fixTable(table, thead, tbody); | 179 | fixTable(table, thead, tbody); | ... | ... |
| ... | @@ -21,6 +21,12 @@ | ... | @@ -21,6 +21,12 @@ |
| 21 | </thead> | 21 | </thead> |
| 22 | 22 | ||
| 23 | <tbody> | 23 | <tbody> |
| 24 | + <tr ng-hide="ctrl.tableData.length"> | ||
| 25 | + <td class="nodata" colspan="10"> | ||
| 26 | + No Devices found | ||
| 27 | + </td> | ||
| 28 | + </tr> | ||
| 29 | + | ||
| 24 | <tr ng-repeat="dev in ctrl.tableData" | 30 | <tr ng-repeat="dev in ctrl.tableData" |
| 25 | ng-repeat-done> | 31 | ng-repeat-done> |
| 26 | <td class="table-icon"> | 32 | <td class="table-icon"> | ... | ... |
| ... | @@ -17,17 +17,23 @@ | ... | @@ -17,17 +17,23 @@ |
| 17 | </thead> | 17 | </thead> |
| 18 | 18 | ||
| 19 | <tbody> | 19 | <tbody> |
| 20 | - <tr ng-repeat="host in ctrl.tableData" | 20 | + <tr ng-hide="ctrl.tableData.length"> |
| 21 | - ng-repeat-done> | 21 | + <td class="nodata" colspan="6"> |
| 22 | - <td class="table-icon"> | 22 | + No Hosts found |
| 23 | - <div icon icon-id="{{host._iconid_type}}"></div> | 23 | + </td> |
| 24 | - </td> | 24 | + </tr> |
| 25 | - <td>{{host.id}}</td> | 25 | + |
| 26 | - <td>{{host.mac}}</td> | 26 | + <tr ng-repeat="host in ctrl.tableData" |
| 27 | - <td>{{host.vlan}}</td> | 27 | + ng-repeat-done> |
| 28 | - <td>{{host.ips}}</td> | 28 | + <td class="table-icon"> |
| 29 | - <td>{{host.location}}</td> | 29 | + <div icon icon-id="{{host._iconid_type}}"></div> |
| 30 | - </tr> | 30 | + </td> |
| 31 | + <td>{{host.id}}</td> | ||
| 32 | + <td>{{host.mac}}</td> | ||
| 33 | + <td>{{host.vlan}}</td> | ||
| 34 | + <td>{{host.ips}}</td> | ||
| 35 | + <td>{{host.location}}</td> | ||
| 36 | + </tr> | ||
| 31 | </tbody> | 37 | </tbody> |
| 32 | </table> | 38 | </table> |
| 33 | 39 | ... | ... |
| ... | @@ -31,18 +31,24 @@ | ... | @@ -31,18 +31,24 @@ |
| 31 | </thead> | 31 | </thead> |
| 32 | 32 | ||
| 33 | <tbody> | 33 | <tbody> |
| 34 | - <tr ng-repeat-start="intent in ctrl.tableData"> | 34 | + <tr ng-hide="ctrl.tableData.length"> |
| 35 | - <td>{{intent.appId}}</td> | 35 | + <td class="nodata" colspan="4"> |
| 36 | - <td>{{intent.key}}</td> | 36 | + No Intents found |
| 37 | - <td>{{intent.type}}</td> | 37 | + </td> |
| 38 | - <td>{{intent.priority}}</td> | 38 | + </tr> |
| 39 | - </tr> | 39 | + |
| 40 | - <tr> | 40 | + <tr ng-repeat-start="intent in ctrl.tableData"> |
| 41 | - <td class="resources" colspan="4">{{intent.resources}}</td> | 41 | + <td>{{intent.appId}}</td> |
| 42 | - </tr> | 42 | + <td>{{intent.key}}</td> |
| 43 | - <tr ng-repeat-end ng-repeat-done> | 43 | + <td>{{intent.type}}</td> |
| 44 | - <td class="details" colspan="4">{{intent.details}}</td> | 44 | + <td>{{intent.priority}}</td> |
| 45 | - </tr> | 45 | + </tr> |
| 46 | + <tr> | ||
| 47 | + <td class="resources" colspan="4">{{intent.resources}}</td> | ||
| 48 | + </tr> | ||
| 49 | + <tr ng-repeat-end ng-repeat-done> | ||
| 50 | + <td class="details" colspan="4">{{intent.details}}</td> | ||
| 51 | + </tr> | ||
| 46 | </tbody> | 52 | </tbody> |
| 47 | </table> | 53 | </table> |
| 48 | 54 | ... | ... |
-
Please register or login to post a comment