CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 15:56:23 +12:00
Code Issues Projects Releases Wiki Activity

Update grid min size to accomodate new date picker

Browse source
This commit is contained in:
Andrew Kingston 2024-04-24 08:52:39 +01:00
parent 4d24b2ba1c
commit 46d8a06981
4 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/src/components/app/GridBlock.svelte
View file

@ -149,8 +149,8 @@
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
min-height: 230px; /* min-height: 230px;*/
height: 410px; /* height: 410px;*/
} }
div.in-builder :global(*) { div.in-builder :global(*) {
pointer-events: none; pointer-events: none;

25
packages/frontend-core/src/components/grid/cells/DateCell.svelte
View file

@ -48,6 +48,10 @@
const close = () => { const close = () => {
isOpen = false isOpen = false
// Only save the changed value when closing. If the value is unchanged then
// this is handled upstream and no action is taken.
onChange(value)
} }
const onKeyDown = e => { const onKeyDown = e => {
@ -70,22 +74,19 @@
} }
const changeDate = (quantity, unit) => { const changeDate = (quantity, unit) => {
let newValue
if (!value) { if (!value) {
value = dayjs() newValue = dayjs()
} else { } else {
value = dayjs(value).add(quantity, unit) newValue = dayjs(value).add(quantity, unit)
} }
debouncedOnChange( value = Helpers.stringifyDate(newValue, {
Helpers.stringifyDate(value, { enableTime,
enableTime, timeOnly,
timeOnly, ignoreTimezones,
ignoreTimezones, })
})
)
} }
const debouncedOnChange = debounce(onChange, 250)
onMount(() => { onMount(() => {
api = { api = {
onKeyDown, onKeyDown,
@ -111,7 +112,7 @@
<div class="picker" use:clickOutside={close}> <div class="picker" use:clickOutside={close}>
<CoreDatePickerPopoverContents <CoreDatePickerPopoverContents
value={parsedValue} value={parsedValue}
on:change={e => onChange(e.detail)} on:change={e => (value = e.detail)}
{enableTime} {enableTime}
{timeOnly} {timeOnly}
{ignoreTimezones} {ignoreTimezones}

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

@ -25,6 +25,7 @@
MaxCellRenderOverflow, MaxCellRenderOverflow,
GutterWidth, GutterWidth,
DefaultRowHeight, DefaultRowHeight,
MinHeight,
} from "../lib/constants" } from "../lib/constants"
export let API = null export let API = null
@ -129,7 +130,8 @@
class:quiet class:quiet
on:mouseenter={() => gridFocused.set(true)} on:mouseenter={() => gridFocused.set(true)}
on:mouseleave={() => gridFocused.set(false)} on:mouseleave={() => gridFocused.set(false)}
style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines};" style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{MinHeight +
$rowHeight}px;"
> >
{#if showControls} {#if showControls}
<div class="controls"> <div class="controls">
@ -219,6 +221,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--grid-background); background: var(--grid-background);
min-height: var(--min-height);
} }
.grid, .grid,
.grid :global(*) { .grid :global(*) {

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

@ -1,4 +1,4 @@
export const Padding = 246 export const Padding = 400
export const ScrollBarSize = 8 export const ScrollBarSize = 8
export const GutterWidth = 72 export const GutterWidth = 72
export const DefaultColumnWidth = 200 export const DefaultColumnWidth = 200
@ -11,4 +11,5 @@ export const NewRowID = "new"
export const BlankRowID = "blank" export const BlankRowID = "blank"
export const RowPageSize = 100 export const RowPageSize = 100
export const FocusedCellMinOffset = 48 export const FocusedCellMinOffset = 48
export const MaxCellRenderOverflow = Padding - 3 * ScrollBarSize export const MaxCellRenderOverflow = 222
export const MinHeight = Padding + SmallRowHeight