Persist row height as table metadata

This commit is contained in:
Andrew Kingston 2023-04-17 15:53:20 +01:00
parent 6c5ac00acb
commit 730fe0a8ea
3 changed files with 19 additions and 4 deletions

View File

@ -7,7 +7,7 @@
SmallRowHeight, SmallRowHeight,
} from "../lib/constants" } from "../lib/constants"
const { rowHeight, loaded } = getContext("sheet") const { rowHeight, loaded, columns, table } = getContext("sheet")
const sizeOptions = [ const sizeOptions = [
{ {
label: "Small", label: "Small",
@ -25,6 +25,13 @@
let open = false let open = false
let anchor let anchor
const changeRowHeight = height => {
columns.actions.saveTable({
...$table,
rowHeight: height,
})
}
</script> </script>
<div bind:this={anchor}> <div bind:this={anchor}>
@ -46,7 +53,7 @@
<ActionButton <ActionButton
quiet quiet
selected={$rowHeight === option.size} selected={$rowHeight === option.size}
on:click={() => rowHeight.set(option.size)} on:click={() => changeRowHeight(option.size)}
> >
{option.label} {option.label}
</ActionButton> </ActionButton>

View File

@ -103,6 +103,7 @@ export const deriveStores = context => {
...columns, ...columns,
actions: { actions: {
saveChanges, saveChanges,
saveTable,
changePrimaryDisplay, changePrimaryDisplay,
}, },
}, },

View File

@ -1,8 +1,8 @@
import { writable, get, derived } from "svelte/store" import { writable, get, derived } from "svelte/store"
import { import {
DefaultRowHeight,
LargeRowHeight, LargeRowHeight,
MediumRowHeight, MediumRowHeight,
SmallRowHeight,
} from "../lib/constants" } from "../lib/constants"
export const createStores = () => { export const createStores = () => {
@ -10,7 +10,7 @@ export const createStores = () => {
const focusedCellAPI = writable(null) const focusedCellAPI = writable(null)
const selectedRows = writable({}) const selectedRows = writable({})
const hoveredRowId = writable(null) const hoveredRowId = writable(null)
const rowHeight = writable(36) const rowHeight = writable(DefaultRowHeight)
const previousFocusedRowId = writable(null) const previousFocusedRowId = writable(null)
// Derive the current focused row ID // Derive the current focused row ID
@ -96,6 +96,8 @@ export const initialise = context => {
focusedCellId, focusedCellId,
selectedRows, selectedRows,
hoveredRowId, hoveredRowId,
table,
rowHeight,
} = context } = context
// Ensure we clear invalid rows from state if they disappear // Ensure we clear invalid rows from state if they disappear
@ -158,4 +160,9 @@ export const initialise = context => {
hoveredRowId.set(null) hoveredRowId.set(null)
} }
}) })
// Pull row height from table
table.subscribe($table => {
rowHeight.set($table?.rowHeight || DefaultRowHeight)
})
} }