Visual indicator for when number editor is being scrubbed

This commit is contained in:
Aria Minaei 2021-07-16 10:09:08 +02:00
parent ea66855e01
commit 4e4452f0ad

View file

@ -7,7 +7,7 @@ import DraggableArea from '@theatre/studio/uiComponents/DraggableArea'
type IMode = IState['mode'] type IMode = IState['mode']
const Container = styled.div<{mode: IMode}>` const Container = styled.div`
height: 100%; height: 100%;
width: 100%; width: 100%;
` `
@ -26,7 +26,8 @@ const Input = styled.input`
border-radius: 2px; border-radius: 2px;
&:hover, &:hover,
&:focus { &:focus,
${Container}.dragging > & {
background: ${darken(0.9, theme.panel.bg)}; background: ${darken(0.9, theme.panel.bg)};
border: 1px solid ${lighten(0.1, theme.panel.bg)}; border: 1px solid ${lighten(0.1, theme.panel.bg)};
} }
@ -238,7 +239,7 @@ const BasicNumberInput: React.FC<{
) )
return ( return (
<Container mode={refs.current.state.mode} className={propsA.className}> <Container className={propsA.className + ' ' + refs.current.state.mode}>
<DraggableArea <DraggableArea
key="draggableArea" key="draggableArea"
onDragStart={callbacks.transitionToDraggingMode} onDragStart={callbacks.transitionToDraggingMode}