Persist row height as table metadata
This commit is contained in:
parent
6c5ac00acb
commit
730fe0a8ea
|
@ -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>
|
||||||
|
|
|
@ -103,6 +103,7 @@ export const deriveStores = context => {
|
||||||
...columns,
|
...columns,
|
||||||
actions: {
|
actions: {
|
||||||
saveChanges,
|
saveChanges,
|
||||||
|
saveTable,
|
||||||
changePrimaryDisplay,
|
changePrimaryDisplay,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -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)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue