From 46d8a0698190a24cab9525dd119de5dea4e15261 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 24 Apr 2024 08:52:39 +0100 Subject: [PATCH] Update grid min size to accomodate new date picker --- .../src/components/app/GridBlock.svelte | 4 +-- .../src/components/grid/cells/DateCell.svelte | 25 ++++++++++--------- .../src/components/grid/layout/Grid.svelte | 5 +++- .../src/components/grid/lib/constants.js | 5 ++-- 4 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 55e5a2bd66..deefe6726a 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -149,8 +149,8 @@ border: 1px solid var(--spectrum-global-color-gray-300); border-radius: 4px; overflow: hidden; - min-height: 230px; - height: 410px; + /* min-height: 230px;*/ + /* height: 410px;*/ } div.in-builder :global(*) { pointer-events: none; diff --git a/packages/frontend-core/src/components/grid/cells/DateCell.svelte b/packages/frontend-core/src/components/grid/cells/DateCell.svelte index 394b6e1f43..04d5841f49 100644 --- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte @@ -48,6 +48,10 @@ const close = () => { 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 => { @@ -70,22 +74,19 @@ } const changeDate = (quantity, unit) => { + let newValue if (!value) { - value = dayjs() + newValue = dayjs() } else { - value = dayjs(value).add(quantity, unit) + newValue = dayjs(value).add(quantity, unit) } - debouncedOnChange( - Helpers.stringifyDate(value, { - enableTime, - timeOnly, - ignoreTimezones, - }) - ) + value = Helpers.stringifyDate(newValue, { + enableTime, + timeOnly, + ignoreTimezones, + }) } - const debouncedOnChange = debounce(onChange, 250) - onMount(() => { api = { onKeyDown, @@ -111,7 +112,7 @@
onChange(e.detail)} + on:change={e => (value = e.detail)} {enableTime} {timeOnly} {ignoreTimezones} diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 468f49bdec..d62715083a 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -25,6 +25,7 @@ MaxCellRenderOverflow, GutterWidth, DefaultRowHeight, + MinHeight, } from "../lib/constants" export let API = null @@ -129,7 +130,8 @@ class:quiet on:mouseenter={() => gridFocused.set(true)} 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}
@@ -219,6 +221,7 @@ position: relative; overflow: hidden; background: var(--grid-background); + min-height: var(--min-height); } .grid, .grid :global(*) { diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js index 37d829873d..1a01c9f1bd 100644 --- a/packages/frontend-core/src/components/grid/lib/constants.js +++ b/packages/frontend-core/src/components/grid/lib/constants.js @@ -1,4 +1,4 @@ -export const Padding = 246 +export const Padding = 400 export const ScrollBarSize = 8 export const GutterWidth = 72 export const DefaultColumnWidth = 200 @@ -11,4 +11,5 @@ export const NewRowID = "new" export const BlankRowID = "blank" export const RowPageSize = 100 export const FocusedCellMinOffset = 48 -export const MaxCellRenderOverflow = Padding - 3 * ScrollBarSize +export const MaxCellRenderOverflow = 222 +export const MinHeight = Padding + SmallRowHeight