From 0fbe1e36d6f8dc5b8a3430bc6d9ef8a7e85e1738 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 24 May 2024 13:12:44 +0100 Subject: [PATCH] Add icons to grid buttons and simplify button column --- .../src/components/app/GridBlock.svelte | 1 + .../grid/layout/ButtonColumn.svelte | 29 ++++++------------- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 7a07ceb6e1..dbd651b533 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -105,6 +105,7 @@ size: "M", text: settings.text, type: settings.type, + icon: settings.icon, onClick: async row => { // Create a fake, ephemeral context to run the buttons actions with const id = get(component).id diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte index 3b160ba845..3448042894 100644 --- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte @@ -43,19 +43,6 @@ }) - -
- -
- {#each buttons as button} - - {/each} -
-
-
-
($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} + bind:this={measureContainer} > handleClick(button, row)} > + {#if button.icon} + + {/if} {button.text || "Button"} {/each} @@ -130,16 +121,14 @@ gap: var(--cell-padding); height: inherit; } + .buttons :global(.spectrum-Button-Label) { + display: flex; + align-items: center; + gap: 4px; + } /* Add left cell border */ .button-column :global(.cell) { border-left: var(--cell-border); } - - /* Hidden copy of buttons to measure width against */ - .measure { - position: absolute; - opacity: 0; - pointer-events: none; - }