diff --git a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx index 595a6b1..d916b8d 100644 --- a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx @@ -3,17 +3,14 @@ import type {PanelPosition} from '@theatre/studio/store/types' import type {PaneInstance} from '@theatre/studio/TheatreStudio' import React, {useCallback} from 'react' import styled from 'styled-components' -import { - TitleBar, - F2 as F2Impl, -} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' +import {F2 as F2Impl, TitleBar} from './common' import BasePanel from './BasePanel' import PanelDragZone from './PanelDragZone' import PanelWrapper from './PanelWrapper' import {ErrorBoundary} from 'react-error-boundary' import {IoClose} from 'react-icons/all' import getStudio from '@theatre/studio/getStudio' -import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes' +import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common' const defaultPosition: PanelPosition = { edges: { diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx new file mode 100644 index 0000000..ad05bf8 --- /dev/null +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -0,0 +1,61 @@ +import {theme} from '@theatre/studio/css' +import styled from 'styled-components' + +export const panelZIndexes = { + get outlinePanel() { + return 1 + }, + + get propsPanel() { + return panelZIndexes.outlinePanel + }, + + get sequenceEditorPanel() { + return this.outlinePanel - 1 + }, + + get toolbar() { + return this.outlinePanel + 1 + }, + + get pluginPanes() { + return this.sequenceEditorPanel - 1 + }, +} + +export const propsEditorBackground = theme.panel.bg + +export const TitleBar_Piece = styled.span` + white-space: nowrap; +` + +export const TitleBar_Punctuation = styled.span` + white-space: nowrap; + color: ${theme.panel.head.punctuation.color}; +` + +export const F2 = styled.div` + background: ${propsEditorBackground}; + flex-grow: 1; + overflow-y: scroll; + padding: 0; +` + +export const titleBarHeight = 20 + +export const TitleBar = styled.div` + height: ${titleBarHeight}px; + box-sizing: border-box; + display: flex; + align-items: center; + padding: 0 10px; + position: relative; + color: #adadadb3; + border-bottom: 1px solid rgb(0 0 0 / 13%); + background-color: #25272b; + font-size: 10px; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index d453a4b..d812d72 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -1,113 +1,70 @@ -import {theme} from '@theatre/studio/css' import {getOutlineSelection} from '@theatre/studio/selectors' import {usePrism} from '@theatre/dataverse-react' import {prism} from '@theatre/dataverse' import React from 'react' import styled from 'styled-components' import DeterminePropEditor from './propEditors/DeterminePropEditor' -import type {PanelPosition} from '@theatre/studio/store/types/historic' -import BasePanel from '@theatre/studio/panels/BasePanel/BasePanel' -import PanelWrapper from '@theatre/studio/panels/BasePanel/PanelWrapper' -import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone' import {isSheetObject} from '@theatre/shared/instanceTypes' import type SheetObject from '@theatre/core/sheetObjects/SheetObject' -import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes' +import { + panelZIndexes, + TitleBar_Punctuation, +} from '@theatre/studio/panels/BasePanel/common' -const Container = styled(PanelWrapper)` - overflow-y: hidden; - display: flex; - flex-direction: column; +const Container = styled.div` background-color: transparent; - /* background-color: #282b2ff0; */ - box-shadow: none; + pointer-events: none; + position: absolute; + left: 0; + right: 0; + top: 50px; + bottom: 8px; z-index: ${panelZIndexes.propsPanel}; - &:after { - position: absolute; + &:before { display: block; content: ' '; - left: 0; - width: 1px; - bottom: 0; + position: absolute; top: 0; - /* border-left: 1px solid #3a3a44; */ + bottom: 0; + right: 0; + width: 20px; + pointer-events: auto; } ` -const emptyPanel = - -export const titleBarHeight = 20 - -export const TitleBar = styled.div` - height: ${titleBarHeight}px; - box-sizing: border-box; +const Content = styled.div` + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 320px; + overflow-y: hidden; display: flex; - align-items: center; - padding: 0 10px; - position: relative; - color: #adadadb3; - border-bottom: 1px solid rgb(0 0 0 / 13%); - background-color: #25272b; - font-size: 10px; - font-weight: 500; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + flex-direction: column; + transform: translateX(100%); + pointer-events: auto; + + ${Container}:hover & { + transform: translateX(0); + } ` -const F1_1 = styled.div` +const Title = styled.div` + width: 100%; +` + +const Header = styled.div` display: none; ` -export const TitleBar_Piece = styled.span` - white-space: nowrap; -` - -export const TitleBar_Punctuation = styled.span` - white-space: nowrap; - color: ${theme.panel.head.punctuation.color}; -` - -export const propsEditorBackground = theme.panel.bg - -export const F2 = styled.div` - background: ${propsEditorBackground}; +const Body = styled.div` flex-grow: 1; overflow-y: scroll; 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}, - right: {from: 'screenRight', distance: 0.2}, - top: {from: 'screenTop', distance: 0.2}, - bottom: {from: 'screenBottom', distance: 0.2}, - }, -} - -const minDims = {width: 300, height: 300} - const ObjectEditorPanel: React.FC<{}> = (props) => { - return ( - - - - ) -} - -const Content: React.FC<{}> = () => { return usePrism(() => { const selection = getOutlineSelection() @@ -119,24 +76,26 @@ const Content: React.FC<{}> = () => { return ( - - - {obj.sheet.address.sheetId}{' '} - {':'}  - {obj.sheet.address.sheetInstanceId}{' '} -  {'>'}  - {obj.address.objectKey} - - - - - + +
+ + {obj.sheet.address.sheetId}{' '} + <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> + {obj.sheet.address.sheetInstanceId}{' '} + <TitleBar_Punctuation> {'>'} </TitleBar_Punctuation> + {obj.address.objectKey} + +
+ + + +
) }, []) diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index 6e0ee32..682eb75 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes' +import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common' import ProjectsList from './ProjectsList/ProjectsList' const Container = styled.div` @@ -49,7 +49,7 @@ const Header = styled.div` display: none; ` -const F2 = styled.div` +const Body = styled.div` flex-grow: 1; overflow-y: scroll; padding: 0; @@ -62,9 +62,9 @@ const OutlinePanel: React.FC<{}> = (props) => {
Outline
- + - +
) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index 0ba1ebb..352eaae 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -5,11 +5,7 @@ import type {Pointer} from '@theatre/dataverse' 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' + import DopeSheet from './DopeSheet/DopeSheet' import GraphEditor from './GraphEditor/GraphEditor' import type {PanelDims, SequenceEditorPanelLayout} from './layout/layout' @@ -25,7 +21,12 @@ import type Sheet from '@theatre/core/sheets/Sheet' import {isSheet, isSheetObject} from '@theatre/shared/instanceTypes' import {uniq} from 'lodash-es' import GraphEditorToggle from './GraphEditorToggle' -import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes' +import { + panelZIndexes, + TitleBar, + TitleBar_Piece, + TitleBar_Punctuation, +} from '@theatre/studio/panels/BasePanel/common' const Container = styled(PanelWrapper)` z-index: ${panelZIndexes.sequenceEditorPanel}; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts index cac9433..76ced1e 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/ObjectEditorPanel/ObjectEditorPanel' +import {titleBarHeight} from '@theatre/studio/panels/BasePanel/common' export type SequenceEditorTree_Row = { type: Type diff --git a/theatre/studio/src/panels/panelZIndexes.tsx b/theatre/studio/src/panels/panelZIndexes.tsx deleted file mode 100644 index f99c583..0000000 --- a/theatre/studio/src/panels/panelZIndexes.tsx +++ /dev/null @@ -1,21 +0,0 @@ -export const panelZIndexes = { - get outlinePanel() { - return 1 - }, - - get propsPanel() { - return panelZIndexes.outlinePanel - }, - - get sequenceEditorPanel() { - return this.outlinePanel - 1 - }, - - get toolbar() { - return this.outlinePanel + 1 - }, - - get pluginPanes() { - return this.sequenceEditorPanel - 1 - }, -} diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx index 1523851..60d86ba 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx @@ -1,6 +1,6 @@ import {useVal} from '@theatre/dataverse-react' import getStudio from '@theatre/studio/getStudio' -import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes' +import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common' import React from 'react' import styled from 'styled-components'