Better horizontal alignment for prop editors

theatre/studio/src/UIRoot/PanelsRoot.tsx

@@ -1,7 +1,6 @@
 import OutlinePanel from '@theatre/studio/panels/OutlinePanel/OutlinePanel'
 import ObjectEditorPanel from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 import React from 'react'
-import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
 import getStudio from '@theatre/studio/getStudio'
 import {useVal} from '@theatre/dataverse-react'
 import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper'
@@ -16,10 +15,10 @@ const PanelsRoot: React.FC = () => {
 
   return (
     <>
-      {paneEls}
+      {/* {paneEls} */}
       <OutlinePanel />
       <ObjectEditorPanel />
-      <SequenceEditorPanel />
+      {/* <SequenceEditorPanel /> */}
     </>
   )
 }

theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx

@@ -16,6 +16,20 @@ const Container = styled(PanelWrapper)`
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
+  /* background-color: transparent; */
+  background-color: #282b2ff0;
+  box-shadow: none;
+
+  &:after {
+    position: absolute;
+    display: block;
+    content: ' ';
+    left: 0;
+    width: 1px;
+    bottom: 0;
+    top: 0;
+    border-left: 1px solid #3a3a44;
+  }
 `
 
 const emptyPanel = <Container />
@@ -34,6 +48,10 @@ export const F1 = styled.div`
   box-sizing: border-box;
 `
 
+const F1_1 = styled.div`
+  display: none;
+`
+
 export const Punctuation = styled.span`
   color: ${theme.panel.head.punctuation.color};
 `
@@ -47,6 +65,13 @@ export const F2 = styled.div`
   padding: 0;
 `
 
