diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx
index ab54ac9..6d56476 100644
--- a/theatre/studio/src/UIRoot/PanelsRoot.tsx
+++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx
@@ -4,6 +4,7 @@ import React from 'react'
import getStudio from '@theatre/studio/getStudio'
import {useVal} from '@theatre/dataverse-react'
import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper'
+import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
const PanelsRoot: React.FC = () => {
const panes = useVal(getStudio().paneManager.allPanesD)
@@ -18,7 +19,7 @@ const PanelsRoot: React.FC = () => {
{/* {paneEls} */}
- {/* */}
+
>
)
}
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
index 4c1dc0c..c3fef33 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
@@ -52,7 +52,12 @@ const F1_1 = styled.div`
display: none;
`
-export const Punctuation = styled.span`
+export const TitleBar_Piece = styled.span`
+ white-space: nowrap;
+`
+
+export const TitleBar_Punctuation = styled.span`
+ white-space: nowrap;
color: ${theme.panel.head.punctuation.color};
`
@@ -109,9 +114,10 @@ const Content: React.FC<{}> = () => {
- {obj.sheet.address.sheetId} {':'}
+ {obj.sheet.address.sheetId}{' '}
+ {':'}
{obj.sheet.address.sheetInstanceId}{' '}
- {'>'}
+ {'>'}
{obj.address.objectKey}
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
index 7ccac55..1c5f1e8 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
+++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
@@ -22,7 +22,7 @@ export const rowBg = css`
&:after {
position: absolute;
display: block;
- inset: 0px 0 1px calc(0px + var(--left-pad) + var(--depth) * var(--step));
+ inset: 0px 0 1px calc(-2px + var(--left-pad) + var(--depth) * var(--step));
content: ' ';
z-index: -1;
background-color: #282b2f;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx
index b38c703..3ce6081 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx
@@ -16,7 +16,8 @@ const Container = styled.button<{isOpen: boolean}>`
padding: 0 8px;
display: flex;
color: #656d77;
- line-height: 22px;
+ line-height: 20px;
+ font-size: 10px;
&:hover {
color: white;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
index 187000d..49eb8e1 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
@@ -4,6 +4,7 @@ import type {VoidFn} from '@theatre/shared/utils/types'
import React from 'react'
import {GoChevronRight} from 'react-icons/go'
import styled from 'styled-components'
+import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
export const Container = styled.li<{depth: number}>`
--depth: ${(props) => props.depth};
@@ -31,7 +32,9 @@ const Header = styled(BaseHeader)<{
${(props) => props.isSelected && `background: blue`};
`
-const Head_Label = styled.span``
+const Head_Label = styled.span`
+ ${propNameText};
+`
const Head_Icon = styled.span<{isOpen: boolean}>`
width: 12px;
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
index 5fbf0c0..95a6bd3 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
@@ -12,6 +12,7 @@ import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEdit
import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors'
import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor'
import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow'
+import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
const theme = {
label: {
@@ -74,6 +75,7 @@ const GraphIcon = () => (
const Head_Label = styled.span`
margin-right: 4px;
+ ${propNameText};
`
const PrimitivePropRow: React.FC<{
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
index 12be362..4116c03 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
@@ -6,8 +6,8 @@ import {prism, val} from '@theatre/dataverse'
import React from 'react'
import styled from 'styled-components'
import {
- F1,
- Punctuation,
+ TitleBar_Piece,
+ TitleBar_Punctuation,
} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
import DopeSheet from './DopeSheet/DopeSheet'
import GraphEditor from './GraphEditor/GraphEditor'
@@ -27,6 +27,24 @@ import {uniq} from 'lodash-es'
const Container = styled(PanelWrapper)``
+export const titleBarHeight = 20
+
+const TitleBar = styled.div`
+ height: ${titleBarHeight}px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ color: #adadadb3;
+ border-bottom: 1px solid rgb(0 0 0 / 13%);
+ background: #00000017;
+ font-size: 10px;
+ font-weight: 500;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+`
+
export const zIndexes = (() => {
const scrollableArea = 0
const rightOverlay = scrollableArea + 1
@@ -172,12 +190,15 @@ const Header: React.FC<{layoutP: Pointer}> = ({
width: val(layoutP.leftDims.width),
}}
>
-
- {sheet.address.sheetId} {':'}
- {sheet.address.sheetInstanceId}{' '}
- {'>'}
- Sequence
-
+
+ {sheet.address.sheetId}
+
+ {':'}
+ {sheet.address.sheetInstanceId}
+
+ {'>'}
+ Sequence
+
)
}, [layoutP])
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
index 62bc342..6bdcb22 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
+++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts
@@ -156,7 +156,7 @@ export function sequenceEditorPanelLayout(
}
const graphEditorOpen = graphEditorState?.isOpen === true
- const bottomRectangleThingyHeight = 26
+ const bottomRectangleThingyHeight = 20
const graphEditorHeight = Math.floor(
(graphEditorOpen
? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
index 8fa09c0..6792f2a 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
+++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
@@ -12,8 +12,8 @@ import type {PathToProp} from '@theatre/shared/utils/addresses'
import type {SequenceTrackId} from '@theatre/shared/utils/ids'
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
import {prism, val} from '@theatre/dataverse'
-import {F1Height as F1Height} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
import logger from '@theatre/shared/logger'
+import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
export type SequenceEditorTree_Row = {
type: Type
@@ -71,7 +71,7 @@ export const calculateSequenceEditorTree = (
sheet: Sheet,
): SequenceEditorTree => {
prism.ensurePrism()
- let topSoFar = F1Height
+ let topSoFar = titleBarHeight
let nSoFar = 0
const tree: SequenceEditorTree = {
@@ -121,7 +121,7 @@ export const calculateSequenceEditorTree = (
sheetObject,
trackSetups,
[],
- sheetObject.template.config.props,
+ sheetObject.template.config,
row.children,
level + 1,
)