CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-23 14:01:34 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #13769 from Budibase/add-icons-to-grid-buttons

Browse source 
Add icons to grid buttons and simplify button column
This commit is contained in:
Andrew Kingston 2024-05-28 08:54:30 +01:00 committed by GitHub
commit 55a418c19c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/client/src/components/app/GridBlock.svelte
View file

@ -105,6 +105,7 @@
size: "M", size: "M",
text: settings.text, text: settings.text,
type: settings.type, type: settings.type,
icon: settings.icon,
onClick: async row => { onClick: async row => {
// Create a fake, ephemeral context to run the buttons actions with // Create a fake, ephemeral context to run the buttons actions with
const id = get(component).id const id = get(component).id

29
packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
View file

@ -43,19 +43,6 @@
}) })
</script> </script>
<!-- Hidden copy of buttons to measure -->
<div class="measure" bind:this={measureContainer}>
<GridCell width="auto">
<div class="buttons">
{#each buttons as button}
<Button size="S">
{button.text || "Button"}
</Button>
{/each}
</div>
</GridCell>
</div>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="button-column" class="button-column"
@ -72,6 +59,7 @@
class="row" class="row"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
bind:this={measureContainer}
> >
<GridCell <GridCell
width="auto" width="auto"
@ -91,6 +79,9 @@
overBackground={button.type === "overBackground"} overBackground={button.type === "overBackground"}
on:click={() => handleClick(button, row)} on:click={() => handleClick(button, row)}
> >
{#if button.icon}
<i class="{button.icon} S" />
{/if}
{button.text || "Button"} {button.text || "Button"}
</Button> </Button>
{/each} {/each}
@ -130,16 +121,14 @@
gap: var(--cell-padding); gap: var(--cell-padding);
height: inherit; height: inherit;
} }
.buttons :global(.spectrum-Button-Label) {
display: flex;
align-items: center;
gap: 4px;
}
/* Add left cell border */ /* Add left cell border */
.button-column :global(.cell) { .button-column :global(.cell) {
border-left: var(--cell-border); border-left: var(--cell-border);
} }
/* Hidden copy of buttons to measure width against */
.measure {
position: absolute;
opacity: 0;
pointer-events: none;
}
</style> </style>