fix(grid): unify transpose long-text editor style
This commit is contained in:
1 parent
508369ee39
commit
1302c0a27b
2 files changed
+33
-1
No files matched your search
@@ -8329,6 +8329,15 @@ function transposeCellIsSelected(rowIndex: number, actualColIdx: number) {
|
||||
return visibleColIdx >= 0 && cellIsSelected(rowIndex, visibleColIdx);
|
||||
}
|
||||
|
||||
// Transposed cells render at a compact row height (30px by default), while the
|
||||
// expanded editor (long text) grows well beyond that. Like the normal grid cell,
|
||||
// the transposed cell must stop clipping its content while the editor / readonly
|
||||
// text selection is active, otherwise the editor gets cropped below the row.
|
||||
function transposeCellEditorActive(recordIndex: number, valueIndex: number): boolean {
|
||||
const rowId = displayItems.value[recordIndex]?.id;
|
||||
return (editingCell.value?.rowId === rowId && editingCell.value.col === valueIndex) || readonlyTextCellMatches(rowId, valueIndex);
|
||||
}
|
||||
|
||||
function onTransposeCellMouseenter(rowIndex: number, actualColIdx: number) {
|
||||
quickDownloadMenuCell.value = retainBinaryCellDownloadMenuForHover(quickDownloadMenuCell.value, { rowIndex, col: actualColIdx });
|
||||
if (isScrolling.value) return;
|
||||
@@ -12487,10 +12496,12 @@ function openGridSnapshot() {
|
||||
<div
|
||||
v-for="cell in item.values"
|
||||
:key="`${item.id}:${cell.recordIndex}`"
|
||||
class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 truncate"
|
||||
class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0"
|
||||
:class="[
|
||||
transposeCellTextColorClass(cell.recordIndex, cell.valueIndex),
|
||||
{
|
||||
'overflow-visible z-20 border-r-transparent': transposeCellEditorActive(cell.recordIndex, cell.valueIndex),
|
||||
'overflow-hidden text-ellipsis whitespace-nowrap': !transposeCellEditorActive(cell.recordIndex, cell.valueIndex),
|
||||
'cell-selected': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
'cell-selected-dirty': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
'cell-selected--sparse': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
|
||||
+21
@@ -33,4 +33,25 @@ describe("DataGrid transpose presentation", () => {
|
||||
expect(dataGridSource).toContain("whitespace-pre-wrap break-words select-text");
|
||||
expect(dataGridSource).not.toContain("data-grid-transpose-field-popover");
|
||||
});
|
||||
|
||||
it("stops clipping the cell while the long-text editor or readonly text selection is active", () => {
|
||||
// Transposed rows are compact (30px by default) while the expanded editor
|
||||
// grows well beyond that; the cell must switch to overflow-visible while the
|
||||
// editor / readonly text selection is active, mirroring the normal grid cell.
|
||||
expect(dataGridSource).toContain("'overflow-visible z-20 border-r-transparent': transposeCellEditorActive(cell.recordIndex, cell.valueIndex)");
|
||||
expect(dataGridSource).toContain("'overflow-hidden text-ellipsis whitespace-nowrap': !transposeCellEditorActive(cell.recordIndex, cell.valueIndex)");
|
||||
expect(dataGridSource).toContain("function transposeCellEditorActive");
|
||||
expect(dataGridSource).toContain("readonlyTextCellMatches(rowId, valueIndex)");
|
||||
// The transposed cell no longer unconditionally truncates (overflow: hidden),
|
||||
// which would crop the expanded editor below the compact row bounds.
|
||||
expect(dataGridSource).not.toContain('class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 truncate"');
|
||||
});
|
||||
|
||||
it("shares the normal grid cell's editor overlay contract while editing", () => {
|
||||
// Normal grid cells switch to the same overflow/z/border contract while the
|
||||
// cell editor or readonly text selection is active, so long-text editing
|
||||
// looks identical across both views.
|
||||
expect(dataGridSource).toContain("'overflow-visible z-20 border-r-transparent': (editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx) || readonlyTextCellMatches(item.id, col.actualColIdx),");
|
||||
expect(dataGridSource).toContain("'overflow-hidden': !((editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx) || readonlyTextCellMatches(item.id, col.actualColIdx)),");
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user