Improve gutter cell usage
This commit is contained in:
parent
5155727b56
commit
98430138fe
3 changed files with 14 additions and 12 deletions
|
@ -11,6 +11,7 @@
|
||||||
export let rowSelected
|
export let rowSelected
|
||||||
export let disableExpand = false
|
export let disableExpand = false
|
||||||
export let disableNumber = false
|
export let disableNumber = false
|
||||||
|
export let defaultHeight = false
|
||||||
|
|
||||||
const { config, dispatch, selectedRows } = getContext("grid")
|
const { config, dispatch, selectedRows } = getContext("grid")
|
||||||
const svelteDispatch = createEventDispatcher()
|
const svelteDispatch = createEventDispatcher()
|
||||||
|
@ -44,6 +45,7 @@
|
||||||
width={GutterWidth}
|
width={GutterWidth}
|
||||||
highlighted={rowFocused || rowHovered}
|
highlighted={rowFocused || rowHovered}
|
||||||
selected={rowSelected}
|
selected={rowSelected}
|
||||||
|
{defaultHeight}
|
||||||
>
|
>
|
||||||
<div class="gutter">
|
<div class="gutter">
|
||||||
{#if $$slots.default}
|
{#if $$slots.default}
|
||||||
|
@ -111,6 +113,7 @@
|
||||||
.expand {
|
.expand {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
.expand.visible {
|
.expand.visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition"
|
||||||
import { GutterWidth } from "../lib/constants"
|
import { GutterWidth } from "../lib/constants"
|
||||||
import { NewRowID } from "../lib/constants"
|
import { NewRowID } from "../lib/constants"
|
||||||
|
import GutterCell from "../cells/GutterCell.svelte"
|
||||||
|
|
||||||
const {
|
const {
|
||||||
hoveredRowId,
|
hoveredRowId,
|
||||||
|
@ -116,16 +117,9 @@
|
||||||
transition:fade={{ duration: 130 }}
|
transition:fade={{ duration: 130 }}
|
||||||
style="flex: 0 0 {width}px"
|
style="flex: 0 0 {width}px"
|
||||||
>
|
>
|
||||||
<GridCell width={GutterWidth} rowFocused>
|
<GutterCell on:expand={addViaModal} rowHovered>
|
||||||
<div class="gutter">
|
|
||||||
<div class="number">
|
|
||||||
<Icon name="Add" />
|
<Icon name="Add" />
|
||||||
</div>
|
</GutterCell>
|
||||||
{#if $config.allowExpandRows}
|
|
||||||
<Icon name="Maximize" size="S" hoverable on:click={addViaModal} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</GridCell>
|
|
||||||
{#if $stickyColumn}
|
{#if $stickyColumn}
|
||||||
{@const cellId = `new-${$stickyColumn.name}`}
|
{@const cellId = `new-${$stickyColumn.name}`}
|
||||||
<DataCell
|
<DataCell
|
||||||
|
@ -178,7 +172,7 @@
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
.container :global(.cell) {
|
.container :global(.cell) {
|
||||||
--cell-background: var(--spectrum-global-color-gray-75);
|
--cell-background: var(--spectrum-global-color-gray-75) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Underlay sits behind everything */
|
/* Underlay sits behind everything */
|
||||||
|
|
|
@ -46,7 +46,12 @@
|
||||||
class:scrolled={$scrollLeft > 0}
|
class:scrolled={$scrollLeft > 0}
|
||||||
>
|
>
|
||||||
<div class="header row">
|
<div class="header row">
|
||||||
<GutterCell disableExpand disableNumber on:select={selectAll} />
|
<GutterCell
|
||||||
|
disableExpand
|
||||||
|
disableNumber
|
||||||
|
on:select={selectAll}
|
||||||
|
defaultHeight
|
||||||
|
/>
|
||||||
{#if $stickyColumn}
|
{#if $stickyColumn}
|
||||||
<HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
|
<HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
Loading…
Reference in a new issue