More style tweaks

This commit is contained in:
Aria Minaei 2021-07-09 17:15:48 +02:00
parent 541b6287e2
commit 85e468b597
7 changed files with 22 additions and 14 deletions

View file

@ -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>
) )
} }

View file

@ -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}

View file

@ -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}

View file

@ -0,0 +1,7 @@
import styled from 'styled-components'
const BasicCheckbox = styled.input.attrs({type: 'checkbox'})`
outline: none;
`
export default BasicCheckbox

View file

@ -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

View file

@ -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

View file

@ -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