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

97
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,55 +66,52 @@
} }
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Column and row size">
<ActionButton <svelte:fragment slot="anchor" let:open>
icon="MoveUpDown" <ActionButton
quiet icon="MoveUpDown"
size="M" quiet
on:click={() => (open = !open)} size="M"
selected={open} on:click={popover?.open}
disabled={!$columns.length} selected={open}
> disabled={!$columns.length}
Size >
</ActionButton> Size
</div> </ActionButton>
</svelte:fragment>
<Popover bind:open {anchor} align="left"> <div class="size">
<div class="content"> <Label>Row height</Label>
<div class="size"> <div class="options">
<Label>Row height</Label> {#each rowSizeOptions as option}
<div class="options"> <ActionButton
{#each rowSizeOptions as option} disabled={$fixedRowHeight}
<ActionButton quiet
disabled={$fixedRowHeight} selected={$rowHeight === option.size}
quiet on:click={() => changeRowHeight(option.size)}
selected={$rowHeight === option.size} >
on:click={() => changeRowHeight(option.size)} {option.label}
> </ActionButton>
{option.label} {/each}
</ActionButton>
{/each}
</div>
</div>
<div class="size">
<Label>Column width</Label>
<div class="options">
{#each columnSizeOptions as option}
<ActionButton
quiet
on:click={() => columns.actions.changeAllColumnWidths(option.size)}
selected={option.selected}
>
{option.label}
</ActionButton>
{/each}
{#if custom}
<ActionButton selected={custom} quiet>Custom</ActionButton>
{/if}
</div>
</div> </div>
</div> </div>
</Popover> <div class="size">
<Label>Column width</Label>
<div class="options">
{#each columnSizeOptions as option}
<ActionButton
quiet
on:click={() => columns.actions.changeAllColumnWidths(option.size)}
selected={option.selected}
>
{option.label}
</ActionButton>
{/each}
{#if custom}
<ActionButton selected={custom} quiet>Custom</ActionButton>
{/if}
</div>
</div>
</DetailPopover>
<style> <style>
.content { .content {