[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;

platform/commonUI/general/res/sass/_constants.scss

@@ -111,7 +111,7 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 3px;
+$inputTextPTopBtm: 2px;
 $inputTextPLeftRight: 5px;
 $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 /*************** Wait Spinner Defaults */

platform/commonUI/general/res/sass/_global.scss

@@ -199,12 +199,18 @@ a.disabled {
 }
 
 .vscroll {
+    overflow-x: hidden;
     overflow-y: auto;
     &.scroll-pad {
         padding-right: $interiorMargin;
     }
 }
 
+.vscroll--persist {
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
 .slidable {
     cursor: move; // Fallback
     cursor: grab;

platform/commonUI/general/res/sass/_mixins.scss

@@ -334,7 +334,7 @@
     color: $fg;
 }
 
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
     @include s-input($bg, $fg, $shdw);
     border: none;
     outline: none;

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -26,6 +26,20 @@
 
 .tabular-holder {
     @include absPosDefault();
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    > * {
+        position: relative;
+        flex: 0 0 auto;
+    }
+
+    &.l-sticky-headers {
+        .l-tabular-body {
+            flex: 1 1 99%;
+			overflow-x: auto;
+        }
+    }
 }
 
 .tabular,
@@ -41,19 +55,20 @@ table {
 	tbody tr, .tbody .tr {
 		width: 100%;
 	}
-	thead, .thead {
-		border-bottom: 1px solid $colorTabHeaderBorder;
-	}
 
-	&:not(.fixed-header) tr th {
-		background-color: $colorTabHeaderBg;
-	}
+    thead tr th {
+        // Add some bg to the headers. Note that this is overwritten below
+        // by .mct-table-headers-w when headers are wrapped by that container.
+        background-color: $colorTabHeaderBg;
+    }
 
 	tbody, .tbody {
 		display: table-row-group;
+        tr, .tr {
+            border-top: 1px solid $colorTabBorder;
+        }
 	}
 	tr, .tr {
-        border-top: 1px solid $colorTabBorder;
 		display: table-row;
 		&:first-child .td {
 			border-top: none;
@@ -118,42 +133,40 @@ table {
 		tbody, .tbody {
 			top: $tabularHeaderH * 2;
 		}
-		input[type="text"],
-		input[type="search"] {
-			box-sizing: border-box;
-			width: 100%;
-		}
+        .l-filter {
+            input[type="text"],
+            input[type="search"] {
+                $p: 20px;
+                transition: padding 200ms ease-in-out;
+                box-sizing: border-box;
+                padding-right: $p; // Fend off from icon
+                padding-left: $p; // Fend off from icon
+                width: 100%;
+            }
+            &.active {
+                // When user has typed something, hide the icon and collapse left padding
+                &:before {
+                    opacity: 0;
+                }
+                input[type="text"],
+                input[type="search"] {
+                    padding-left: $interiorMargin;
+                }
+            }
+        }
 	}
 
-	&.fixed-header {
-		height: 100%;
-		thead, .thead,
-		tbody tr, .tbody .tr {
-			display: table;
-			table-layout: fixed;
-		}
-		thead, .thead {
-			width: calc(100% - 10px);
-			&:before {
-				content: "";
-				display: block;
-				z-index: 0;
-				position: absolute;
-				width: 100%;
-				height: $tabularHeaderH;
-				background-color: $colorTabHeaderBg;
-			}
-		}
-		tbody, .tbody {
-			@include absPosDefault(0);
-			top: $tabularHeaderH;
-			display: block;
-			overflow-y: scroll;
-		}
-	}
 	&.t-event-messages {
 		td, .td {
 			min-width: 150px;
 		}
 	}
 }
+
+.mct-table-headers-w {
+    background: $colorTabHeaderBg;
+    overflow: hidden;
+    thead tr th {
+        background: none;
+    }
+}