diff --git a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx index 6fe602d..58b4f96 100644 --- a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx @@ -4,7 +4,7 @@ import type {PaneInstance} from '@theatre/studio/TheatreStudio' import React from 'react' import styled from 'styled-components' import { - F1, + TitleBar, F2 as F2Impl, } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' import BasePanel from './BasePanel' @@ -57,9 +57,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({ return ( - + {paneInstance.instanceId} - + diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index c3fef33..79f5e9b 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -34,18 +34,22 @@ const Container = styled(PanelWrapper)` const emptyPanel = -export const F1Height = 40 +export const titleBarHeight = 20 -export const F1 = styled.div` - height: ${F1Height}px; +export const TitleBar = styled.div` + height: ${titleBarHeight}px; + box-sizing: border-box; display: flex; align-items: center; - padding: 0 14px; - color: ${theme.panel.head.title.color}; - font-size: 11px; - border-bottom: 2px solid rgba(0, 0, 0, 0.45); - background: ${theme.panel.bg}; - box-sizing: border-box; + 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; ` const F1_1 = styled.div` @@ -106,7 +110,7 @@ const Content: React.FC<{}> = () => { const obj = selection.find((s): s is SheetObject => isSheetObject(s)) - if (!obj) return emptyPanel + if (!obj) return <> const key = prism.memo('key', () => JSON.stringify(obj.address), [obj]) diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index 38c771e..f237aa3 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -36,6 +36,7 @@ const Container = styled(PanelWrapper)` flex-direction: column; background-color: transparent; box-shadow: none; + pointer-events: none; ` const Title = styled.div` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index 4116c03..be6a28e 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -6,6 +6,7 @@ import {prism, val} from '@theatre/dataverse' import React from 'react' import styled from 'styled-components' import { + TitleBar, TitleBar_Piece, TitleBar_Punctuation, } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' @@ -27,24 +28,6 @@ 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 @@ -134,10 +117,10 @@ const Content: React.FC<{}> = () => { ) const selectedTemplates = uniq(selectedSheets.map((s) => s.template)) - if (selectedTemplates.length !== 1) return + if (selectedTemplates.length !== 1) return <> const sheet = selectedSheets[0] - if (!sheet) return + if (!sheet) return <> const panelSizeP = valToAtom('panelSizeP', panelSize).pointer diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts index 6792f2a..cac9433 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts @@ -13,7 +13,7 @@ import type {SequenceTrackId} from '@theatre/shared/utils/ids' import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types' import {prism, val} from '@theatre/dataverse' import logger from '@theatre/shared/logger' -import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' +import {titleBarHeight} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' export type SequenceEditorTree_Row = { type: Type