From ba9691ee12aa04d31089db3dc90690dfb079a0c0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 16 May 2023 17:09:32 +0100 Subject: [PATCH] Add grid flag to stripe rows different colours --- .../src/components/grid/cells/DataCell.svelte | 2 ++ .../src/components/grid/cells/GridCell.svelte | 13 +++++++++---- .../src/components/grid/cells/GutterCell.svelte | 1 + .../src/components/grid/layout/Grid.svelte | 8 ++++++++ .../src/components/grid/layout/GridBody.svelte | 6 +++++- .../src/components/grid/layout/GridRow.svelte | 5 +++-- .../src/components/grid/layout/NewRow.svelte | 4 ++-- .../src/components/grid/layout/StickyColumn.svelte | 3 ++- 8 files changed, 32 insertions(+), 10 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte index f39b820632..cb8616a735 100644 --- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte @@ -11,6 +11,7 @@ export let selected export let rowFocused export let rowIdx + export let topRow = false export let focused export let selectedUser export let column @@ -68,6 +69,7 @@ {highlighted} {selected} {rowIdx} + {topRow} {focused} {selectedUser} {readonly} diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte index 6589c18d07..7e38a989d6 100644 --- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte @@ -6,6 +6,7 @@ export let selectedUser = null export let error = null export let rowIdx + export let topRow = false export let defaultHeight = false export let center = false export let readonly = false @@ -31,13 +32,14 @@ class:readonly class:default-height={defaultHeight} class:selected-other={selectedUser != null} + class:alt={rowIdx % 2 === 1} + class:top={topRow} on:focus on:mousedown on:mouseup on:click on:contextmenu {style} - data-row={rowIdx} > {#if error}
@@ -70,6 +72,9 @@ width: 0; --cell-color: transparent; } + .cell.alt { + --cell-background: var(--cell-background-alt); + } .cell.default-height { height: var(--default-row-height); } @@ -98,8 +103,8 @@ .cell.selected-other:not(.focused):after { border-radius: 0 2px 2px 2px; } - .cell[data-row="0"].error:after, - .cell[data-row="0"].selected-other:not(.focused):after { + .cell.top.error:after, + .cell.top.selected-other:not(.focused):after { border-radius: 2px 2px 2px 0; } @@ -152,7 +157,7 @@ overflow: hidden; user-select: none; } - .cell[data-row="0"] .label { + .cell.top .label { bottom: auto; top: 100%; border-radius: 0 2px 2px 2px; diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte index 588818f10d..56c4c20d54 100644 --- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte @@ -38,6 +38,7 @@ highlighted={rowFocused || rowHovered} selected={rowSelected} {defaultHeight} + rowIdx={row?.__idx} >
{#if $$slots.default} diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 2035ec4d39..314479f519 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -40,6 +40,7 @@ export let allowExpandRows = true export let allowEditRows = true export let allowDeleteRows = true + export let stripeRows = false // Unique identifier for DOM nodes inside this instance const rand = Math.random() @@ -54,6 +55,7 @@ allowExpandRows, allowEditRows, allowDeleteRows, + stripeRows, }) // Build up context @@ -88,6 +90,7 @@ allowExpandRows, allowEditRows, allowDeleteRows, + stripeRows, }) // Set context for children to consume @@ -105,6 +108,7 @@ id="grid-{rand}" class:is-resizing={$isResizing} class:is-reordering={$isReordering} + class:stripe={$config.stripeRows} style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};" >
@@ -167,6 +171,7 @@ /* Variables */ --cell-background: var(--spectrum-global-color-gray-50); --cell-background-hover: var(--spectrum-global-color-gray-100); + --cell-background-alt: var(--cell-background); --cell-padding: 8px; --cell-spacing: 4px; --cell-border: 1px solid var(--spectrum-global-color-gray-200); @@ -183,6 +188,9 @@ .grid.is-reordering :global(*) { cursor: grabbing !important; } + .grid.stripe { + --cell-background-alt: var(--spectrum-global-color-gray-75); + } .grid-data-outer, .grid-data-inner { diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte index 67f5f03898..016369df49 100644 --- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte @@ -36,7 +36,11 @@
{#each $renderedRows as row, idx} - = $rowVerticalInversionIndex} /> + = $rowVerticalInversionIndex} + /> {/each} {#if $config.allowAddRows && $renderedColumns.length}
= $columnHorizontalInversionIndex} highlighted={rowHovered || rowFocused || reorderSource === column.name} selected={rowSelected} - rowIdx={idx} + rowIdx={row.__idx} + topRow={top} focused={$focusedCellId === cellId} selectedUser={$selectedCellMap[cellId]} width={column.width} diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte index f705881a8d..85b430f79b 100644 --- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte @@ -167,7 +167,7 @@ focused={$focusedCellId === cellId} width={$stickyColumn.width} {updateValue} - rowIdx={0} + topRow={offset === 0} {invertY} > {#if $stickyColumn?.schema?.autocolumn} @@ -193,7 +193,7 @@ row={newRow} focused={$focusedCellId === cellId} width={column.width} - rowIdx={0} + topRow={offset === 0} invertX={columnIdx >= $columnHorizontalInversionIndex} {invertY} > diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index 6301112110..801772ed51 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -82,7 +82,8 @@ {rowFocused} selected={rowSelected} highlighted={rowHovered || rowFocused} - rowIdx={idx} + rowIdx={row.__idx} + topRow={idx === 0} focused={$focusedCellId === cellId} selectedUser={$selectedCellMap[cellId]} width={$stickyColumn.width}