Merge pull request #13769 from Budibase/add-icons-to-grid-buttons
Add icons to grid buttons and simplify button column
This commit is contained in:
commit
55a418c19c
2 changed files with 10 additions and 20 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue