[Tables] - Sticky headers (#2071)

* 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;
2018-06-29 11:38:18 -07:00
parent 9d2c7a6de5
commit b8f278cabf
9 changed files with 146 additions and 113 deletions
--- a/platform/features/table/res/sass/table.scss
+++ b/platform/features/table/res/sass/table.scss
@@ -20,43 +20,48 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-.sizing-table {
-    min-width: 100%;
-    z-index: -1;
-    visibility: hidden;
-    position: absolute;
+mct-table {
+    .mct-sizing-table {
+        z-index: -1;
+        visibility: hidden;
+        position: absolute !important;

-    //Add some padding to allow for decorations such as limits indicator
-    td {
-        padding-right: 15px;
-        padding-left: 10px;
-        white-space: nowrap;
-    }
-}
-.mct-table {
-    table-layout: fixed;
-    thead {
-        display: block;
-        tr {
-            display: block;
+        //Add some padding to allow for decorations such as limits indicator
+        td {
+            padding-right: 15px;
+            padding-left: 10px;
            white-space: nowrap;
-            th {
-                display: inline-block;
+        }
+    }
+
+    .mct-table {
+        thead {
+            display: block;
+            tr {
+                display: block;
+                white-space: nowrap;
+                th {
+                    display: inline-block;
+                    box-sizing: border-box;
+                }
+            }
+        }
+        tbody {
+            tr {
+                position: absolute;
+                white-space: nowrap;
+                display: block;
+            }
+            td {
+                white-space: nowrap;
+                overflow: hidden;
                box-sizing: border-box;
+                display: inline-block;
            }
        }
    }
-    tbody {
-        tr {
-            position: absolute;
-            white-space: nowrap;
-            display: block;
-        }
-        td {
-            white-space: nowrap;
-            overflow: hidden;
-            box-sizing: border-box;
-            display: inline-block;
-        }
+
+    .l-control-bar {
+        margin-bottom: 3px;
    }
 }
--- a/platform/features/table/res/templates/mct-table.html
+++ b/platform/features/table/res/templates/mct-table.html
@@ -5,22 +5,11 @@
        Export
    </a>
 </div>
-<div class="l-view-section scrolling" 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
-            }">
+<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"
@@ -43,14 +32,38 @@
                        width: columnWidths[$index] + 'px',
                        'max-width': columnWidths[$index] + 'px',
                    }">
-                    <div class="holder l-filter flex-elem grows">
-                        <input type="search"
-                            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 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"
--- a/platform/features/table/res/templates/telemetry-table.html
+++ b/platform/features/table/res/templates/telemetry-table.html
@@ -10,6 +10,6 @@
        auto-scroll="autoScroll"
        default-sort="defaultSort"
        export-as="{{ exportAs }}"
-        class="tabular-holder has-control-bar">
+        class="tabular-holder l-sticky-headers has-control-bar">
    </mct-table>
 </div>
--- a/platform/features/table/src/controllers/MCTTableController.js
+++ b/platform/features/table/src/controllers/MCTTableController.js
@@ -23,10 +23,11 @@ define(
            this.$window = $window;
            this.maxDisplayRows = 100;

-            this.scrollable = this.element.find('.l-view-section.scrolling').first();
+            this.scrollable = this.element.find('.t-scrolling').first();
            this.resultsHeader = this.element.find('.mct-table>thead').first();
-            this.sizingTableBody = this.element.find('.sizing-table>tbody').first();
+            this.sizingTableBody = this.element.find('.t-sizing-table>tbody').first();
            this.$scope.sizingRow = {};
+            this.$scope.calcTableWidthPx = '100%';
            this.timeApi = openmct.time;
            this.toiFormatter = undefined;
            this.formatService = formatService;
@@ -286,14 +287,9 @@ define(
                topScroll = target.scrollTop,
                firstVisible;

-            if (topScroll < this.$scope.headerHeight) {
-                firstVisible = 0;
-            } else {
-                firstVisible = Math.floor(
-                    (topScroll - this.$scope.headerHeight) /
-                    this.$scope.rowHeight
-                );
-            }
+            firstVisible = Math.floor(
+                (topScroll) / this.$scope.rowHeight
+            );

            return firstVisible;
        };
@@ -309,7 +305,7 @@ define(
                lastVisible;

            lastVisible = Math.ceil(
-                (bottomScroll - this.$scope.headerHeight) /
+                (bottomScroll) /
                this.$scope.rowHeight
            );
            return lastVisible;
@@ -360,8 +356,7 @@ define(
                .map(function (row, i) {
                    return {
                        rowIndex: start + i,
-                        offsetY: ((start + i) * self.$scope.rowHeight) +
-                        self.$scope.headerHeight,
+                        offsetY: ((start + i) * self.$scope.rowHeight),
                        contents: row
                    };
                });
@@ -397,15 +392,13 @@ define(
         * for individual rows.
         */
        MCTTableController.prototype.setElementSizes = function () {
-            var thead = this.resultsHeader,
-                tbody = this.sizingTableBody,
+            var tbody = this.sizingTableBody,
                firstRow = tbody.find('tr'),
                column = firstRow.find('td'),
-                headerHeight = thead.prop('offsetHeight'),
                rowHeight = firstRow.prop('offsetHeight'),
                columnWidth,
                tableWidth = 0,
-                overallHeight = headerHeight + (rowHeight *
+                overallHeight = (rowHeight *
                    (this.$scope.displayRows ? this.$scope.displayRows.length - 1  : 0));

            this.$scope.columnWidths = [];
@@ -416,10 +409,14 @@ define(
                tableWidth += columnWidth;
                column = column.next();
            }
-            this.$scope.headerHeight = headerHeight;
            this.$scope.rowHeight = rowHeight;
            this.$scope.totalHeight = overallHeight;

+            var scrollW = this.scrollable[0].offsetWidth - this.scrollable[0].clientWidth;
+            if (scrollW && scrollW > 0) {
+                this.$scope.calcTableWidthPx = 'calc(100% - ' + scrollW + 'px)';
+            }
+
            if (tableWidth > 0) {
                this.$scope.totalWidth = tableWidth + 'px';
            } else {
@@ -761,7 +758,6 @@ define(

            if (!visible) {
                var scrollTop = displayRowIndex * this.$scope.rowHeight +
-                    this.$scope.headerHeight -
                    (this.scrollable[0].offsetHeight / 2);
                this.scrollable[0].scrollTop = scrollTop;
                this.setVisibleRows();
--- a/platform/features/table/test/controllers/MCTTableControllerSpec.js
+++ b/platform/features/table/test/controllers/MCTTableControllerSpec.js
@@ -29,7 +29,7 @@ define(
    function ($, moment, MCTTableController) {

        var MOCK_ELEMENT_TEMPLATE =
-            '<div><div class="l-view-section scrolling">' +
+            '<div><div class="l-view-section t-scrolling">' +
                '<table class="sizing-table"><tbody></tbody></table>' +
                '<table class="mct-table"><thead></thead></table>' +
            '</div></div>';