[FE-17481] Preven table sorting option from being hidden (#669)

* Use flexbox, stop from overflowing, hide align bts when too smol * FIxed icon alignment and border * Remove old positioning props * Update build files --------- Co-authored-by: Chris Matzenbach <[email protected]>
heavyai · Jun 7, 2024 · 5e41a4f · 5e41a4f
1 parent 9876795
commit 5e41a4f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 39 deletions.
diff --git a/dist/charting.css b/dist/charting.css
@@ -784,28 +784,33 @@ body {
     left: 0;
     width: 100%;
     padding: 0 12px;
-    overflow: hidden; }
+    overflow: hidden;
+    border-bottom: 1px solid #e2e2e2; }
   .dc-chart .docked-table-header {
     display: flex;
     position: relative; }
   .dc-chart .table-header-item {
     position: relative;
-    white-space: nowrap; }
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    flex-direction: row; }
+    .dc-chart .table-header-item .align-btn-container {
+      display: flex;
+      align-items: center; }
     .dc-chart .table-header-item .left-align-btn, .dc-chart .table-header-item .center-align-btn, .dc-chart .table-header-item .right-align-btn {
-      width: 18px;
-      height: 24px;
-      position: absolute;
-      right: 0;
-      top: 1px;
+      min-width: 18px;
+      min-height: 24px;
       padding: 4px 0px;
       cursor: pointer;
-      display: none; }
+      visibility: hidden;
+      display: flex; }
       .dc-chart .table-header-item .left-align-btn.active .svg-icon, .dc-chart .table-header-item .center-align-btn.active .svg-icon, .dc-chart .table-header-item .right-align-btn.active .svg-icon {
         fill: #22A7F0; }
       .dc-chart .table-header-item .left-align-btn:hover .svg-icon, .dc-chart .table-header-item .center-align-btn:hover .svg-icon, .dc-chart .table-header-item .right-align-btn:hover .svg-icon {
         fill: #22A7F0; }
     .dc-chart .table-header-item:hover .left-align-btn, .dc-chart .table-header-item:hover .center-align-btn, .dc-chart .table-header-item:hover .right-align-btn {
-      display: block; }
+      visibility: visible; }
     .dc-chart .table-header-item.isFiltered .unfilter-btn {
       display: block; }
     .dc-chart .table-header-item .unfilter-btn {
@@ -824,13 +829,13 @@ body {
   .dc-chart .null-value {
     font-style: italic; }
   .dc-chart .table-sort {
-    border-bottom: 1px solid #e2e2e2;
     color: #868686;
     font-size: 13px;
-    padding: 4px 24px 4px 20px;
+    padding: 4px 4px 4px 20px;
     background: white;
     position: relative;
-    cursor: text; }
+    cursor: text;
+    margin-right: auto; }
     .dc-chart .table-sort.active {
       color: #22A7F0; }
       .dc-chart .table-sort.active:after {

diff --git a/dist/charting.js b/dist/charting.js
@@ -95005,12 +95005,11 @@ function heavyaiTable(parent, chartGroup) {
     table.selectAll("th").each(function (d, i) {
       var headerItem = dockedHeader.append("div").attr("class", "table-header-item").classed("isFiltered", function () {
         return d.expression in _filteredColumns;
-      });
+      }).style("width", __WEBPACK_IMPORTED_MODULE_0_d3___default.a.select(this).node().getBoundingClientRect().width + "px");
       var sortLabel = headerItem.append("div").attr("class", "table-sort").classed("disabled", function () {
         var isString = data[0] ? typeof data[0]["col".concat(i)] === "string" : false;
         return !_isGroupedData && isString;
-      }).classed("active", _sortColumn ? _sortColumn.index === i : false).classed(_sortColumn ? _sortColumn.order : "", true).style("width", __WEBPACK_IMPORTED_MODULE_0_d3___default.a.select(this).node().getBoundingClientRect().width + "px");
-      var textSpan = sortLabel.append("span").text(d.label);
+      }).classed("active", _sortColumn ? _sortColumn.index === i : false).classed(_sortColumn ? _sortColumn.order : "", true);
       var sortButton = sortLabel.append("div").attr("class", "sort-btn").on("click", function () {
         _tableWrapper.selectAll(".table-sort").classed("active asc desc", false);
         if (_sortColumn && _sortColumn.index === i) {
@@ -95029,11 +95028,13 @@ function heavyaiTable(parent, chartGroup) {
         _chart._invokeSortListener(_sortColumn);
         _chart.redrawAsync();
       });
+      var textSpan = sortLabel.append("span").text(d.label);
       sortButton.append("svg").attr("class", "svg-icon").classed("icon-sort", true).attr("viewBox", "0 0 48 48").append("use").attr("xlink:href", "#icon-sort");
       sortButton.append("svg").attr("class", "svg-icon").classed("icon-sort-arrow", true).attr("viewBox", "0 0 48 48").append("use").attr("xlink:href", "#icon-arrow1");
+      var alignBtnContainer = headerItem.append("div").attr("class", "align-btn-container");
 
       // left align button
-      headerItem.append("div").attr("class", "left-align-btn").classed("active", function () {
+      alignBtnContainer.append("div").attr("class", "left-align-btn").classed("active", function () {
         return _chart.isColLeftAligned(i);
       }).on("click", function () {
         if (!_chart.isColLeftAligned(i)) {
@@ -95044,7 +95045,7 @@ function heavyaiTable(parent, chartGroup) {
       }).style("left", headerItem.node().getBoundingClientRect().width - 54 + "px").append("svg").attr("class", "svg-icon").classed("icon-caret-left", true).attr("viewBox", "0 0 16 16").append("use").attr("xlink:href", "#icon-caret-left");
 
       // center align button
-      headerItem.append("div").attr("class", "center-align-btn").classed("active", function () {
+      alignBtnContainer.append("div").attr("class", "center-align-btn").classed("active", function () {
         return _chart.isColCenterAligned(i);
       }).on("click", function () {
         if (!_chart.isColCenterAligned(i)) {
@@ -95055,7 +95056,7 @@ function heavyaiTable(parent, chartGroup) {
       }).style("left", headerItem.node().getBoundingClientRect().width - 36 + "px").append("svg").attr("class", "svg-icon").classed("icon-align-center", true).attr("viewBox", "0 0 16 16").append("use").attr("xlink:href", "#icon-align-center");
 
       // right align button
-      headerItem.append("div").attr("class", "right-align-btn").classed("active", function () {
+      alignBtnContainer.append("div").attr("class", "right-align-btn").classed("active", function () {
         return _chart.isColRightAligned(i);
       }).on("click", function () {
         if (!_chart.isColRightAligned(i)) {

diff --git a/scss/chart.scss b/scss/chart.scss
@@ -666,6 +666,7 @@ body {
         width: 100%;
         padding: 0 12px;
         overflow: hidden;
+        border-bottom: 1px solid $gray2;
     }
 
     .docked-table-header {
@@ -676,16 +677,21 @@ body {
     .table-header-item {
         position: relative;
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
 
+        .align-btn-container {
+          display: flex;
+          align-items: center;
+        }
         .left-align-btn, .center-align-btn, .right-align-btn {
-            width: 18px;
-            height: 24px;
-            position: absolute;
-            right: 0;
-            top: 1px;
+            min-width: 18px;
+            min-height: 24px;
             padding: 4px 0px;
             cursor: pointer;
-            display: none;
+            visibility: hidden;
+            display: flex;
 
             &.active {
                 .svg-icon {
@@ -702,7 +708,7 @@ body {
 
         &:hover {
             .left-align-btn, .center-align-btn, .right-align-btn {
-                display: block;
+                visibility: visible;
             }
         }
 
@@ -741,13 +747,13 @@ body {
     }
 
     .table-sort {
-        border-bottom: 1px solid $gray2;
         color: $gray5;
         font-size: 13px;
-        padding: 4px 24px 4px 20px;
+        padding: 4px 4px 4px 20px;
         background: white;
         position: relative;
         cursor: text;
+        margin-right: auto;
 
         &.active {
             color: $blue-main;

diff --git a/src/charts/heavyai-table.js b/src/charts/heavyai-table.js
@@ -505,6 +505,13 @@ export default function heavyaiTable(parent, chartGroup) {
         .append("div")
         .attr("class", "table-header-item")
         .classed("isFiltered", () => d.expression in _filteredColumns)
+        .style(
+          "width",
+          d3
+            .select(this)
+            .node()
+            .getBoundingClientRect().width + "px"
+        )
 
       const sortLabel = headerItem
         .append("div")
@@ -517,15 +524,6 @@ export default function heavyaiTable(parent, chartGroup) {
         })
         .classed("active", _sortColumn ? _sortColumn.index === i : false)
         .classed(_sortColumn ? _sortColumn.order : "", true)
-        .style(
-          "width",
-          d3
-            .select(this)
-            .node()
-            .getBoundingClientRect().width + "px"
-        )
-
-      const textSpan = sortLabel.append("span").text(d.label)
 
       const sortButton = sortLabel
         .append("div")
@@ -548,6 +546,8 @@ export default function heavyaiTable(parent, chartGroup) {
           _chart.redrawAsync()
         })
 
+      const textSpan = sortLabel.append("span").text(d.label)
+
       sortButton
         .append("svg")
         .attr("class", "svg-icon")
@@ -564,8 +564,12 @@ export default function heavyaiTable(parent, chartGroup) {
         .append("use")
         .attr("xlink:href", "#icon-arrow1")
 
+      const alignBtnContainer = headerItem
+        .append("div")
+        .attr("class", "align-btn-container")
+
       // left align button
-      headerItem
+      alignBtnContainer
         .append("div")
         .attr("class", "left-align-btn")
         .classed("active", () => _chart.isColLeftAligned(i))
@@ -588,7 +592,7 @@ export default function heavyaiTable(parent, chartGroup) {
         .attr("xlink:href", "#icon-caret-left")
 
       // center align button
-      headerItem
+      alignBtnContainer
         .append("div")
         .attr("class", "center-align-btn")
         .classed("active", () => _chart.isColCenterAligned(i))
@@ -611,7 +615,7 @@ export default function heavyaiTable(parent, chartGroup) {
         .attr("xlink:href", "#icon-align-center")
 
       // right align button
-      headerItem
+      alignBtnContainer
         .append("div")
         .attr("class", "right-align-btn")
         .classed("active", () => _chart.isColRightAligned(i))