CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-04 03:54:37 +13:00
Code Issues Projects Releases Wiki Activity

Add inline button for creating columns

Browse source
This commit is contained in:
Andrew Kingston 2023-04-24 07:46:36 +01:00
parent 1edfd3b887
commit 4e128c00f4
2 changed files with 47 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
View file

@ -2,8 +2,17 @@
import { getContext } from "svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte"
import HeaderCell from "../cells/HeaderCell.svelte"
import { Icon } from "@budibase/bbui"
const { renderedColumns } = getContext("grid")
const { renderedColumns, dispatch, scroll, hiddenColumnsWidth, width } =
getContext("grid")
$: columnsWidth = $renderedColumns.reduce(
(total, col) => (total += col.width),
0
)
$: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
$: left = Math.min($width - 40, end)
</script>
<div class="header">
@ -14,6 +23,13 @@
{/each}
</div>
</GridScrollWrapper>
<div
class="add"
style="left:{left}px"
on:click={() => dispatch("add-column")}
>
<Icon name="Add" />
</div>
</div>
<style>
@ -27,4 +43,19 @@
.row {
display: flex;
}
.add {
height: var(--default-row-height);
display: grid;
place-items: center;
width: 40px;
position: absolute;
top: 0;
border-left: var(--cell-border);
border-right: var(--cell-border);
background: var(--spectrum-global-color-gray-100);
}
.add:hover {
background: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
</style>

27
packages/frontend-core/src/components/grid/stores/viewport.js
View file

@ -45,11 +45,16 @@ export const deriveStores = context => {
)
// Derive visible columns
const scrollLeftRounded = derived(scrollLeft, $scrollLeft => {
const interval = 50
return Math.round($scrollLeft / interval) * interval
})
const renderedColumns = derived(
[visibleColumns, scrollLeft, width],
([$visibleColumns, $scrollLeft, $width]) => {
[visibleColumns, scrollLeftRounded, width],
([$visibleColumns, $scrollLeft, $width], set) => {
if (!$visibleColumns.length) {
return []
set([])
return
}
let startColIdx = 0
let rightEdge = $visibleColumns[0].width
@ -69,16 +74,14 @@ export const deriveStores = context => {
leftEdge += $visibleColumns[endColIdx].width
endColIdx++
}
const nextRenderedColumns = $visibleColumns.slice(startColIdx, endColIdx)
const next = $visibleColumns.slice(startColIdx, endColIdx)
// Cautiously shrink the number of rendered columns.
// This is to avoid rapidly shrinking and growing the visible column count
// which results in remounting cells
const currentCount = get(renderedColumns).length
if (currentCount === nextRenderedColumns.length + 1) {
return $visibleColumns.slice(startColIdx, endColIdx + 1)
} else {
return nextRenderedColumns
// Only update if the column selection is actually different
const current = get(renderedColumns)
const currentKey = current.map(col => col.width).join("-")
const nextKey = next.map(col => col.width).join("-")
if (currentKey !== nextKey) {
set(next)
}
},
[]