Improve grid min height determination
This commit is contained in:
parent
f45783f919
commit
238b43a59a
|
@ -26,6 +26,9 @@
|
||||||
MaxCellRenderOverflow,
|
MaxCellRenderOverflow,
|
||||||
GutterWidth,
|
GutterWidth,
|
||||||
DefaultRowHeight,
|
DefaultRowHeight,
|
||||||
|
Padding,
|
||||||
|
SmallRowHeight,
|
||||||
|
ControlsHeight,
|
||||||
} from "../lib/constants"
|
} from "../lib/constants"
|
||||||
|
|
||||||
export let API = null
|
export let API = null
|
||||||
|
@ -104,6 +107,8 @@
|
||||||
notifyError,
|
notifyError,
|
||||||
buttons,
|
buttons,
|
||||||
})
|
})
|
||||||
|
$: minHeight =
|
||||||
|
Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)
|
||||||
|
|
||||||
// Set context for children to consume
|
// Set context for children to consume
|
||||||
setContext("grid", context)
|
setContext("grid", context)
|
||||||
|
@ -129,7 +134,7 @@
|
||||||
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}px; --controls-height:{ControlsHeight}px;"
|
||||||
>
|
>
|
||||||
{#if showControls}
|
{#if showControls}
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
|
@ -211,7 +216,6 @@
|
||||||
--cell-spacing: 4px;
|
--cell-spacing: 4px;
|
||||||
--cell-border: 1px solid var(--spectrum-global-color-gray-200);
|
--cell-border: 1px solid var(--spectrum-global-color-gray-200);
|
||||||
--cell-font-size: 14px;
|
--cell-font-size: 14px;
|
||||||
--controls-height: 50px;
|
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -220,6 +224,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(*) {
|
||||||
|
|
|
@ -11,6 +11,7 @@ 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 ControlsHeight = 50
|
||||||
|
|
||||||
// Popovers
|
// Popovers
|
||||||
export const PopoverMinWidth = 200
|
export const PopoverMinWidth = 200
|
||||||
|
|
Loading…
Reference in a new issue