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

Improve UX around selecting rows and cells

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" } from "@budibase/bbui"
import { getContext } from "svelte" import { getContext } from "svelte"
const { selectedCellRow, menu, rows, columns, selectedCellId } = const { selectedCellRow, menu, rows, columns, selectedCellId, stickyColumn } =
getContext("sheet") getContext("sheet")
let modal let modal
@ -33,7 +33,8 @@
delete clone.__idx delete clone.__idx
const newRow = await rows.actions.addRow(clone, $selectedCellRow.__idx + 1) const newRow = await rows.actions.addRow(clone, $selectedCellRow.__idx + 1)
if (newRow) { if (newRow) {
$selectedCellId = `${newRow._id}-${$columns[0].name}` const column = $stickyColumn?.name || $columns[0].name
$selectedCellId = `${newRow._id}-${column}`
menu.actions.close() menu.actions.close()
} }
} }
@ -62,6 +63,7 @@
<style> <style>
.menu { .menu {
z-index: 1;
position: absolute; position: absolute;
background: var(--cell-background); background: var(--cell-background);
border: var(--cell-border); border: var(--cell-border);

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

@ -18,6 +18,7 @@
config, config,
selectedCellMap, selectedCellMap,
selectedCellRow, selectedCellRow,
menu,
} = getContext("sheet") } = getContext("sheet")
$: scrollLeft = $scroll.left $: scrollLeft = $scroll.left
@ -114,15 +115,16 @@
</SheetCell> </SheetCell>
{#if $stickyColumn} {#if $stickyColumn}
{@const cellIdx = `${row._id}-${stickyColumn.name}`} {@const cellId = `${row._id}-${$stickyColumn.name}`}
<SheetCell <SheetCell
rowSelected={rowSelected || containsSelectedRow} rowSelected={rowSelected || containsSelectedRow}
{rowHovered} {rowHovered}
rowIdx={idx} rowIdx={idx}
sticky sticky
selected={$selectedCellId === cellIdx} selected={$selectedCellId === cellId}
selectedUser={$selectedCellMap[cellIdx]} selectedUser={$selectedCellMap[cellId]}
on:click={() => ($selectedCellId = cellIdx)} on:click={() => ($selectedCellId = cellId)}
on:contextmenu={e => menu.actions.open(cellId, e)}
width={$stickyColumn.width} width={$stickyColumn.width}
reorderTarget={$reorder.targetColumn === $stickyColumn.name} reorderTarget={$reorder.targetColumn === $stickyColumn.name}
> >
@ -130,7 +132,7 @@
this={getCellRenderer($stickyColumn)} this={getCellRenderer($stickyColumn)}
value={row[$stickyColumn.name]} value={row[$stickyColumn.name]}
schema={$stickyColumn.schema} schema={$stickyColumn.schema}
selected={$selectedCellId === cellIdx} selected={$selectedCellId === cellId}
onChange={val => onChange={val =>
rows.actions.updateRow(row._id, $stickyColumn, val)} rows.actions.updateRow(row._id, $stickyColumn, val)}
readonly={$stickyColumn.schema.autocolumn} 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 } return { selectedCellId, selectedRows, hoveredRowId, selectedCellRow }
} }