Improve UX around selecting rows and cells
This commit is contained in:
parent
3c71acd68e
commit
045d0c89af
3 changed files with 25 additions and 7 deletions
|
@ -9,7 +9,7 @@
|
|||
} from "@budibase/bbui"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
const { selectedCellRow, menu, rows, columns, selectedCellId } =
|
||||
const { selectedCellRow, menu, rows, columns, selectedCellId, stickyColumn } =
|
||||
getContext("sheet")
|
||||
|
||||
let modal
|
||||
|
@ -33,7 +33,8 @@
|
|||
delete clone.__idx
|
||||
const newRow = await rows.actions.addRow(clone, $selectedCellRow.__idx + 1)
|
||||
if (newRow) {
|
||||
$selectedCellId = `${newRow._id}-${$columns[0].name}`
|
||||
const column = $stickyColumn?.name || $columns[0].name
|
||||
$selectedCellId = `${newRow._id}-${column}`
|
||||
menu.actions.close()
|
||||
}
|
||||
}
|
||||
|
@ -62,6 +63,7 @@
|
|||
|
||||
<style>
|
||||
.menu {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
background: var(--cell-background);
|
||||
border: var(--cell-border);
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
config,
|
||||
selectedCellMap,
|
||||
selectedCellRow,
|
||||
menu,
|
||||
} = getContext("sheet")
|
||||
|
||||
$: scrollLeft = $scroll.left
|
||||
|
@ -114,15 +115,16 @@
|
|||
</SheetCell>
|
||||
|
||||
{#if $stickyColumn}
|
||||
{@const cellIdx = `${row._id}-${stickyColumn.name}`}
|
||||
{@const cellId = `${row._id}-${$stickyColumn.name}`}
|
||||
<SheetCell
|
||||
rowSelected={rowSelected || containsSelectedRow}
|
||||
{rowHovered}
|
||||
rowIdx={idx}
|
||||
sticky
|
||||
selected={$selectedCellId === cellIdx}
|
||||
selectedUser={$selectedCellMap[cellIdx]}
|
||||
on:click={() => ($selectedCellId = cellIdx)}
|
||||
selected={$selectedCellId === cellId}
|
||||
selectedUser={$selectedCellMap[cellId]}
|
||||
on:click={() => ($selectedCellId = cellId)}
|
||||
on:contextmenu={e => menu.actions.open(cellId, e)}
|
||||
width={$stickyColumn.width}
|
||||
reorderTarget={$reorder.targetColumn === $stickyColumn.name}
|
||||
>
|
||||
|
@ -130,7 +132,7 @@
|
|||
this={getCellRenderer($stickyColumn)}
|
||||
value={row[$stickyColumn.name]}
|
||||
schema={$stickyColumn.schema}
|
||||
selected={$selectedCellId === cellIdx}
|
||||
selected={$selectedCellId === cellId}
|
||||
onChange={val =>
|
||||
rows.actions.updateRow(row._id, $stickyColumn, val)}
|
||||
readonly={$stickyColumn.schema.autocolumn}
|
||||
|
|
|
@ -48,5 +48,19 @@ export const createInterfaceStores = context => {
|
|||
}
|
||||
})
|
||||
|
||||
// Reset selected rows when selected cell changes
|
||||
selectedCellId.subscribe(id => {
|
||||
if (id) {
|
||||
selectedRows.set({})
|
||||
}
|
||||
})
|
||||
|
||||
// Unset selected cell when rows are selected
|
||||
selectedRows.subscribe(rows => {
|
||||
if (Object.keys(rows || {}).length) {
|
||||
selectedCellId.set(null)
|
||||
}
|
||||
})
|
||||
|
||||
return { selectedCellId, selectedRows, hoveredRowId, selectedCellRow }
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue