variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Small styling refactor

Browse source
This commit is contained in:
Aria Minaei 2021-07-09 15:28:31 +02:00
parent 230225ed2c
commit 5bf5fc7076
7 changed files with 93 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx
View file

@ -1,84 +1,8 @@
import type { import type {PropTypeConfig_Boolean} from '@theatre/core/propTypes'
PropTypeConfig,
PropTypeConfig_Boolean,
} from '@theatre/core/propTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import {getPointerParts} from '@theatre/dataverse'
import {last} from 'lodash-es'
import React, {useCallback} from 'react' import React, {useCallback} from 'react'
import styled, {css} from 'styled-components' import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
import { import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
shadeToColor,
useEditingToolsForPrimitiveProp,
} from './useEditingToolsForPrimitiveProp'
export const labelText = css`
font-weight: 300;
font-size: 11px;
color: #9a9a9a;
text-shadow: 0.5px 0.5px 2px black;
&:hover {
color: white;
}
`
const Container = styled.div`
display: flex;
height: 30px;
justify-content: flex-end;
align-items: center;
`
const Label = styled.label`
margin-right: 4px;
text-align: right;
${labelText};
`
const Body = styled.label`
display: flex;
align-items: center;
padding-left: 8px;
box-sizing: border-box;
width: 140px;
height: 100%;
margin-right: 16px;
margin-left: 4px;
`
export const PrimitivePropEditor: React.FC<{
propConfig: PropTypeConfig
pointerToProp: SheetObject['propsP']
stuff: ReturnType<typeof useEditingToolsForPrimitiveProp>
}> = ({propConfig, pointerToProp, stuff, children}) => {
const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
const [contextMenu] = useContextMenu(labelNode, {
items: stuff.contextMenuItems,
})
const color = shadeToColor[stuff.shade]
return (
<Container>
{contextMenu}
<Label
ref={labelRef}
title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
'.',
)}
>
{label}
</Label>
{stuff.controlIndicators}
<Body>{children}</Body>
</Container>
)
}
const BooleanPropEditor: React.FC<{ const BooleanPropEditor: React.FC<{
propConfig: PropTypeConfig_Boolean propConfig: PropTypeConfig_Boolean
@ -95,9 +19,9 @@ const BooleanPropEditor: React.FC<{
) )
return ( return (
<PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}> <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
<input type="checkbox" checked={stuff.value} onChange={onChange} /> <input type="checkbox" checked={stuff.value} onChange={onChange} />
</PrimitivePropEditor> </SingleRowPropEditor>
) )
} }

2
theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
View file

@ -13,7 +13,7 @@ import {GoChevronRight} from 'react-icons/go'
import styled from 'styled-components' import styled from 'styled-components'
import DeterminePropEditor from './DeterminePropEditor' import DeterminePropEditor from './DeterminePropEditor'
import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors' import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
import {labelText} from './BooleanPropEditor' import {labelText} from './utils/SingleRowPropEditor'
const Container = styled.div<{depth: number}>` const Container = styled.div<{depth: number}>`
--depth: ${(props) => props.depth}; --depth: ${(props) => props.depth};

8
theatre/studio/src/panels/ObjectEditorPanel/propEditors/NumberPropEditor.tsx
View file

@ -2,8 +2,8 @@ import type {PropTypeConfig_Number} from '@theatre/core/propTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import BasicNumberEditor from '@theatre/studio/uiComponents/form/BasicNumberEditor' import BasicNumberEditor from '@theatre/studio/uiComponents/form/BasicNumberEditor'
import React from 'react' import React from 'react'
import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp' import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
import {PrimitivePropEditor} from './BooleanPropEditor' import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
const NumberPropEditor: React.FC<{ const NumberPropEditor: React.FC<{
propConfig: PropTypeConfig_Number propConfig: PropTypeConfig_Number
@ -13,14 +13,14 @@ const NumberPropEditor: React.FC<{
const stuff = useEditingToolsForPrimitiveProp<number>(pointerToProp, obj) const stuff = useEditingToolsForPrimitiveProp<number>(pointerToProp, obj)
return ( return (
<PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}> <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
<BasicNumberEditor <BasicNumberEditor
value={stuff.value} value={stuff.value}
temporarilySetValue={stuff.temporarilySetValue} temporarilySetValue={stuff.temporarilySetValue}
discardTemporaryValue={stuff.discardTemporaryValue} discardTemporaryValue={stuff.discardTemporaryValue}
permenantlySetValue={stuff.permenantlySetValue} permenantlySetValue={stuff.permenantlySetValue}
/> />
</PrimitivePropEditor> </SingleRowPropEditor>
) )
} }

