Put keystrokes in their own column

This requires rendering the menu for measurement in a totally different way, where the top level is a flex row. We don't want to render the menu like this for presentation because of hovers / highlights on individual items needing to include the keystrokes.

Co-Authored-By: Antonio Scandurra <me@as-cii.com>
This commit is contained in:
Nathan Sobo 2022-05-25 10:20:56 -06:00 committed by Antonio Scandurra
parent a8483ba458
commit c0aafac387
2 changed files with 94 additions and 58 deletions

View file

@ -1,10 +1,9 @@
import Theme from "../themes/common/theme";
import { shadow, text } from "./components";
import { backgroundColor, shadow, text } from "./components";
export default function contextMenu(theme: Theme) {
return {
background: "#ff0000",
// background: backgroundColor(theme, 300, "base"),
background: backgroundColor(theme, 300, "base"),
cornerRadius: 6,
padding: {
bottom: 2,
@ -15,7 +14,10 @@ export default function contextMenu(theme: Theme) {
shadow: shadow(theme),
item: {
label: text(theme, "sans", "secondary", { size: "sm" }),
keystroke: text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
keystroke: {
margin: { left: 60 },
...text(theme, "sans", "muted", { size: "sm", weight: "bold" })
},
},
separator: {
background: "#00ff00"