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

View File

@ -1,6 +1,7 @@
<script>
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 {
Constants,
@ -32,8 +33,7 @@
},
]
let open = false
let anchor
let popover
// Column width sizes
$: allSmall = $columns.every(col => col.width === smallColSize)
@ -66,55 +66,52 @@
}
</script>
<div bind:this={anchor}>
<ActionButton
icon="MoveUpDown"
quiet
size="M"
on:click={() => (open = !open)}
selected={open}
disabled={!$columns.length}
>
Size
</ActionButton>
</div>
<Popover bind:open {anchor} align="left">
<div class="content">
<div class="size">
<Label>Row height</Label>
<div class="options">
{#each rowSizeOptions as option}
<ActionButton
disabled={$fixedRowHeight}
quiet
selected={$rowHeight === option.size}
on:click={() => changeRowHeight(option.size)}
>
{option.label}
</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>
<DetailPopover bind:this={popover} title="Column and row size">
<svelte:fragment slot="anchor" let:open>
<ActionButton
icon="MoveUpDown"
quiet
size="M"
on:click={popover?.open}
selected={open}
disabled={!$columns.length}
>
Size
</ActionButton>
</svelte:fragment>
<div class="size">
<Label>Row height</Label>
<div class="options">
{#each rowSizeOptions as option}
<ActionButton
disabled={$fixedRowHeight}
quiet
selected={$rowHeight === option.size}
on:click={() => changeRowHeight(option.size)}
>
{option.label}
</ActionButton>
{/each}
</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>
.content {