简柏林 / thingskit · Commits

Commit fef74373e0a5b5ff95308ac21fe52c68f74036a5

Authored by Vladyslav
Committed by GitHub
1 parent f63864f0

Fix timeseries table layout (#2569)

Inline Side-by-side
Showing 2 changed files with 49 additions and 51 deletions
... ... @@ -31,10 +31,6 @@ tb-timeseries-table-widget {
31 31 z-index: 10;
32 32 }
33 33
34   - md-table-container {
35   - overflow-x: visible;
36   - }
37   -
38 34 md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
39 35 min-height: 0;
40 36 }
... ...
... ... @@ -38,56 +38,58 @@
38 38 </div>
39 39 </md-toolbar>
40 40
41   - <md-tabs flex md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
  41 + <md-tabs md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
42 42 id="tabs" md-border-bottom flex>
43 43 <md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}">
44   - <md-table-container class="flex">
45   - <table md-table>
46   - <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
47   - <tr md-row>
48   - <th ng-show="vm.showTimestamp"
49   - md-column md-order-by="0"
50   - >
51   - <span>Timestamp</span>
52   - </th>
53   - <th md-column
54   - md-order-by="{{ h.index }}"
55   - ng-repeat="h in source.ts.header"
56   - >
57   - <span>{{ h.dataKey.label }}</span>
58   - </th>
59   - </tr>
60   - </thead>
  44 + <div class="tb-absolute-fill" layout="column">
  45 + <md-table-container flex>
  46 + <table md-table>
  47 + <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
  48 + <tr md-row>
  49 + <th ng-show="vm.showTimestamp"
  50 + md-column md-order-by="0"
  51 + >
  52 + <span>Timestamp</span>
  53 + </th>
  54 + <th md-column
  55 + md-order-by="{{ h.index }}"
  56 + ng-repeat="h in source.ts.header"
  57 + >
  58 + <span>{{ h.dataKey.label }}</span>
  59 + </th>
  60 + </tr>
  61 + </thead>
61 62
62   - <tbody md-body>
63   - <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
64   - <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
65   - md-cell
66   - ng-repeat="d in row track by $index"
67   - ng-style="vm.cellStyle(source, $index, d)"
68   - ng-bind-html="vm.cellContent(source, $index, row, d)"
69   - ></td>
70   - <td md-cell class="tb-action-cell"
71   - ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
72   - maxWidth: vm.actionCellDescriptors.length*36+'px',
73   - width: vm.actionCellDescriptors.length*36+'px'}">
74   - <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
75   - aria-label="{{ actionDescriptor.displayName }}"
76   - ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
77   - <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
78   - <md-tooltip md-direction="top">
79   - {{ actionDescriptor.displayName }}
80   - </md-tooltip>
81   - </md-button>
82   - </td>
83   - </tr>
84   - </tbody>
85   - </table>
86   - <md-divider></md-divider>
87   - <span ng-show="!vm.sources[vm.sourceIndex].data.length"
88   - layout-align="center center"
89   - class="no-data-found" translate>widget.no-data-found</span>
90   - </md-table-container>
  63 + <tbody md-body>
  64 + <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
  65 + <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
  66 + md-cell
  67 + ng-repeat="d in row track by $index"
  68 + ng-style="vm.cellStyle(source, $index, d)"
  69 + ng-bind-html="vm.cellContent(source, $index, row, d)"
  70 + ></td>
  71 + <td md-cell class="tb-action-cell"
  72 + ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
  73 + maxWidth: vm.actionCellDescriptors.length*36+'px',
  74 + width: vm.actionCellDescriptors.length*36+'px'}">
  75 + <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
  76 + aria-label="{{ actionDescriptor.displayName }}"
  77 + ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
  78 + <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
  79 + <md-tooltip md-direction="top">
  80 + {{ actionDescriptor.displayName }}
  81 + </md-tooltip>
  82 + </md-button>
  83 + </td>
  84 + </tr>
  85 + </tbody>
  86 + </table>
  87 + <md-divider></md-divider>
  88 + <span ng-show="!vm.sources[vm.sourceIndex].data.length"
  89 + layout-align="center center"
  90 + class="no-data-found" translate>widget.no-data-found</span>
  91 + </md-table-container>
  92 + </div>
91 93 </md-tab>
92 94 </md-tabs>
93 95 <md-table-pagination ng-if="vm.displayPagination"
... ...