From 0875b785cef26895dc8d1d8381077c01d9b68590 Mon Sep 17 00:00:00 2001
From: vezwork <elliot@theatrejs.com>
Date: Wed, 10 Aug 2022 09:23:10 -0400
Subject: [PATCH] Fix indentation in aggregate editor popover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fülöp <fulopkovacs@users.noreply.github.com>
---
 .../DeterminePropEditorForSingleKeyframe.tsx  | 75 +++++++++++--------
 .../useSingleKeyframeInlineEditorPopover.tsx  | 21 +++---
 2 files changed, 57 insertions(+), 39 deletions(-)

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 (
       <>
-        <SingleKeyframePropLabel>
+        <SingleKeyframePropLabel
+          style={{paddingLeft: `${p.indent * INDENT_PX}px`}}
+        >
           {p.sheetObject.address.objectKey}
         </SingleKeyframePropLabel>
-        <Indent>
-          {p.children.map((c, i) => (
-            <DeterminePropEditorForKeyframeTree
-              key={i}
-              {...c}
-              autoFocusInput={p.autoFocusInput && i === 0}
-            />
-          ))}
-        </Indent>
+        {p.children.map((c, i) => (
+          <DeterminePropEditorForKeyframeTree
+            key={i}
+            {...c}
+            autoFocusInput={p.autoFocusInput && i === 0}
+            indent={p.indent + 1}
+          />
+        ))}
       </>
     )
   } else if (p.type === 'propWithChildren') {
     const label = p.propConfig.label ?? last(p.pathToProp)
     return (
       <>
-        <SingleKeyframePropLabel>{label}</SingleKeyframePropLabel>
-        <Indent>
-          {p.children.map((c, i) => (
-            <DeterminePropEditorForKeyframeTree
-              key={i}
-              {...c}
-              autoFocusInput={p.autoFocusInput && i === 0}
-            />
-          ))}
-        </Indent>
+        <SingleKeyframePropLabel
+          style={{paddingLeft: `${p.indent * INDENT_PX}px`}}
+        >
+          {label}
+        </SingleKeyframePropLabel>
+        {p.children.map((c, i) => (
+          <DeterminePropEditorForKeyframeTree
+            key={i}
+            {...c}
+            autoFocusInput={p.autoFocusInput && i === 0}
+            indent={p.indent + 1}
+          />
+        ))}
       </>
     )
   } else {
-    return <PrimitivePropEditor {...p} autoFocusInput={p.autoFocusInput} />
+    return (
+      <PrimitivePropEditor
+        {...p}
+        autoFocusInput={p.autoFocusInput}
+        indent={p.indent}
+      />
+    )
   }
 }
 
 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<ISimplePropEditorReactProps<PropTypeConfig_AllSimples>>
     return (
       <SingleKeyframePropEditorContainer>
-        <SingleKeyframePropLabel>{label}</SingleKeyframePropLabel>
+        <SingleKeyframePropLabel>
+          <span style={{paddingLeft: `${p.indent * INDENT_PX}px`}}>
+            {label}
+          </span>
+        </SingleKeyframePropLabel>
         <SingleKeyframeSimplePropEditorContainer>
           <PropEditor
             editingTools={editingTools}
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx
index 29991de..0b454bb 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx
@@ -19,15 +19,18 @@ export function useKeyframeInlineEditorPopover(
 ) {
   return usePopover({debugName: 'useKeyframeInlineEditorPopover'}, () => (
     <BasicPopover showPopoverEdgeTriangle>
-      {!Array.isArray(props)
-        ? undefined
-        : props.map((prop, i) => (
-            <DeterminePropEditorForKeyframeTree
-              key={i}
-              {...prop}
-              autoFocusInput={i === 0}
-            />
-          ))}
+      <div style={{margin: '1px 2px 1px 10px'}}>
+        {!Array.isArray(props)
+          ? undefined
+          : props.map((prop, i) => (
+              <DeterminePropEditorForKeyframeTree
+                key={i}
+                {...prop}
+                autoFocusInput={i === 0}
+                indent={0}
+              />
+            ))}
+      </div>
     </BasicPopover>
   ))
 }