MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix position and styles of button column

This commit is contained in:
Andrew Kingston 2024-06-27 14:37:33 +01:00
parent 38a12ca8fa
commit 97a4c199f0
No known key found for this signature in database
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
View File

@ -12,7 +12,7 @@
rows, rows,
focusedRow, focusedRow,
selectedRows, selectedRows,
visibleColumns, scrollableColumns,
scroll, scroll,
isDragging, isDragging,
buttonColumnWidth, buttonColumnWidth,
@ -22,12 +22,13 @@
let container let container
$: buttons = $props.buttons?.slice(0, 3) || [] $: buttons = $props.buttons?.slice(0, 3) || []
$: columnsWidth = $visibleColumns.reduce( $: columnsWidth = $scrollableColumns.reduce(
(total, col) => (total += col.width), (total, col) => (total += col.width),
0 0
) )
$: end = columnsWidth - 1 - $scroll.left $: columnEnd = columnsWidth - $scroll.left - 1
$: left = Math.min($width - $buttonColumnWidth, end) $: gridEnd = $width - $buttonColumnWidth
$: left = Math.min(columnEnd, gridEnd)
const handleClick = async (button, row) => { const handleClick = async (button, row) => {
await button.onClick?.(rows.actions.cleanRow(row)) await button.onClick?.(rows.actions.cleanRow(row))
@ -49,6 +50,7 @@
class="button-column" class="button-column"
style="left:{left}px" style="left:{left}px"
class:hidden={$buttonColumnWidth === 0} class:hidden={$buttonColumnWidth === 0}
class:right-border={left !== gridEnd}
> >
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}> <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
<GridScrollWrapper scrollVertically attachHandlers bind:ref={container}> <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
@ -134,4 +136,7 @@
.button-column :global(.cell) { .button-column :global(.cell) {
border-left: var(--cell-border); border-left: var(--cell-border);
} }
.button-column:not(.right-border) :global(.cell) {
border-right-color: transparent;
}
</style> </style>