More style tweaks
This commit is contained in:
parent
541b6287e2
commit
85e468b597
7 changed files with 22 additions and 14 deletions
|
@ -4,8 +4,9 @@ import React, {useCallback} from 'react'
|
||||||
import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
|
import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
|
||||||
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
import BasicCheckbox from '@theatre/studio/uiComponents/form/BasicCheckbox'
|
||||||
|
|
||||||
const Input = styled.input`
|
const Input = styled(BasicCheckbox)`
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -25,7 +26,7 @@ const BooleanPropEditor: React.FC<{
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
||||||
<Input type="checkbox" checked={stuff.value} onChange={onChange} />
|
<Input checked={stuff.value} onChange={onChange} />
|
||||||
</SingleRowPropEditor>
|
</SingleRowPropEditor>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import type {PropTypeConfig_Number} from '@theatre/core/propTypes'
|
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 BasicNumberInput from '@theatre/studio/uiComponents/form/BasicNumberInput'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
|
import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
|
||||||
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
||||||
|
@ -14,7 +14,7 @@ const NumberPropEditor: React.FC<{
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
||||||
<BasicNumberEditor
|
<BasicNumberInput
|
||||||
value={stuff.value}
|
value={stuff.value}
|
||||||
temporarilySetValue={stuff.temporarilySetValue}
|
temporarilySetValue={stuff.temporarilySetValue}
|
||||||
discardTemporaryValue={stuff.discardTemporaryValue}
|
discardTemporaryValue={stuff.discardTemporaryValue}
|
||||||
|
|
|
@ -3,8 +3,8 @@ import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
|
||||||
import React, {useCallback} from 'react'
|
import React, {useCallback} from 'react'
|
||||||
import {useEditingToolsForPrimitiveProp} from './utils/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 BasicSwitch from '@theatre/studio/uiComponents/form/BasicSwitch'
|
||||||
import BasicSelectEditor from '@theatre/studio/uiComponents/form/BasicSelectEditor'
|
import BasicSelect from '@theatre/studio/uiComponents/form/BasicSelect'
|
||||||
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
||||||
|
|
||||||
const StringLiteralPropEditor: React.FC<{
|
const StringLiteralPropEditor: React.FC<{
|
||||||
|
@ -24,13 +24,13 @@ const StringLiteralPropEditor: React.FC<{
|
||||||
return (
|
return (
|
||||||
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
||||||
{propConfig.as === 'menu' ? (
|
{propConfig.as === 'menu' ? (
|
||||||
<BasicSelectEditor
|
<BasicSelect
|
||||||
value={stuff.value}
|
value={stuff.value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
options={propConfig.options}
|
options={propConfig.options}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<BasicSwitchEditor
|
<BasicSwitch
|
||||||
value={stuff.value}
|
value={stuff.value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
options={propConfig.options}
|
options={propConfig.options}
|
||||||
|
|
7
theatre/studio/src/uiComponents/form/BasicCheckbox.tsx
Normal file
7
theatre/studio/src/uiComponents/form/BasicCheckbox.tsx
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import styled from 'styled-components'
|
||||||
|
|
||||||
|
const BasicCheckbox = styled.input.attrs({type: 'checkbox'})`
|
||||||
|
outline: none;
|
||||||
|
`
|
||||||
|
|
||||||
|
export default BasicCheckbox
|
|
@ -59,7 +59,7 @@ type IState_Dragging = {
|
||||||
|
|
||||||
type IState = IState_NoFocus | IState_EditingViaKeyboard | IState_Dragging
|
type IState = IState_NoFocus | IState_EditingViaKeyboard | IState_Dragging
|
||||||
|
|
||||||
const BasicNumberEditor: React.FC<{
|
const BasicNumberInput: React.FC<{
|
||||||
value: number
|
value: number
|
||||||
temporarilySetValue: (v: number) => void
|
temporarilySetValue: (v: number) => void
|
||||||
discardTemporaryValue: () => void
|
discardTemporaryValue: () => void
|
||||||
|
@ -257,4 +257,4 @@ function format(v: number): string {
|
||||||
return isNaN(v) ? 'NaN' : isInteger(v) ? v.toFixed(0) : round(v, 3).toString()
|
return isNaN(v) ? 'NaN' : isInteger(v) ? v.toFixed(0) : round(v, 3).toString()
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BasicNumberEditor
|
export default BasicNumberInput
|
|
@ -31,7 +31,7 @@ const Select = styled.select`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const BasicSelectEditor: React.FC<{
|
const BasicSelect: React.FC<{
|
||||||
value: string
|
value: string
|
||||||
onChange: (val: string) => void
|
onChange: (val: string) => void
|
||||||
options: Record<string, string>
|
options: Record<string, string>
|
||||||
|
@ -54,4 +54,4 @@ const BasicSelectEditor: React.FC<{
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BasicSelectEditor
|
export default BasicSelect
|
|
@ -47,7 +47,7 @@ const Input = styled.input`
|
||||||
height: 0;
|
height: 0;
|
||||||
`
|
`
|
||||||
|
|
||||||
const BasicSwitchEditor: React.FC<{
|
const BasicSwitch: React.FC<{
|
||||||
value: string
|
value: string
|
||||||
onChange: (val: string) => void
|
onChange: (val: string) => void
|
||||||
options: Record<string, string>
|
options: Record<string, string>
|
||||||
|
@ -76,4 +76,4 @@ const BasicSwitchEditor: React.FC<{
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BasicSwitchEditor
|
export default BasicSwitch
|
Loading…
Reference in a new issue