variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix indentation in aggregate editor popover

Browse source 
Co-authored-by: Fülöp <fulopkovacs@users.noreply.github.com>
This commit is contained in:
vezwork 2022-08-10 09:23:10 -04:00 committed by Elliot
parent 047f01bb45
commit 0875b785ce
2 changed files with 57 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx
View file

@ -25,15 +25,16 @@ const SingleKeyframePropLabel = styled.div`
font-size: 11px; font-size: 11px;
line-height: 13px; line-height: 13px;
letter-spacing: 0.01em; letter-spacing: 0.01em;
margin-right: 12px; padding: 6px 6px 6px 0;
padding: 8px;
width: 40%;
color: #919191; color: #919191;
overflow: hidden;
` `
const Indent = styled.div` const INDENT_PX = 10
margin-left: 24px;
`
/** /**
* Given a propConfig, this function gives the corresponding prop editor for * 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. * @param p - propConfig object for any type of prop.
*/ */
export function DeterminePropEditorForKeyframeTree( export function DeterminePropEditorForKeyframeTree(
p: EditingOptionsTree & {autoFocusInput?: boolean}, p: EditingOptionsTree & {autoFocusInput?: boolean; indent: number},
) { ) {
if (p.type === 'sheetObject') { if (p.type === 'sheetObject') {
return ( return (
<> <>
<SingleKeyframePropLabel> <SingleKeyframePropLabel
style={{paddingLeft: `${p.indent * INDENT_PX}px`}}
>
{p.sheetObject.address.objectKey} {p.sheetObject.address.objectKey}
</SingleKeyframePropLabel> </SingleKeyframePropLabel>
<Indent> {p.children.map((c, i) => (
{p.children.map((c, i) => ( <DeterminePropEditorForKeyframeTree
<DeterminePropEditorForKeyframeTree key={i}
key={i} {...c}
{...c} autoFocusInput={p.autoFocusInput && i === 0}
autoFocusInput={p.autoFocusInput && i === 0} indent={p.indent + 1}
/> />
))} ))}
</Indent>
</> </>
) )
} else if (p.type === 'propWithChildren') { } else if (p.type === 'propWithChildren') {
const label = p.propConfig.label ?? last(p.pathToProp) const label = p.propConfig.label ?? last(p.pathToProp)
return ( return (
<> <>
<SingleKeyframePropLabel>{label}</SingleKeyframePropLabel> <SingleKeyframePropLabel
<Indent> style={{paddingLeft: `${p.indent * INDENT_PX}px`}}
{p.children.map((c, i) => ( >
<DeterminePropEditorForKeyframeTree {label}
key={i} </SingleKeyframePropLabel>
{...c} {p.children.map((c, i) => (
autoFocusInput={p.autoFocusInput && i === 0} <DeterminePropEditorForKeyframeTree
/> key={i}
))} {...c}
</Indent> autoFocusInput={p.autoFocusInput && i === 0}
indent={p.indent + 1}
/>
))}
</> </>
) )
} else { } else {
return <PrimitivePropEditor {...p} autoFocusInput={p.autoFocusInput} /> return (
<PrimitivePropEditor
{...p}
autoFocusInput={p.autoFocusInput}
indent={p.indent}
/>
)
} }
} }
const SingleKeyframeSimplePropEditorContainer = styled.div` const SingleKeyframeSimplePropEditorContainer = styled.div`
padding: 0 6px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 60%;
` `
function PrimitivePropEditor( function PrimitivePropEditor(
p: PrimitivePropEditingOptions & {autoFocusInput?: boolean}, p: PrimitivePropEditingOptions & {autoFocusInput?: boolean; indent: number},
) { ) {
const label = p.propConfig.label ?? last(p.pathToProp) const label = p.propConfig.label ?? last(p.pathToProp)
const editingTools = useEditingToolsForKeyframeEditorPopover(p) const editingTools = useEditingToolsForKeyframeEditorPopover(p)
@ -107,7 +118,11 @@ function PrimitivePropEditor(
] as React.VFC<ISimplePropEditorReactProps<PropTypeConfig_AllSimples>> ] as React.VFC<ISimplePropEditorReactProps<PropTypeConfig_AllSimples>>
return ( return (
<SingleKeyframePropEditorContainer> <SingleKeyframePropEditorContainer>
<SingleKeyframePropLabel>{label}</SingleKeyframePropLabel> <SingleKeyframePropLabel>
<span style={{paddingLeft: `${p.indent * INDENT_PX}px`}}>
{label}
</span>
</SingleKeyframePropLabel>
<SingleKeyframeSimplePropEditorContainer> <SingleKeyframeSimplePropEditorContainer>
<PropEditor <PropEditor
editingTools={editingTools} editingTools={editingTools}

21
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx
View file

@ -19,15 +19,18 @@ export function useKeyframeInlineEditorPopover(
) { ) {
return usePopover({debugName: 'useKeyframeInlineEditorPopover'}, () => ( return usePopover({debugName: 'useKeyframeInlineEditorPopover'}, () => (
<BasicPopover showPopoverEdgeTriangle> <BasicPopover showPopoverEdgeTriangle>
{!Array.isArray(props) <div style={{margin: '1px 2px 1px 10px'}}>
? undefined {!Array.isArray(props)
: props.map((prop, i) => ( ? undefined
<DeterminePropEditorForKeyframeTree : props.map((prop, i) => (
key={i} <DeterminePropEditorForKeyframeTree
{...prop} key={i}
autoFocusInput={i === 0} {...prop}
/> autoFocusInput={i === 0}
))} indent={0}
/>
))}
</div>
</BasicPopover> </BasicPopover>
)) ))
} }