diff --git a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte index e5f674c6ec..9b86a3905c 100644 --- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte @@ -80,8 +80,18 @@ open = false } - const makeDisplayColumn = async () => { - await columns.actions.changePrimaryDisplay(column.name) + const moveStart = () => { + reorder.actions.moveColumnToStart(column.name) + open = false + } + + const moveEnd = () => { + reorder.actions.moveColumnToEnd(column.name) + open = false + } + + const makeDisplayColumn = () => { + columns.actions.changePrimaryDisplay(column.name) open = false } @@ -141,24 +151,40 @@ animate={false} > - {#if $config.allowEditColumns} - Edit column - {/if} - Sort A-Z - Sort Z-A - - Move left - - - Move right - + Edit column Use as display column + Sort A-Z + Sort Z-A + + Move to start + + + Move left + + + Move right + + + Move to end + diff --git a/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte b/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte index cc11d16356..2cefa073f5 100644 --- a/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte +++ b/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte @@ -33,7 +33,7 @@ transform: rotate(-20deg); background: linear-gradient( to top, - var(--cell-background) 10%, + var(--cell-background) 20%, transparent ); } diff --git a/packages/frontend-core/src/components/sheet/stores/reorder.js b/packages/frontend-core/src/components/sheet/stores/reorder.js index 652ecf2152..37b28e17db 100644 --- a/packages/frontend-core/src/components/sheet/stores/reorder.js +++ b/packages/frontend-core/src/components/sheet/stores/reorder.js @@ -1,5 +1,4 @@ import { get, writable, derived } from "svelte/store" -import { cloneDeep } from "lodash/fp" const reorderInitialState = { sourceColumn: null, @@ -24,17 +23,8 @@ export const createStores = () => { } export const deriveStores = context => { - const { - reorder, - columns, - visibleColumns, - scroll, - bounds, - stickyColumn, - ui, - table, - API, - } = context + const { reorder, columns, visibleColumns, scroll, bounds, stickyColumn, ui } = + context // Callback when dragging on a colum header and starting reordering const startReordering = (column, e) => { @@ -132,6 +122,17 @@ export const deriveStores = context => { }) } + const moveColumnToStart = async column => { + moveColumn(column, null) + await columns.actions.saveChanges() + } + + const moveColumnToEnd = async column => { + const $visibleColumns = get(visibleColumns) + moveColumn(column, $visibleColumns[$visibleColumns.length - 1]?.name) + await columns.actions.saveChanges() + } + // Moves a column one place left (as appears visually) const moveColumnLeft = async column => { const $visibleColumns = get(visibleColumns) @@ -159,6 +160,8 @@ export const deriveStores = context => { stopReordering, moveColumnLeft, moveColumnRight, + moveColumnToStart, + moveColumnToEnd, }, }, }