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

Ensure dynamic row height is properly accounted for

This commit is contained in:
Andrew Kingston 2023-04-17 12:28:34 +01:00
parent 6931436006
commit bed6fe607c
5 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
View File

@ -99,7 +99,7 @@
<div <div
class="header-cell" class="header-cell"
class:open class:open
style="flex: 0 0 {column.width}px" style="flex: 0 0 {column.width}px;"
bind:this={anchor} bind:this={anchor}
class:disabled={$isReordering || $isResizing} class:disabled={$isReordering || $isResizing}
class:sorted={sortedBy} class:sorted={sortedBy}
@ -110,6 +110,7 @@
on:contextmenu={onContextMenu} on:contextmenu={onContextMenu}
width={column.width} width={column.width}
left={column.left} left={column.left}
defaultHeight
> >
<Icon <Icon
size="S" size="S"

5
packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
View File

@ -6,6 +6,7 @@
export let selectedUser = null export let selectedUser = null
export let error = null export let error = null
export let rowIdx export let rowIdx
export let defaultHeight = false
$: style = getStyle(width, selectedUser) $: style = getStyle(width, selectedUser)
@ -24,6 +25,7 @@
class:highlighted class:highlighted
class:focused class:focused
class:error class:error
class:default-height={defaultHeight}
class:selected-other={selectedUser != null} class:selected-other={selectedUser != null}
on:focus on:focus
on:mousedown on:mousedown
@ -64,6 +66,9 @@
width: 0; width: 0;
--cell-color: transparent; --cell-color: transparent;
} }
.cell.default-height {
height: var(--default-row-height);
}
/* Cell border */ /* Cell border */
.cell.focused:after, .cell.focused:after,

2
packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
View File

@ -21,7 +21,7 @@
background: var(--background); background: var(--background);
border-bottom: var(--cell-border); border-bottom: var(--cell-border);
position: relative; position: relative;
height: var(--row-height); height: var(--default-row-height);
z-index: 1; z-index: 1;
} }
.row { .row {

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

@ -58,7 +58,7 @@
class:scrolled={$scrollLeft > 0} class:scrolled={$scrollLeft > 0}
> >
<div class="header row"> <div class="header row">
<SheetCell width={GutterWidth}> <SheetCell width={GutterWidth} defaultHeight>
<div class="gutter"> <div class="gutter">
<div class="checkbox visible"> <div class="checkbox visible">
{#if $config.allowDeleteRows} {#if $config.allowDeleteRows}

6
packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { domDebounce } from "../../../utils/utils" import { domDebounce } from "../../../utils/utils"
import { ScrollBarSize } from "../lib/constants" import { DefaultRowHeight, ScrollBarSize } from "../lib/constants"
const { const {
scroll, scroll,
@ -30,7 +30,9 @@
$: barHeight = Math.max(50, ($height / $contentHeight) * renderHeight) $: barHeight = Math.max(50, ($height / $contentHeight) * renderHeight)
$: availHeight = renderHeight - barHeight $: availHeight = renderHeight - barHeight
$: barTop = $: barTop =
ScrollBarSize + $rowHeight + availHeight * ($scrollTop / $maxScrollTop) ScrollBarSize +
DefaultRowHeight +
availHeight * ($scrollTop / $maxScrollTop)
// Calculate H scrollbar size and offset // Calculate H scrollbar size and offset
$: renderWidth = $screenWidth - 2 * ScrollBarSize $: renderWidth = $screenWidth - 2 * ScrollBarSize