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

Merge remote-tracking branch 'origin/master' into feature/automation-row-ux-update

Browse source
This commit is contained in:
Dean 2024-06-27 15:06:52 +01:00
commit 5ccb3885b2
7 changed files with 182 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
View file

@ -3,6 +3,7 @@
import { Button } from "@budibase/bbui" import { Button } from "@budibase/bbui"
import GridCell from "../cells/GridCell.svelte" import GridCell from "../cells/GridCell.svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte" import GridScrollWrapper from "./GridScrollWrapper.svelte"
import { BlankRowID } from "../lib/constants"
const { const {
renderedRows, renderedRows,
@ -17,6 +18,7 @@
isDragging, isDragging,
buttonColumnWidth, buttonColumnWidth,
showVScrollbar, showVScrollbar,
dispatch,
} = getContext("grid") } = getContext("grid")
let container let container
@ -89,6 +91,17 @@
</GridCell> </GridCell>
</div> </div>
{/each} {/each}
<div
class="row blank"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
>
<GridCell
width={$buttonColumnWidth}
highlighted={$hoveredRowId === BlankRowID}
on:click={() => dispatch("add-row-inline")}
/>
</div>
</GridScrollWrapper> </GridScrollWrapper>
</div> </div>
</div> </div>
@ -129,8 +142,11 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.blank :global(.cell:hover) {
cursor: pointer;
}
/* Add left cell border */ /* Add left cell border to all cells */
.button-column :global(.cell) { .button-column :global(.cell) {
border-left: var(--cell-border); border-left: var(--cell-border);
} }

13
packages/frontend-core/src/components/grid/layout/Grid.svelte
View file

@ -26,7 +26,7 @@
MaxCellRenderOverflow, MaxCellRenderOverflow,
GutterWidth, GutterWidth,
DefaultRowHeight, DefaultRowHeight,
Padding, VPadding,
SmallRowHeight, SmallRowHeight,
ControlsHeight, ControlsHeight,
ScrollBarSize, ScrollBarSize,
@ -119,7 +119,7 @@
// Derive min height and make available in context // Derive min height and make available in context
const minHeight = derived(rowHeight, $height => { const minHeight = derived(rowHeight, $height => {
const heightForControls = showControls ? ControlsHeight : 0 const heightForControls = showControls ? ControlsHeight : 0
return Padding + SmallRowHeight + $height + heightForControls return VPadding + SmallRowHeight + $height + heightForControls
}) })
context = { ...context, minHeight } context = { ...context, minHeight }
@ -354,8 +354,13 @@
transition: none; transition: none;
} }
/* Overrides */ /* Overrides for quiet */
.grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)) { .grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)),
.grid.quiet :global(.sticky-column .row > .cell),
.grid.quiet :global(.new-row .row > .cell:not(:last-child)) {
border-right: none; border-right: none;
} }
.grid.quiet :global(.sticky-column:before) {
display: none;
}
</style> </style>

29
packages/frontend-core/src/components/grid/layout/GridBody.svelte
View file

@ -2,6 +2,7 @@
import { getContext, onMount } from "svelte" import { getContext, onMount } from "svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte" import GridScrollWrapper from "./GridScrollWrapper.svelte"
import GridRow from "./GridRow.svelte" import GridRow from "./GridRow.svelte"
import GridCell from "../cells/GridCell.svelte"
import { BlankRowID } from "../lib/constants" import { BlankRowID } from "../lib/constants"
import ButtonColumn from "./ButtonColumn.svelte" import ButtonColumn from "./ButtonColumn.svelte"
@ -46,7 +47,6 @@
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div bind:this={body} class="grid-body"> <div bind:this={body} class="grid-body">
<GridScrollWrapper scrollHorizontally scrollVertically attachHandlers> <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
{#each $renderedRows as row, idx} {#each $renderedRows as row, idx}
@ -54,13 +54,16 @@
{/each} {/each}
{#if $config.canAddRows} {#if $config.canAddRows}
<div <div
class="blank" class="row blank"
class:highlighted={$hoveredRowId === BlankRowID}
style="width:{columnsWidth}px"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("add-row-inline")} >
/> <GridCell
width={columnsWidth}
highlighted={$hoveredRowId === BlankRowID}
on:click={() => dispatch("add-row-inline")}
/>
</div>
{/if} {/if}
</GridScrollWrapper> </GridScrollWrapper>
{#if $props.buttons?.length} {#if $props.buttons?.length}
@ -76,15 +79,13 @@
overflow: hidden; overflow: hidden;
flex: 1 1 auto; flex: 1 1 auto;
} }
.blank { .row {
height: var(--row-height); display: flex;
background: var(--cell-background); flex-direction: row;
border-bottom: var(--cell-border); justify-content: flex-start;
border-right: var(--cell-border); align-items: stretch;
position: absolute;
} }
.blank.highlighted { .blank :global(.cell:hover) {
background: var(--cell-background-hover);
cursor: pointer; cursor: pointer;
} }
</style> </style>

