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

Offset button column to account for vertical scrollbar if required

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

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

@ -29,6 +29,7 @@
Padding, Padding,
SmallRowHeight, SmallRowHeight,
ControlsHeight, ControlsHeight,
ScrollBarSize,
} from "../lib/constants" } from "../lib/constants"
export let API = null export let API = null
@ -145,7 +146,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}; --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} {#if showControls}
<div class="controls"> <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 --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="v-scrollbar" class="v-scrollbar"
style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;" style="top:{barTop}px; height:{barHeight}px;"
on:mousedown={startVDragging} on:mousedown={startVDragging}
on:touchstart={startVDragging} on:touchstart={startVDragging}
class:dragging={isDraggingV} class:dragging={isDraggingV}
@ -129,7 +129,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="h-scrollbar" class="h-scrollbar"
style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;" style="left:{barLeft}px; width:{barWidth}px;"
on:mousedown={startHDragging} on:mousedown={startHDragging}
on:touchstart={startHDragging} on:touchstart={startHDragging}
class:dragging={isDraggingH} class:dragging={isDraggingH}
@ -149,11 +149,11 @@
opacity: 1; opacity: 1;
} }
.v-scrollbar { .v-scrollbar {
width: var(--size); width: var(--scroll-bar-size);
right: var(--size); right: var(--scroll-bar-size);
} }
.h-scrollbar { .h-scrollbar {
height: var(--size); height: var(--scroll-bar-size);
bottom: var(--size); bottom: var(--scroll-bar-size);
} }
</style> </style>