diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx index 009ecf4..ef5022c 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx @@ -25,15 +25,16 @@ const SingleKeyframePropLabel = styled.div` font-size: 11px; line-height: 13px; letter-spacing: 0.01em; - margin-right: 12px; - padding: 8px; + padding: 6px 6px 6px 0; + + width: 40%; color: #919191; + + overflow: hidden; ` -const Indent = styled.div` - margin-left: 24px; -` +const INDENT_PX = 10 /** * Given a propConfig, this function gives the corresponding prop editor for @@ -46,54 +47,64 @@ const Indent = styled.div` * @param p - propConfig object for any type of prop. */ export function DeterminePropEditorForKeyframeTree( - p: EditingOptionsTree & {autoFocusInput?: boolean}, + p: EditingOptionsTree & {autoFocusInput?: boolean; indent: number}, ) { if (p.type === 'sheetObject') { return ( <> - + {p.sheetObject.address.objectKey} - - {p.children.map((c, i) => ( - - ))} - + {p.children.map((c, i) => ( + + ))} ) } else if (p.type === 'propWithChildren') { const label = p.propConfig.label ?? last(p.pathToProp) return ( <> - {label} - - {p.children.map((c, i) => ( - - ))} - + + {label} + + {p.children.map((c, i) => ( + + ))} ) } else { - return + return ( + + ) } } const SingleKeyframeSimplePropEditorContainer = styled.div` - padding: 0 6px; display: flex; align-items: center; + width: 60%; ` function PrimitivePropEditor( - p: PrimitivePropEditingOptions & {autoFocusInput?: boolean}, + p: PrimitivePropEditingOptions & {autoFocusInput?: boolean; indent: number}, ) { const label = p.propConfig.label ?? last(p.pathToProp) const editingTools = useEditingToolsForKeyframeEditorPopover(p) @@ -107,7 +118,11 @@ function PrimitivePropEditor( ] as React.VFC> return ( - {label} + + + {label} + + ( - {!Array.isArray(props) - ? undefined - : props.map((prop, i) => ( - - ))} +
+ {!Array.isArray(props) + ? undefined + : props.map((prop, i) => ( + + ))} +
)) }