Charles Hacskaylo b7e8a1b378 [Frontend] Styling for TOI element
Fixes #933
Fixes #1193
WIP: Table TOI element in progress
2016-10-13 15:55:48 -07:00

77 lines
2.9 KiB
HTML

<div class="l-control-bar">
<a class="s-button t-export icon-download labeled"
ng-click="exportAsCSV()"
title="Export This View's Data">
Export
</a>
</div>
<div class="l-view-section scrolling" style="overflow: auto;" mct-resize="resize()">
<table class="sizing-table">
<tbody>
<tr>
<td ng-repeat="header in displayHeaders">{{header}}</td>
</tr>
<tr><td ng-repeat="header in displayHeaders" >
{{sizingRow[header].text}}
</td></tr>
</tbody>
</table>
<table class="filterable mct-table"
ng-style="{
height: totalHeight + 'px',
'max-width': totalWidth
}">
<thead>
<tr>
<th ng-repeat="header in displayHeaders"
ng-style="{
width: columnWidths[$index] + 'px',
'max-width': columnWidths[$index] + 'px',
}"
ng-class="[
enableSort ? 'sortable' : '',
sortColumn === header ? 'sort' : '',
sortDirection || ''
].join(' ')"
ng-click="toggleSort(header)">
{{ header }}
</th>
</tr>
<tr ng-if="enableFilter" class="s-filters">
<th ng-repeat="header in displayHeaders"
ng-style="{
width: columnWidths[$index] + 'px',
'max-width': columnWidths[$index] + 'px',
}">
<input type="text"
ng-model="filters[header]"/>
</th>
</tr>
</thead>
<tbody>
<!--ng-class="{ 'l-toi pinned': false }"-->
<!--ng-click="dummyUnpin()" -->
<tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
ng-if="visibleRow.rowIndex === 10"
ng-style="{ top: visibleRow.offsetY + 'px' }"
class="l-toi-tablerow pinned">
<td colspan="999">
<mct-include key="'time-of-interest'"></mct-include>
</td>
</tr>
<tr ng-repeat-end
ng-click="table.onRowClick($event, visibleRow.rowIndex)"
ng-style="{ top: visibleRow.offsetY + 'px' }">
<td ng-repeat="header in displayHeaders"
ng-style=" {
width: columnWidths[$index] + 'px',
'max-width': columnWidths[$index] + 'px',
}"
class="{{visibleRow.contents[header].cssClass}}">
{{ visibleRow.contents[header].text }}
</td>
</tr>
</tbody>
</table>
</div>