Fix issue with button column width and allow collapsed button groups to use a secondary variant
This commit is contained in:
parent
1bbbeab25b
commit
da6ce2256a
|
@ -10,6 +10,7 @@
|
||||||
export let align = "left"
|
export let align = "left"
|
||||||
export let offset
|
export let offset
|
||||||
export let animate
|
export let animate
|
||||||
|
export let secondary = false
|
||||||
|
|
||||||
let anchor
|
let anchor
|
||||||
let popover
|
let popover
|
||||||
|
@ -24,7 +25,8 @@
|
||||||
bind:ref={anchor}
|
bind:ref={anchor}
|
||||||
{size}
|
{size}
|
||||||
icon="ChevronDown"
|
icon="ChevronDown"
|
||||||
cta
|
cta={!secondary}
|
||||||
|
{secondary}
|
||||||
on:click={() => popover?.show()}
|
on:click={() => popover?.show()}
|
||||||
on:click
|
on:click
|
||||||
>
|
>
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const observer = new ResizeObserver(entries => {
|
const observer = new ResizeObserver(entries => {
|
||||||
const width = entries?.[0]?.contentRect?.width ?? 0
|
const width = entries?.[0]?.contentRect?.width ?? 0
|
||||||
buttonColumnWidth.set(width)
|
buttonColumnWidth.set(width - 1)
|
||||||
})
|
})
|
||||||
observer.observe(container)
|
observer.observe(container)
|
||||||
})
|
})
|
||||||
|
@ -68,7 +68,6 @@
|
||||||
class="button-column"
|
class="button-column"
|
||||||
style="left:{left}px"
|
style="left:{left}px"
|
||||||
class:hidden={$buttonColumnWidth === 0}
|
class:hidden={$buttonColumnWidth === 0}
|
||||||
class:right-border={left !== gridEnd}
|
|
||||||
>
|
>
|
||||||
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
|
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
|
||||||
<GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
|
<GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
|
||||||
|
@ -99,6 +98,7 @@
|
||||||
align="right"
|
align="right"
|
||||||
offset={5}
|
offset={5}
|
||||||
size="S"
|
size="S"
|
||||||
|
secondary
|
||||||
animate={false}
|
animate={false}
|
||||||
on:mouseenter={() => ($hoveredRowId = row._id)}
|
on:mouseenter={() => ($hoveredRowId = row._id)}
|
||||||
/>
|
/>
|
||||||
|
@ -188,7 +188,4 @@
|
||||||
.button-column :global(.cell) {
|
.button-column :global(.cell) {
|
||||||
border-left: var(--cell-border);
|
border-left: var(--cell-border);
|
||||||
}
|
}
|
||||||
.button-column:not(.right-border) :global(.cell) {
|
|
||||||
border-right-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue