More style tweaks
This commit is contained in:
parent
ec563f430f
commit
0fad598416
9 changed files with 53 additions and 19 deletions
|
@ -4,6 +4,7 @@ import React from 'react'
|
||||||
import getStudio from '@theatre/studio/getStudio'
|
import getStudio from '@theatre/studio/getStudio'
|
||||||
import {useVal} from '@theatre/dataverse-react'
|
import {useVal} from '@theatre/dataverse-react'
|
||||||
import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper'
|
import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper'
|
||||||
|
import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
|
||||||
|
|
||||||
const PanelsRoot: React.FC = () => {
|
const PanelsRoot: React.FC = () => {
|
||||||
const panes = useVal(getStudio().paneManager.allPanesD)
|
const panes = useVal(getStudio().paneManager.allPanesD)
|
||||||
|
@ -18,7 +19,7 @@ const PanelsRoot: React.FC = () => {
|
||||||
{/* {paneEls} */}
|
{/* {paneEls} */}
|
||||||
<OutlinePanel />
|
<OutlinePanel />
|
||||||
<ObjectEditorPanel />
|
<ObjectEditorPanel />
|
||||||
{/* <SequenceEditorPanel /> */}
|
<SequenceEditorPanel />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,7 +52,12 @@ const F1_1 = styled.div`
|
||||||
display: none;
|
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};
|
color: ${theme.panel.head.punctuation.color};
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -109,9 +114,10 @@ const Content: React.FC<{}> = () => {
|
||||||
<Container>
|
<Container>
|
||||||
<PanelDragZone>
|
<PanelDragZone>
|
||||||
<F1_1>
|
<F1_1>
|
||||||
{obj.sheet.address.sheetId} <Punctuation>{':'} </Punctuation>
|
{obj.sheet.address.sheetId}{' '}
|
||||||
|
<TitleBar_Punctuation>{':'} </TitleBar_Punctuation>
|
||||||
{obj.sheet.address.sheetInstanceId}{' '}
|
{obj.sheet.address.sheetInstanceId}{' '}
|
||||||
<Punctuation> {'>'} </Punctuation>
|
<TitleBar_Punctuation> {'>'} </TitleBar_Punctuation>
|
||||||
{obj.address.objectKey}
|
{obj.address.objectKey}
|
||||||
</F1_1>
|
</F1_1>
|
||||||
</PanelDragZone>
|
</PanelDragZone>
|
||||||
|
|
|
@ -22,7 +22,7 @@ export const rowBg = css`
|
||||||
&:after {
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
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: ' ';
|
content: ' ';
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background-color: #282b2f;
|
background-color: #282b2f;
|
||||||
|
|
|
@ -16,7 +16,8 @@ const Container = styled.button<{isOpen: boolean}>`
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #656d77;
|
color: #656d77;
|
||||||
line-height: 22px;
|
line-height: 20px;
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
@ -4,6 +4,7 @@ import type {VoidFn} from '@theatre/shared/utils/types'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {GoChevronRight} from 'react-icons/go'
|
import {GoChevronRight} from 'react-icons/go'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
|
||||||
|
|
||||||
export const Container = styled.li<{depth: number}>`
|
export const Container = styled.li<{depth: number}>`
|
||||||
--depth: ${(props) => props.depth};
|
--depth: ${(props) => props.depth};
|
||||||
|
@ -31,7 +32,9 @@ const Header = styled(BaseHeader)<{
|
||||||
${(props) => props.isSelected && `background: blue`};
|
${(props) => props.isSelected && `background: blue`};
|
||||||
`
|
`
|
||||||
|
|
||||||
const Head_Label = styled.span``
|
const Head_Label = styled.span`
|
||||||
|
${propNameText};
|
||||||
|
`
|
||||||
|
|
||||||
const Head_Icon = styled.span<{isOpen: boolean}>`
|
const Head_Icon = styled.span<{isOpen: boolean}>`
|
||||||
width: 12px;
|
width: 12px;
|
||||||
|
|
|
@ -12,6 +12,7 @@ import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEdit
|
||||||
import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors'
|
import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors'
|
||||||
import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor'
|
import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor'
|
||||||
import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow'
|
import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow'
|
||||||
|
import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
|
||||||
|
|
||||||
const theme = {
|
const theme = {
|
||||||
label: {
|
label: {
|
||||||
|
@ -74,6 +75,7 @@ const GraphIcon = () => (
|
||||||
|
|
||||||
const Head_Label = styled.span`
|
const Head_Label = styled.span`
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
${propNameText};
|
||||||
`
|
`
|
||||||
|
|
||||||
const PrimitivePropRow: React.FC<{
|
const PrimitivePropRow: React.FC<{
|
||||||
|
|
|
@ -6,8 +6,8 @@ import {prism, val} from '@theatre/dataverse'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import {
|
import {
|
||||||
F1,
|
TitleBar_Piece,
|
||||||
Punctuation,
|
TitleBar_Punctuation,
|
||||||
} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
|
} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
|
||||||
import DopeSheet from './DopeSheet/DopeSheet'
|
import DopeSheet from './DopeSheet/DopeSheet'
|
||||||
import GraphEditor from './GraphEditor/GraphEditor'
|
import GraphEditor from './GraphEditor/GraphEditor'
|
||||||
|
@ -27,6 +27,24 @@ import {uniq} from 'lodash-es'
|
||||||
|
|
||||||
const Container = styled(PanelWrapper)``
|
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 = (() => {
|
export const zIndexes = (() => {
|
||||||
const scrollableArea = 0
|
const scrollableArea = 0
|
||||||
const rightOverlay = scrollableArea + 1
|
const rightOverlay = scrollableArea + 1
|
||||||
|
@ -172,12 +190,15 @@ const Header: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
|
||||||
width: val(layoutP.leftDims.width),
|
width: val(layoutP.leftDims.width),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<F1>
|
<TitleBar>
|
||||||
{sheet.address.sheetId} <Punctuation>{':'} </Punctuation>
|
<TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
|
||||||
{sheet.address.sheetInstanceId}{' '}
|
|
||||||
<Punctuation> {'>'} </Punctuation>
|
<TitleBar_Punctuation>{':'} </TitleBar_Punctuation>
|
||||||
Sequence
|
<TitleBar_Piece>{sheet.address.sheetInstanceId} </TitleBar_Piece>
|
||||||
</F1>
|
|
||||||
|
<TitleBar_Punctuation> {'>'} </TitleBar_Punctuation>
|
||||||
|
<TitleBar_Piece>Sequence</TitleBar_Piece>
|
||||||
|
</TitleBar>
|
||||||
</Header_Container>
|
</Header_Container>
|
||||||
)
|
)
|
||||||
}, [layoutP])
|
}, [layoutP])
|
||||||
|
|
|
@ -156,7 +156,7 @@ export function sequenceEditorPanelLayout(
|
||||||
}
|
}
|
||||||
|
|
||||||
const graphEditorOpen = graphEditorState?.isOpen === true
|
const graphEditorOpen = graphEditorState?.isOpen === true
|
||||||
const bottomRectangleThingyHeight = 26
|
const bottomRectangleThingyHeight = 20
|
||||||
const graphEditorHeight = Math.floor(
|
const graphEditorHeight = Math.floor(
|
||||||
(graphEditorOpen
|
(graphEditorOpen
|
||||||
? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)
|
? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)
|
||||||
|
|
|
@ -12,8 +12,8 @@ import type {PathToProp} from '@theatre/shared/utils/addresses'
|
||||||
import type {SequenceTrackId} from '@theatre/shared/utils/ids'
|
import type {SequenceTrackId} from '@theatre/shared/utils/ids'
|
||||||
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
|
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
|
||||||
import {prism, val} from '@theatre/dataverse'
|
import {prism, val} from '@theatre/dataverse'
|
||||||
import {F1Height as F1Height} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
|
|
||||||
import logger from '@theatre/shared/logger'
|
import logger from '@theatre/shared/logger'
|
||||||
|
import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
|
||||||
|
|
||||||
export type SequenceEditorTree_Row<Type> = {
|
export type SequenceEditorTree_Row<Type> = {
|
||||||
type: Type
|
type: Type
|
||||||
|
@ -71,7 +71,7 @@ export const calculateSequenceEditorTree = (
|
||||||
sheet: Sheet,
|
sheet: Sheet,
|
||||||
): SequenceEditorTree => {
|
): SequenceEditorTree => {
|
||||||
prism.ensurePrism()
|
prism.ensurePrism()
|
||||||
let topSoFar = F1Height
|
let topSoFar = titleBarHeight
|
||||||
let nSoFar = 0
|
let nSoFar = 0
|
||||||
|
|
||||||
const tree: SequenceEditorTree = {
|
const tree: SequenceEditorTree = {
|
||||||
|
@ -121,7 +121,7 @@ export const calculateSequenceEditorTree = (
|
||||||
sheetObject,
|
sheetObject,
|
||||||
trackSetups,
|
trackSetups,
|
||||||
[],
|
[],
|
||||||
sheetObject.template.config.props,
|
sheetObject.template.config,
|
||||||
row.children,
|
row.children,
|
||||||
level + 1,
|
level + 1,
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue