From 618900c0094df82d4e43abb7eee5dc7d0fe98045 Mon Sep 17 00:00:00 2001
From: devezhao <zhaofang123@gmail.com>
Date: Thu, 19 Mar 2020 14:05:44 +0800
Subject: [PATCH] feat: fixed headers and first-cell of datalist

---
 src/main/webapp/assets/css/rb-page.css    | 34 +++++++++++++++++------
 src/main/webapp/assets/js/rb-datalist.jsx | 21 ++++++++------
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/main/webapp/assets/css/rb-page.css b/src/main/webapp/assets/css/rb-page.css
index b650781e3..16cbe75a5 100644
--- a/src/main/webapp/assets/css/rb-page.css
+++ b/src/main/webapp/assets/css/rb-page.css
@@ -1068,7 +1068,7 @@ a {
     background-color: #fff;
 }
 
-.dataTables_wrapper .rb-datatable-header.pin {
+.dataTables_wrapper .rb-datatable-header.header-fixed {
     position: sticky;
     top: 60px;
     background-color: #fff;
@@ -1094,15 +1094,10 @@ a {
     padding: 9px 10px;
 }
 
-.data-list .table thead.pin tr>th {
-    position: sticky;
-    top: 0;
-    background-color: #fff;
-}
-
 .data-list .table thead th {
     padding-top: 10px;
     padding-bottom: 8px;
+    background-color: #fff;
 }
 
 .data-list .table thead th.column-checkbox>div>.custom-control.custom-control-sm {
@@ -1319,6 +1314,22 @@ i.split.ui-draggable-dragging {
     overflow: unset !important;
 }
 
+.column-fixed::before,
+.table.table-header-fixed thead>tr>th::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    bottom: -1px;
+    border-bottom: 1px solid #dee2e6;
+}
+
+th.column-fixed::before,
+.table.table-header-fixed thead>tr>th::before {
+    bottom: -2px;
+    border-bottom: 2px solid #dee2e6;
+}
+
 th.column-fixed {
     z-index: 1;
 }
@@ -1332,7 +1343,7 @@ th.column-fixed {
     content: '';
     pointer-events: none;
     transform: translateX(100%);
-    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
     transition: box-shadow 0.3s;
 }
 
@@ -1345,7 +1356,12 @@ th.column-fixed {
 }
 
 .data-list .table tbody tr.active td.column-fixed {
-    background-color: #dee2e6;
+    background-color: #dee2e6
+}
+
+.table.table-header-fixed thead>tr>th {
+    position: sticky;
+    top: 0;
 }
 
 .form.batch-form {
diff --git a/src/main/webapp/assets/js/rb-datalist.jsx b/src/main/webapp/assets/js/rb-datalist.jsx
index f46c95923..c9f500ef5 100644
--- a/src/main/webapp/assets/js/rb-datalist.jsx
+++ b/src/main/webapp/assets/js/rb-datalist.jsx
@@ -114,7 +114,8 @@ class RbList extends React.Component {
     // enable pins
     if ($(window).height() > 666 && $(window).width() >= 1280) {
       $('.main-content').addClass('pb-0')
-      $('.main-content .rb-datatable-header').addClass('pin')
+      $('.main-content .rb-datatable-header').addClass('header-fixed')
+      if (!rb.ie) $scroller.find('.table').addClass('table-header-fixed')
 
       $addResizeHandler(() => {
         let mh = $(window).height() - 215
@@ -124,14 +125,16 @@ class RbList extends React.Component {
       })()
     }
 
-    let slLast = 0
-    $scroller.on('ps-scroll-x', () => {
-      const sl = $scroller[0].scrollLeft
-      if (sl === slLast) return
-      slLast = sl
-      if (sl > 0) $scroller.addClass('column-fixed-pin')
-      else $scroller.removeClass('column-fixed-pin')
-    })
+    if (!rb.ie) {
+      let slLast = 0
+      $scroller.on('ps-scroll-x', () => {
+        const sl = $scroller[0].scrollLeft
+        if (sl === slLast) return
+        slLast = sl
+        if (sl > 0) $scroller.addClass('column-fixed-pin')
+        else $scroller.removeClass('column-fixed-pin')
+      })
+    }
 
     const that = this
     $scroller.find('th .split').draggable({