CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-13 07:53:31 +12:00
Code Issues Projects Releases Wiki Activity

Offset button column to account for vertical scrollbar if required

Browse source
This commit is contained in:
Andrew Kingston 2024-05-28 11:00:47 +01:00
parent a873b80632
commit ea14af8a64
3 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,7 @@
import { Button } from "@budibase/bbui"
import GridCell from "../cells/GridCell.svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte"
import { ScrollBarSize } from "../lib/constants"
const {
renderedRows,
@ -16,6 +17,7 @@
scroll,
isDragging,
buttonColumnWidth,
showVScrollbar,
} = getContext("grid")
let measureContainer
@ -67,7 +69,7 @@
selected={rowSelected}
highlighted={rowHovered || rowFocused}
>
<div class="buttons">
<div class="buttons" class:offset={$showVScrollbar}>
{#each buttons as button}
<Button
newStyles
@ -121,6 +123,9 @@
gap: var(--cell-padding);
height: inherit;
}
.buttons.offset {
padding-right: calc(var(--cell-padding) + 2 * var(--scroll-bar-size) - 2px);
}
.buttons :global(.spectrum-Button-Label) {
display: flex;
align-items: center;

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

@ -29,6 +29,7 @@
Padding,
SmallRowHeight,
ControlsHeight,
ScrollBarSize,
} from "../lib/constants"
export let API = null
@ -145,7 +146,7 @@
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}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
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; --scroll-bar-size:{ScrollBarSize}px;"
>
{#if showControls}
<div class="controls">

12
packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
View file

@ -119,7 +119,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="v-scrollbar"
style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
style="top:{barTop}px; height:{barHeight}px;"
on:mousedown={startVDragging}
on:touchstart={startVDragging}
class:dragging={isDraggingV}
@ -129,7 +129,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="h-scrollbar"
style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
style="left:{barLeft}px; width:{barWidth}px;"
on:mousedown={startHDragging}
on:touchstart={startHDragging}
class:dragging={isDraggingH}
@ -149,11 +149,11 @@
opacity: 1;
}
.v-scrollbar {
width: var(--size);
right: var(--size);
width: var(--scroll-bar-size);
right: var(--scroll-bar-size);
}
.h-scrollbar {
height: var(--size);
bottom: var(--size);
height: var(--scroll-bar-size);
bottom: var(--scroll-bar-size);
}
</style>