diff --git a/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte b/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte new file mode 100644 index 0000000000..5024a24ea7 --- /dev/null +++ b/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte @@ -0,0 +1,53 @@ + + +
+ {#each parsedKeys as key} +
+ {key} +
+ {/each} +
+ + diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte index 607dc9e1f0..71c390c946 100644 --- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte @@ -7,6 +7,7 @@ import { GutterWidth } from "../lib/constants" import { NewRowID } from "../lib/constants" import GutterCell from "../cells/GutterCell.svelte" + import KeyboardShortcut from "./KeyboardShortcut.svelte" const { hoveredRowId, @@ -209,8 +210,18 @@
- - + +
{/if} @@ -261,6 +272,14 @@ top: calc(var(--row-height) + var(--offset) + 24px); left: var(--gutter-width); } + .button-with-keys { + display: flex; + gap: 6px; + align-items: center; + } + .button-with-keys :global(> div) { + padding-top: 2px; + } /* Sticky column styles */ .sticky-column { diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index 44be0777cf..6301112110 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -7,6 +7,7 @@ import HeaderCell from "../cells/HeaderCell.svelte" import { GutterWidth, BlankRowID } from "../lib/constants" import GutterCell from "../cells/GutterCell.svelte" + import KeyboardShortcut from "./KeyboardShortcut.svelte" const { rows, @@ -105,7 +106,9 @@ + > + + {/if} {/if}