mirror of
https://github.com/nasa/openmct.git
synced 2025-03-12 23:44:08 +00:00
b8f278cabf
* first revision * [Frontend] Styling for sticky table headers Fixes #1481 - WIP convert mct-table layout to use flex; - TODO: fix flex layout when a small number of rows; - Rename CSS classes used as selectors by JS; * remove header height from calculations since it is outside in its own table now * [Frontend] Styling for sticky table headers Fixes #1481 - Fixed flex layout when a small number of rows; - Refined input padding and dropshadow for more compactness; * fix tests and verify tables works properly in layout and large view * add mct-scroll to header table to allow scrolling in sync with the rest of mct-table * Various fixes and polishing Fixes #2071 - Fix headers height issue; - Move inline styles to classes; - First round fix for horz overflow due to scrollbar problem; * WIP horz overflow Fixes #2071 - Commented out CSS-based scrollbar with approach in anticipation of better JS solution; * Horz overflow/scrollbar problem fixed Fixes #2071 - Added calcTableWidthPx to allow sizing-table to subtract width of scrollbar; * Remove commented code * add clear icon back into filter text boxes * Polishing on sticky table headers filtering Fixes #1481 Fixes #2071 - Now hides the magnify glass in table header filters when typing;
92 lines
3.4 KiB
HTML
92 lines
3.4 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="mct-table-headers-w" mct-scroll-x="scroll.x">
|
|
<table class="mct-table l-tabular-headers filterable"
|
|
ng-style="{
|
|
'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',
|
|
}">
|
|
<div class="holder l-filter flex-elem grows"
|
|
ng-class="{active: filters[header]}">
|
|
<input type="text"
|
|
ng-model="filters[header]"/>
|
|
<a class="clear-icon clear-input icon-x-in-circle"
|
|
ng-class="{show: filters[header]}"
|
|
ng-click="filters[header] = undefined"></a>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<table class="mct-sizing-table t-sizing-table"
|
|
ng-style="{
|
|
width: calcTableWidthPx
|
|
}">
|
|
<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>
|
|
<div class="l-tabular-body t-scrolling vscroll--persist" mct-resize="resize()" mct-scroll-x="scroll.x">
|
|
<table class="mct-table"
|
|
ng-style="{
|
|
height: totalHeight + 'px',
|
|
'max-width': totalWidth
|
|
}">
|
|
<tbody>
|
|
<tr ng-repeat-start="visibleRow in visibleRows track by $index"
|
|
ng-if="visibleRow.rowIndex === toiRowIndex"
|
|
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
|
class="l-toi-tablerow">
|
|
<td colspan="999">
|
|
<mct-include key="'time-of-interest'"
|
|
class="l-toi-holder pinned"></mct-include>
|
|
</td>
|
|
</tr>
|
|
<tr ng-repeat-end
|
|
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
|
ng-click="table.onRowClick($event, visibleRow.rowIndex)">
|
|
<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>
|