8
theatre/studio/src/panels/ObjectEditorPanel/propEditors/StringLiteralPropEditor.tsx
View file

@ -1,11 +1,11 @@
import type {PropTypeConfig_StringLiteral} from '@theatre/core/propTypes' import type {PropTypeConfig_StringLiteral} from '@theatre/core/propTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import React, {useCallback} from 'react' import React, {useCallback} from 'react'
import {useEditingToolsForPrimitiveProp} from './useEditingToolsForPrimitiveProp' import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
import type {$IntentionalAny} from '@theatre/shared/utils/types' import type {$IntentionalAny} from '@theatre/shared/utils/types'
import BasicSwitchEditor from '@theatre/studio/uiComponents/form/BasicSwitchEditor' import BasicSwitchEditor from '@theatre/studio/uiComponents/form/BasicSwitchEditor'
import BasicSelectEditor from '@theatre/studio/uiComponents/form/BasicSelectEditor' import BasicSelectEditor from '@theatre/studio/uiComponents/form/BasicSelectEditor'
import {PrimitivePropEditor} from './BooleanPropEditor' import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
const StringLiteralPropEditor: React.FC<{ const StringLiteralPropEditor: React.FC<{
propConfig: PropTypeConfig_StringLiteral<$IntentionalAny> propConfig: PropTypeConfig_StringLiteral<$IntentionalAny>
@ -22,7 +22,7 @@ const StringLiteralPropEditor: React.FC<{
) )
return ( return (
<PrimitivePropEditor {...{stuff, propConfig, pointerToProp}}> <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
{propConfig.as === 'menu' ? ( {propConfig.as === 'menu' ? (
<BasicSelectEditor <BasicSelectEditor
value={stuff.value} value={stuff.value}
@ -36,7 +36,7 @@ const StringLiteralPropEditor: React.FC<{
options={propConfig.options} options={propConfig.options}
/> />
)} )}
</PrimitivePropEditor> </SingleRowPropEditor>
) )
} }

76
theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx Normal file
View file

@ -0,0 +1,76 @@
import type * as propTypes from '@theatre/core/propTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import {getPointerParts} from '@theatre/dataverse'
import useContextMenu from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import {last} from 'lodash-es'
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'
export const labelText = css`
font-weight: 300;
font-size: 11px;
color: #9a9a9a;
text-shadow: 0.5px 0.5px 2px black;
&:hover {
color: white;
}
`
const Container = styled.div`
display: flex;
height: 30px;
justify-content: flex-end;
align-items: center;
`
const Label = styled.label`
margin-right: 4px;
text-align: right;
${labelText};
`
const Body = styled.label`
display: flex;
align-items: center;
padding-left: 8px;
box-sizing: border-box;
width: 140px;
height: 100%;
margin-right: 16px;
margin-left: 4px;
`
export const SingleRowPropEditor: React.FC<{
propConfig: propTypes.PropTypeConfig
pointerToProp: SheetObject['propsP']
stuff: ReturnType<typeof useEditingToolsForPrimitiveProp>
}> = ({propConfig, pointerToProp, stuff, children}) => {
const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
const [contextMenu] = useContextMenu(labelNode, {
items: stuff.contextMenuItems,
})
const color = shadeToColor[stuff.shade]
return (
<Container>
{contextMenu}
<Label
ref={labelRef}
title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
'.',
)}
>
{label}
</Label>
{stuff.controlIndicators}
<Body>{children}</Body>
</Container>
)
}

4
theatre/studio/src/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp.tsx → theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp.tsx
View file

@ -10,8 +10,8 @@ import {getPointerParts, prism, val} from '@theatre/dataverse'
import get from 'lodash-es/get' import get from 'lodash-es/get'
import last from 'lodash-es/last' import last from 'lodash-es/last'
import React from 'react' import React from 'react'
import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator' import DefaultOrStaticValueIndicator from './DefaultValueIndicator'
import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors' import NextPrevKeyframeCursors from './NextPrevKeyframeCursors'
interface CommonStuff<T> { interface CommonStuff<T> {
value: T value: T

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
View file

@ -8,7 +8,7 @@ import type {Pointer} from '@theatre/dataverse'
import {val} from '@theatre/dataverse' import {val} from '@theatre/dataverse'
import React, {useCallback, useRef} from 'react' import React, {useCallback, useRef} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/useEditingToolsForPrimitiveProp' import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
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'