getrebuild/rebuild
1
1
Fork 0
mirror of https://github.com/getrebuild/rebuild.git synced 2024-09-20 23:45:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: fixed headers and first-cell of datalist

Browse source
This commit is contained in:
devezhao 2020-03-19 14:05:44 +08:00
parent c55d4c52f8
commit 618900c009
2 changed files with 37 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/main/webapp/assets/css/rb-page.css
View file

@ -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 {

21
src/main/webapp/assets/js/rb-datalist.jsx
View file

@ -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({