1be9b2612c
* Move format code button to menu item by extending CollapsiblePanel to take an optional menu React element. Signed-off-by: Frank Noirot <frank@kittycad.io> * Style tweaks * Add shortcuts for format and cmd bar to codemirror * Move convert to variable into code menu Signed off by Frank Noirot <frank@kittycad.io> * Add keyboard shortcut to convert to variable * Remove convert to variable from toolbar * Refactor: move TextEditor to its own component * Set a better convertToVar shortcut * Style and ergonomic polish for convertToVar modal * Use named constants for shortcuts 😇 * Try yet another keyboard shortcut * Fix formatting * remove isShiftDown from app.tsx --------- Signed-off-by: Frank Noirot <frank@kittycad.io> Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>
71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
|
|
import { ActionIcon } from './ActionIcon'
|
|
import styles from './CollapsiblePanel.module.css'
|
|
|
|
export interface CollapsiblePanelProps
|
|
extends React.PropsWithChildren,
|
|
React.HTMLAttributes<HTMLDetailsElement> {
|
|
title: string
|
|
icon?: IconDefinition
|
|
open?: boolean
|
|
menu?: React.ReactNode
|
|
iconClassNames?: {
|
|
bg?: string
|
|
icon?: string
|
|
}
|
|
}
|
|
|
|
export const PanelHeader = ({
|
|
title,
|
|
icon,
|
|
iconClassNames,
|
|
menu,
|
|
}: CollapsiblePanelProps) => {
|
|
return (
|
|
<summary className={styles.header}>
|
|
<div className="flex gap-2 align-center flex-1">
|
|
<ActionIcon
|
|
icon={icon}
|
|
bgClassName={
|
|
'bg-chalkboard-30 dark:bg-chalkboard-90 group-open:bg-chalkboard-80 rounded ' +
|
|
(iconClassNames?.bg || '')
|
|
}
|
|
iconClassName={
|
|
'text-chalkboard-90 dark:text-chalkboard-40 group-open:text-liquid-10 ' +
|
|
(iconClassNames?.icon || '')
|
|
}
|
|
/>
|
|
{title}
|
|
</div>
|
|
<div className="group-open:opacity-100 opacity-0 group-open:pointer-events-auto pointer-events-none">
|
|
{menu}
|
|
</div>
|
|
</summary>
|
|
)
|
|
}
|
|
|
|
export const CollapsiblePanel = ({
|
|
title,
|
|
icon,
|
|
children,
|
|
className,
|
|
iconClassNames,
|
|
menu,
|
|
...props
|
|
}: CollapsiblePanelProps) => {
|
|
return (
|
|
<details
|
|
{...props}
|
|
className={styles.panel + ' group ' + (className || '')}
|
|
>
|
|
<PanelHeader
|
|
title={title}
|
|
icon={icon}
|
|
iconClassNames={iconClassNames}
|
|
menu={menu}
|
|
/>
|
|
{children}
|
|
</details>
|
|
)
|
|
}
|