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

Update size button to be a detail popover

This commit is contained in:
Andrew Kingston 2024-10-28 14:05:14 +00:00
parent 4979cce132
commit 83eed815c3
No known key found for this signature in database
1 changed files with 47 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/builder/src/components/backend/DataTable/buttons/grid/GridSizeButton.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Label } from "@budibase/bbui" import { ActionButton, Label } from "@budibase/bbui"
import DetailPopover from "components/common/DetailPopover.svelte"
const { const {
Constants, Constants,
@ -32,8 +33,7 @@
}, },
] ]
let open = false let popover
let anchor
// Column width sizes // Column width sizes
$: allSmall = $columns.every(col => col.width === smallColSize) $: allSmall = $columns.every(col => col.width === smallColSize)
@ -66,21 +66,19 @@
} }
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Column and row size">
<svelte:fragment slot="anchor" let:open>
<ActionButton <ActionButton
icon="MoveUpDown" icon="MoveUpDown"
quiet quiet
size="M" size="M"
on:click={() => (open = !open)} on:click={popover?.open}
selected={open} selected={open}
disabled={!$columns.length} disabled={!$columns.length}
> >
Size Size
</ActionButton> </ActionButton>
</div> </svelte:fragment>
<Popover bind:open {anchor} align="left">
<div class="content">
<div class="size"> <div class="size">
<Label>Row height</Label> <Label>Row height</Label>
<div class="options"> <div class="options">
@ -113,8 +111,7 @@
{/if} {/if}
</div> </div>
</div> </div>
</div> </DetailPopover>
</Popover>
<style> <style>
.content { .content {