+const F2_2 = styled.div`
+  background: transparent;
+  flex-grow: 1;
+  overflow-y: scroll;
+  padding: 6px 0 0 0;
+`
+
 const defaultPosition: PanelPosition = {
   edges: {
     left: {from: 'screenRight', distance: 0.4},
@@ -83,14 +108,14 @@ const Content: React.FC<{}> = () => {
     return (
       <Container>
         <PanelDragZone>
-          <F1>
+          <F1_1>
             {obj.sheet.address.sheetId} <Punctuation>{':'}&nbsp;</Punctuation>
             {obj.sheet.address.sheetInstanceId}{' '}
             <Punctuation>&nbsp;{'>'}&nbsp;</Punctuation>
             {obj.address.objectKey}
-          </F1>
+          </F1_1>
         </PanelDragZone>
-        <F2>
+        <F2_2>
           <DeterminePropEditor
             key={key}
             obj={obj}
@@ -98,7 +123,7 @@ const Content: React.FC<{}> = () => {
             propConfig={obj.template.config}
             depth={1}
           />
-        </F2>
+        </F2_2>
       </Container>
     )
   }, [])

theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx

@@ -2,48 +2,71 @@ import type {PropTypeConfig_Compound} from '@theatre/core/propTypes'
 import {isPropConfigComposite} from '@theatre/shared/propTypes/utils'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import {theme} from '@theatre/studio/css'
-import {voidFn} from '@theatre/shared/utils'
 import {usePrism} from '@theatre/dataverse-react'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {getPointerParts} from '@theatre/dataverse'
 import last from 'lodash-es/last'
-import {darken} from 'polished'
+import {darken, transparentize} from 'polished'
 import React from 'react'
 import {HiOutlineChevronRight} from 'react-icons/all'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import DeterminePropEditor from './DeterminePropEditor'
-import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
 import {propNameText} from './utils/SingleRowPropEditor'
+import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator'
 
-const Container = styled.div<{depth: number}>`
+const Container = styled.div`
-  --depth: ${(props) => props.depth};
+  --step: 8px;
+  --left-pad: 18px;
+`
+
+export const rowBg = css`
+  /* &:after {
+    position: absolute;
+    display: block;
+    inset: 0px 0 0px calc(10px + var(--left-pad) + var(--depth) * var(--step));
+    content: ' ';
+    z-index: -1;
+    background-color: #282b2f;
+    opacity: 0.97;
+  } */
 `
 
 const Header = styled.div`
   height: 30px;
-  padding-left: calc(-8px + var(--depth) * 20px);
+  /* padding-left: calc(var(--left-pad) + var(--depth) * var(--step)); */
   display: flex;
   align-items: center;
-  color: ${theme.panel.body.compoudThing.label.color};
+  /* color: ${theme.panel.body.compoudThing.label.color}; */
+  position: relative;
+
+  ${rowBg};
 `
 
 const IconContainer = styled.div`
   width: 12px;
-  margin-right: 6px;
+  margin-right: -12px;
+  margin-left: calc(var(--left-pad) + var(--depth) * var(--step));
   font-size: 9px;
   text-align: center;
   transform: rotateZ(90deg);
+  position: relative;
+  left: -10px;
 `
 
 const PropName = styled.div`
-  margin-right: 4px;
+  margin-left: 4px;
   cursor: default;
-  ${propNameText}
+  height: 100%;
+  display: flex;
+  align-items: center;
+  ${() => propNameText};
 `
 
+const color = transparentize(0.05, `#282b2f`)
+
 const SubProps = styled.div<{depth: number; lastSubIsComposite: boolean}>`
-  background: ${({depth}) => darken(depth * 0.03, theme.panel.bg)};
+  /* background: ${({depth}) => darken(depth * 0.03, color)}; */
-  padding: ${(props) => (props.lastSubIsComposite ? 0 : '4px')} 0;
+  /* padding: ${(props) => (props.lastSubIsComposite ? 0 : '4px')} 0; */
 `
 
 const CompoundPropEditor: React.FC<{
@@ -66,21 +89,30 @@ const CompoundPropEditor: React.FC<{
 
   return usePrism(() => {
     return (
-      <Container depth={depth}>
+      <Container>
         {
-          <Header>
+          <Header
+            // @ts-ignore
+            style={{'--depth': depth - 1}}
+          >
             <IconContainer>
               <HiOutlineChevronRight />
             </IconContainer>
-            <PropName>{propName || 'props'}</PropName>
+            {/* <NextPrevKeyframeCursors
-            <NextPrevKeyframeCursors
               jumpToPosition={voidFn}
               toggleKeyframeOnCurrentPosition={voidFn}
-            />
+            /> */}
+            <DefaultOrStaticValueIndicator hasStaticOverride={false} />
+            <PropName>{propName || 'Props'}</PropName>
           </Header>
         }
 
-        <SubProps depth={depth} lastSubIsComposite={lastSubPropIsComposite}>
+        <SubProps
+          // @ts-ignore
+          style={{'--depth': depth}}
+          depth={depth}
+          lastSubIsComposite={lastSubPropIsComposite}
+        >
           {[...nonCompositeSubs, ...compositeSubs].map(
             ([subPropKey, subPropConfig]) => {
               return (

theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import styled, {css} from 'styled-components'
+import {rowBg} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor'
 
 export const propNameText = css`
   font-weight: 300;
@@ -24,14 +25,35 @@ const Row = styled.div`
   display: flex;
   height: 30px;
   justify-content: flex-start;
-  align-items: center;
+  align-items: stretch;
+  --right-width: 60%;
+  position: relative;
+
+  ${rowBg};
+`
+
+const Left = styled.div`
+  box-sizing: border-box;
+  padding-left: calc(var(--left-pad) + (var(--depth) + 1) * var(--step));
+  padding-right: 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  gap: 4px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: calc(100% - var(--right-width));
 `
 
 const PropNameContainer = styled.div`
-  margin-right: 4px;
+  text-align: left;
-  text-align: right;
+  flex: 1 0;
-  flex: 0 0;
+  white-space: nowrap;
-  flex-basis: 106px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 
   ${propNameText};
 `
@@ -39,16 +61,20 @@ const PropNameContainer = styled.div`
 const ControlsContainer = styled.div`
   flex-basis: 8px;
   flex: 0 0;
+  display: flex;
+  align-items: center;
 `
 
 const InputContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: stretch;
-  padding: 0 16px 0 2px;
+  padding: 0 8px 0 2px;
   box-sizing: border-box;
   height: 100%;
-  flex: 1 1;
+  width: var(--right-width);
+  flex-shrink: 0;
+  flex-grow: 0;
 `
 
 export const SingleRowPropEditor: React.FC<{
@@ -70,15 +96,19 @@ export const SingleRowPropEditor: React.FC<{
   return (
     <Row>
       {contextMenu}
-      <PropNameContainer
+      <Left>
-        ref={propNameContainerRef}
+        <ControlsContainer>{stuff.controlIndicators}</ControlsContainer>
-        title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
+
-          '.',
+        <PropNameContainer
-        )}
+          ref={propNameContainerRef}
-      >
+          title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
-        {label}
+            '.',
-      </PropNameContainer>
+          )}
-      <ControlsContainer>{stuff.controlIndicators}</ControlsContainer>
+        >
+          {label}
+        </PropNameContainer>
+      </Left>
+
       <InputContainer>{children}</InputContainer>
     </Row>
   )

theatre/studio/src/uiComponents/form/BasicSwitch.tsx

@@ -7,7 +7,9 @@ const Container = styled.form`
   flex-direction: row;
   align-items: stretch;
   vertical-align: middle;
+  justify-content: stretch;
   height: 24px;
+  width: 100%;
 `
 const Label = styled.label`
   padding: 0 0.5em;
@@ -15,6 +17,8 @@ const Label = styled.label`
   /* background: #373748; */
   display: flex;
   align-items: center;
+  justify-content: center;
+  flex-grow: 1;
   color: #a7a7a7;
   border: 1px solid #1c2123;
   box-sizing: border-box;