mirror of
https://github.com/docmost/docmost.git
synced 2026-07-12 12:54:43 +10:00
Philipinho
cac4774641
Browser overflow-anchor silently bumped scrollTop by one page's worth of pixels every time a new page of rows committed — anchoring on the AddRowButton that sits below paddingBottom. This kept the near-bottom threshold satisfied and re-fired onFetchNextPage indefinitely, even after the user released the scrollbar. Disabling scroll anchoring on the grid scroll container stops the browser from adjusting scrollTop in response to content growth.
467 lines
9.5 KiB
CSS
467 lines
9.5 KiB
CSS
.gridWrapper {
|
|
position: relative;
|
|
overflow: auto;
|
|
overflow-anchor: none;
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
min-width: max-content;
|
|
border: 1px solid
|
|
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
border-radius: var(--mantine-radius-sm);
|
|
}
|
|
|
|
.headerRow {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
}
|
|
|
|
.headerCell {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 34px;
|
|
padding: 0 8px;
|
|
font-size: var(--mantine-font-size-xs);
|
|
font-weight: 600;
|
|
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-0),
|
|
var(--mantine-color-dark-6)
|
|
);
|
|
border-bottom: 1px solid
|
|
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
border-right: 1px solid
|
|
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: default;
|
|
}
|
|
|
|
.headerCell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.headerCellPinned {
|
|
position: sticky;
|
|
z-index: 2;
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-0),
|
|
var(--mantine-color-dark-6)
|
|
);
|
|
}
|
|
|
|
.headerCellContent {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.headerCellName {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.headerTypeIcon {
|
|
flex-shrink: 0;
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
}
|
|
|
|
.headerConvertingSpinner {
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.resizeHandle {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
cursor: col-resize;
|
|
user-select: none;
|
|
touch-action: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.resizeHandle::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 2px;
|
|
border-radius: 1px;
|
|
background-color: transparent;
|
|
transition: background-color 150ms ease;
|
|
}
|
|
|
|
.resizeHandle:hover::after,
|
|
.resizeHandleActive::after {
|
|
background-color: var(--mantine-color-blue-5);
|
|
}
|
|
|
|
.rowContainer {
|
|
display: contents;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
}
|
|
|
|
.row:hover .cell {
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-0),
|
|
var(--mantine-color-dark-7)
|
|
);
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 36px;
|
|
padding: 0 8px;
|
|
font-size: var(--mantine-font-size-sm);
|
|
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
|
background-color: light-dark(
|
|
var(--mantine-color-white),
|
|
var(--mantine-color-dark-7)
|
|
);
|
|
border-bottom: 1px solid
|
|
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
border-right: 1px solid
|
|
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
overflow: hidden;
|
|
cursor: default;
|
|
outline: none;
|
|
}
|
|
|
|
.cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.cellPinned {
|
|
position: sticky;
|
|
z-index: 1;
|
|
background-color: light-dark(
|
|
var(--mantine-color-white),
|
|
var(--mantine-color-dark-7)
|
|
);
|
|
}
|
|
|
|
.row:hover .cellPinned {
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-0),
|
|
var(--mantine-color-dark-7)
|
|
);
|
|
}
|
|
|
|
.cellEditing {
|
|
outline: 2px solid var(--mantine-color-blue-5);
|
|
outline-offset: -2px;
|
|
z-index: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
.cellContent {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rowNumberCell {
|
|
justify-content: center;
|
|
font-size: var(--mantine-font-size-xs);
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
}
|
|
|
|
.rowNumberDraggable {
|
|
cursor: grab;
|
|
}
|
|
|
|
.rowNumberDraggable:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.rowDragging .cell {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.rowDropAbove .cell {
|
|
box-shadow: inset 0 2px 0 0 var(--mantine-color-blue-5);
|
|
}
|
|
|
|
.rowDropBelow .cell {
|
|
box-shadow: inset 0 -2px 0 0 var(--mantine-color-blue-5);
|
|
}
|
|
|
|
.addRowButton {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 34px;
|
|
padding: 0 8px;
|
|
font-size: var(--mantine-font-size-sm);
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
border-top: 1px dashed
|
|
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background-color 150ms ease;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.addRowButton:hover {
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-0),
|
|
var(--mantine-color-dark-6)
|
|
);
|
|
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
|
}
|
|
|
|
.addColumnButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 34px;
|
|
min-width: 40px;
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-0),
|
|
var(--mantine-color-dark-6)
|
|
);
|
|
border-bottom: 1px solid
|
|
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background-color 150ms ease;
|
|
}
|
|
|
|
.addColumnButton:hover {
|
|
background-color: light-dark(
|
|
var(--mantine-color-gray-1),
|
|
var(--mantine-color-dark-5)
|
|
);
|
|
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
|
}
|
|
|
|
.emptyState {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--mantine-spacing-md);
|
|
padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
|
|
grid-column: 1 / -1;
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--mantine-spacing-xs);
|
|
padding: var(--mantine-spacing-xs) 0;
|
|
margin-bottom: var(--mantine-spacing-xs);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.toolbarRight {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--mantine-spacing-xs);
|
|
}
|
|
|
|
.primaryCell {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.rowNumberCellInner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.rowNumberIndex,
|
|
.rowNumberCheckbox {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rowNumberCheckbox {
|
|
display: none;
|
|
}
|
|
|
|
.rowNumberDragHandle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -6px;
|
|
transform: translateY(-50%);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
cursor: grab;
|
|
}
|
|
|
|
.rowNumberDragHandle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* On row hover: swap index for checkbox, reveal drag handle */
|
|
.row:hover .rowNumberIndex {
|
|
display: none;
|
|
}
|
|
.row:hover .rowNumberCheckbox,
|
|
.row:hover .rowNumberDragHandle {
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Selected row: checkbox always visible, drag handle still only on hover */
|
|
.rowSelected .rowNumberIndex {
|
|
display: none;
|
|
}
|
|
.rowSelected .rowNumberCheckbox {
|
|
display: inline-flex;
|
|
}
|
|
.rowSelected .cell {
|
|
background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-6));
|
|
}
|
|
|
|
.row.rowSelected:hover .cell,
|
|
.row.rowSelected:hover .cellPinned {
|
|
background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-5));
|
|
}
|
|
|
|
.rowNumberHeaderInner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.rowNumberHeaderHash {
|
|
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
|
font-size: var(--mantine-font-size-xs);
|
|
}
|
|
|
|
.rowNumberHeaderCheckbox {
|
|
display: none;
|
|
}
|
|
|
|
.headerCell:hover .rowNumberHeaderHash,
|
|
.hasSelection .rowNumberHeaderHash {
|
|
display: none;
|
|
}
|
|
|
|
.headerCell:hover .rowNumberHeaderCheckbox,
|
|
.hasSelection .rowNumberHeaderCheckbox {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.selectionActionBarWrapper {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 24px;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
z-index: 200;
|
|
}
|
|
|
|
.selectionActionBar {
|
|
pointer-events: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 6px 6px 14px;
|
|
border-radius: 999px;
|
|
box-shadow:
|
|
0 10px 30px rgba(0, 0, 0, 0.25),
|
|
0 2px 8px rgba(0, 0, 0, 0.18);
|
|
background: light-dark(
|
|
var(--mantine-color-dark-8),
|
|
var(--mantine-color-dark-5)
|
|
);
|
|
color: var(--mantine-color-white);
|
|
border: 1px solid light-dark(
|
|
var(--mantine-color-dark-9),
|
|
var(--mantine-color-dark-4)
|
|
);
|
|
}
|
|
|
|
.selectionActionBarCount {
|
|
font-size: var(--mantine-font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--mantine-color-white);
|
|
padding-right: 10px;
|
|
margin-right: 2px;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.selectionActionBarDelete {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--mantine-color-red-4);
|
|
font-size: var(--mantine-font-size-sm);
|
|
font-weight: 500;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: background 120ms ease;
|
|
}
|
|
|
|
.selectionActionBarDelete:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.selectionActionBarDelete:disabled {
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
|
|
.selectionActionBarClose {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--mantine-color-gray-3);
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: background 120ms ease, color 120ms ease;
|
|
}
|
|
|
|
.selectionActionBarClose:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--mantine-color-white);
|
|
}
|