CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 22:46:09 +12:00
Code Issues Projects Releases Wiki Activity

Improve UX around selecting rows and cells

Browse source
This commit is contained in:
Andrew Kingston 2023-03-08 07:55:31 +00:00
parent 3c71acd68e
commit 045d0c89af
3 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend-core/src/components/sheet/MenuOverlay.svelte
View file

@ -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);

12
packages/frontend-core/src/components/sheet/StickyColumn.svelte
View file

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

14
packages/frontend-core/src/components/sheet/stores/interface.js
View file

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