88
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View file

@ -31,6 +31,7 @@
filter, filter,
inlineFilters, inlineFilters,
columnRenderMap, columnRenderMap,
scrollTop,
} = getContext("grid") } = getContext("grid")
let visible = false let visible = false
@ -43,6 +44,21 @@
$: $datasource, (visible = false) $: $datasource, (visible = false)
$: selectedRowCount = Object.values($selectedRows).length $: selectedRowCount = Object.values($selectedRows).length
$: hasNoRows = !$rows.length $: hasNoRows = !$rows.length
$: renderedRowCount = $renderedRows.length
$: offset = getOffset($hasNextPage, renderedRowCount, $rowHeight, $scrollTop)
const getOffset = (hasNextPage, rowCount, rowHeight, scrollTop) => {
// If we have a next page of data then we aren't truly at the bottom, so we
// render the add row component at the top
if (hasNextPage) {
return 0
}
offset = rowCount * rowHeight - (scrollTop % rowHeight)
if (rowCount !== 0) {
offset -= 1
}
return offset
}
const addRow = async () => { const addRow = async () => {
// Blur the active cell and tick to let final value updates propagate // Blur the active cell and tick to let final value updates propagate
@ -85,12 +101,6 @@
return return
} }
// If we have a next page of data then we aren't truly at the bottom, so we
// render the add row component at the top
if ($hasNextPage) {
offset = 0
}
// If we don't have a next page then we're at the bottom and can scroll to // If we don't have a next page then we're at the bottom and can scroll to
// the max available offset // the max available offset
else { else {
@ -98,10 +108,6 @@
...state, ...state,
top: $maxScrollTop, top: $maxScrollTop,
})) }))
offset = $renderedRows.length * $rowHeight - ($maxScrollTop % $rowHeight)
if ($renderedRows.length !== 0) {
offset -= 1
}
} }
// Update state and select initial cell // Update state and select initial cell
@ -171,39 +177,41 @@
<!-- Only show new row functionality if we have any columns --> <!-- Only show new row functionality if we have any columns -->
{#if visible} {#if visible}
<div <div
class="container" class="new-row"
class:floating={offset > 0} class:floating={offset > 0}
style="--offset:{offset}px; --sticky-width:{width}px;" style="--offset:{offset}px; --sticky-width:{width}px;"
> >
<div class="underlay sticky" transition:fade|local={{ duration: 130 }} /> <div class="underlay sticky" transition:fade|local={{ duration: 130 }} />
<div class="underlay" transition:fade|local={{ duration: 130 }} /> <div class="underlay" transition:fade|local={{ duration: 130 }} />
<div class="sticky-column" transition:fade|local={{ duration: 130 }}> <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
<GutterCell expandable on:expand={addViaModal} rowHovered> <div class="row">
<Icon name="Add" color="var(--spectrum-global-color-gray-500)" /> <GutterCell expandable on:expand={addViaModal} rowHovered>
{#if isAdding} <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
<div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if}
</GutterCell>
{#if $stickyColumn}
{@const cellId = getCellID(NewRowID, $stickyColumn.name)}
<DataCell
{cellId}
rowFocused
column={$stickyColumn}
row={newRow}
focused={$focusedCellId === cellId}
width={$stickyColumn.width}
{updateValue}
topRow={offset === 0}
>
{#if $stickyColumn?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
{/if}
{#if isAdding} {#if isAdding}
<div in:fade={{ duration: 130 }} class="loading-overlay" /> <div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if} {/if}
</DataCell> </GutterCell>
{/if} {#if $stickyColumn}
{@const cellId = getCellID(NewRowID, $stickyColumn.name)}
<DataCell
{cellId}
rowFocused
column={$stickyColumn}
row={newRow}
focused={$focusedCellId === cellId}
width={$stickyColumn.width}
{updateValue}
topRow={offset === 0}
>
{#if $stickyColumn?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
{/if}
{#if isAdding}
<div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if}
</DataCell>
{/if}
</div>
</div> </div>
<div class="normal-columns" transition:fade|local={{ duration: 130 }}> <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
<GridScrollWrapper scrollHorizontally attachHandlers> <GridScrollWrapper scrollHorizontally attachHandlers>
@ -270,7 +278,7 @@
margin-left: -6px; margin-left: -6px;
} }
.container { .new-row {
position: absolute; position: absolute;
top: var(--default-row-height); top: var(--default-row-height);
left: 0; left: 0;
@ -280,10 +288,10 @@
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.container :global(.cell) { .new-row :global(.cell) {
--cell-background: var(--spectrum-global-color-gray-75) !important; --cell-background: var(--spectrum-global-color-gray-75) !important;
} }
.container.floating :global(.cell) { .new-row.floating :global(.cell) {
height: calc(var(--row-height) + 1px); height: calc(var(--row-height) + 1px);
border-top: var(--cell-border); border-top: var(--cell-border);
} }
@ -312,8 +320,10 @@
pointer-events: all; pointer-events: all;
z-index: 3; z-index: 3;
position: absolute; position: absolute;
top: calc(var(--row-height) + var(--offset) + 24px); top: calc(
left: 18px; var(--row-height) + var(--offset) + var(--default-row-height) / 2
);
left: calc(var(--default-row-height) / 2);
} }
.button-with-keys { .button-with-keys {
display: flex; display: flex;

114
packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
View file

@ -66,62 +66,58 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="content"> <GridScrollWrapper scrollVertically attachHandlers>
<GridScrollWrapper scrollVertically attachHandlers> {#each $renderedRows as row, idx}
{#each $renderedRows as row, idx} {@const rowSelected = !!$selectedRows[row._id]}
{@const rowSelected = !!$selectedRows[row._id]} {@const rowHovered = $hoveredRowId === row._id}
{@const rowHovered = $hoveredRowId === row._id} {@const rowFocused = $focusedRow?._id === row._id}
{@const rowFocused = $focusedRow?._id === row._id} {@const cellId = getCellID(row._id, $stickyColumn?.name)}
{@const cellId = getCellID(row._id, $stickyColumn?.name)} <div
<div class="row"
class="row" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))} >
> <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
<GutterCell {row} {rowFocused} {rowHovered} {rowSelected} /> {#if $stickyColumn}
{#if $stickyColumn} <DataCell
<DataCell {row}
{row} {cellId}
{cellId} {rowFocused}
{rowFocused} selected={rowSelected}
selected={rowSelected} highlighted={rowHovered || rowFocused}
highlighted={rowHovered || rowFocused} rowIdx={row.__idx}
rowIdx={row.__idx} topRow={idx === 0}
topRow={idx === 0} focused={$focusedCellId === cellId}
focused={$focusedCellId === cellId} selectedUser={$selectedCellMap[cellId]}
selectedUser={$selectedCellMap[cellId]} width={$stickyColumn.width}
width={$stickyColumn.width} column={$stickyColumn}
column={$stickyColumn} contentLines={$contentLines}
contentLines={$contentLines} />
/> {/if}
{/if} </div>
</div> {/each}
{/each} {#if $config.canAddRows}
{#if $config.canAddRows} <div
<div class="row blank"
class="row new" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseenter={$isDragging on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
? null on:click={() => dispatch("add-row-inline")}
: () => ($hoveredRowId = BlankRowID)} >
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
on:click={() => dispatch("add-row-inline")} <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
> </GutterCell>
<GutterCell rowHovered={$hoveredRowId === BlankRowID}> {#if $stickyColumn}
<Icon name="Add" color="var(--spectrum-global-color-gray-500)" /> <GridCell
</GutterCell> width={$stickyColumn.width}
{#if $stickyColumn} highlighted={$hoveredRowId === BlankRowID}
<GridCell >
width={$stickyColumn.width} <KeyboardShortcut padded keybind="Ctrl+Enter" />
highlighted={$hoveredRowId === BlankRowID} </GridCell>
> {/if}
<KeyboardShortcut padded keybind="Ctrl+Enter" /> </div>
</GridCell> {/if}
{/if} </GridScrollWrapper>
</div>
{/if}
</GridScrollWrapper>
</div>
</div> </div>
<style> <style>
@ -174,11 +170,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.content { .blank :global(.cell:hover) {
position: relative;
flex: 1 1 auto;
}
.row.new :global(*:hover) {
cursor: pointer; cursor: pointer;
} }
</style> </style>

11
packages/frontend-core/src/components/grid/lib/constants.js
View file

@ -1,12 +1,13 @@
export const Padding = 100
export const ScrollBarSize = 8
export const GutterWidth = 72
export const DefaultColumnWidth = 200
export const MinColumnWidth = 80
export const SmallRowHeight = 36 export const SmallRowHeight = 36
export const MediumRowHeight = 64 export const MediumRowHeight = 64
export const LargeRowHeight = 92 export const LargeRowHeight = 92
export const DefaultRowHeight = SmallRowHeight export const DefaultRowHeight = SmallRowHeight
export const VPadding = SmallRowHeight * 2
export const HPadding = 40
export const ScrollBarSize = 8
export const GutterWidth = 72
export const DefaultColumnWidth = 200
export const MinColumnWidth = 80
export const NewRowID = "new" export const NewRowID = "new"
export const BlankRowID = "blank" export const BlankRowID = "blank"
export const RowPageSize = 100 export const RowPageSize = 100

57
packages/frontend-core/src/components/grid/stores/scroll.js
View file

@ -1,6 +1,12 @@
import { writable, derived, get } from "svelte/store" import { writable, derived, get } from "svelte/store"
import { tick } from "svelte" import { tick } from "svelte"
import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants" import {
GutterWidth,
FocusedCellMinOffset,
ScrollBarSize,
HPadding,
VPadding,
} from "../lib/constants"
import { parseCellID } from "../lib/utils" import { parseCellID } from "../lib/utils"
export const createStores = () => { export const createStores = () => {
@ -34,28 +40,15 @@ export const deriveStores = context => {
// Memoize store primitives // Memoize store primitives
const stickyColumnWidth = derived(stickyColumn, $col => $col?.width || 0, 0) const stickyColumnWidth = derived(stickyColumn, $col => $col?.width || 0, 0)
// Derive vertical limits
const contentHeight = derived(
[rows, rowHeight],
([$rows, $rowHeight]) => ($rows.length + 1) * $rowHeight + Padding,
0
)
const maxScrollTop = derived(
[height, contentHeight],
([$height, $contentHeight]) => Math.max($contentHeight - $height, 0),
0
)
// Derive horizontal limits // Derive horizontal limits
const contentWidth = derived( const contentWidth = derived(
[visibleColumns, stickyColumnWidth, buttonColumnWidth], [visibleColumns, stickyColumnWidth, buttonColumnWidth],
([$visibleColumns, $stickyColumnWidth, $buttonColumnWidth]) => { ([$visibleColumns, $stickyColumnWidth, $buttonColumnWidth]) => {
const space = Math.max(Padding, $buttonColumnWidth - 1) let width = GutterWidth + $buttonColumnWidth + $stickyColumnWidth
let width = GutterWidth + space + $stickyColumnWidth
$visibleColumns.forEach(col => { $visibleColumns.forEach(col => {
width += col.width width += col.width
}) })
return width return width + HPadding
}, },
0 0
) )
@ -71,14 +64,6 @@ export const deriveStores = context => {
}, },
0 0
) )
// Derive whether to show scrollbars or not
const showVScrollbar = derived(
[contentHeight, height],
([$contentHeight, $height]) => {
return $contentHeight > $height
}
)
const showHScrollbar = derived( const showHScrollbar = derived(
[contentWidth, screenWidth], [contentWidth, screenWidth],
([$contentWidth, $screenWidth]) => { ([$contentWidth, $screenWidth]) => {
@ -86,6 +71,30 @@ export const deriveStores = context => {
} }
) )
// Derive vertical limits
const contentHeight = derived(
[rows, rowHeight, showHScrollbar],
([$rows, $rowHeight, $showHScrollbar]) => {
let height = ($rows.length + 1) * $rowHeight + VPadding
if ($showHScrollbar) {
height += ScrollBarSize * 2
}
return height
},
0
)
const maxScrollTop = derived(
[height, contentHeight],
([$height, $contentHeight]) => Math.max($contentHeight - $height, 0),
0
)
const showVScrollbar = derived(
[contentHeight, height],
([$contentHeight, $height]) => {
return $contentHeight > $height
}
)
return { return {
contentHeight, contentHeight,
contentWidth, contentWidth,