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

Make the dot bigger when the inline editor popover is open

Browse source
This commit is contained in:
Fülöp Kovács 2022-06-08 14:41:52 +02:00 committed by Fülöp
parent 6c943e176d
commit 9b3031f0cc
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
View file

@ -35,7 +35,8 @@ const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 5
const dotTheme = { const dotTheme = {
normalColor: '#40AAA4', normalColor: '#40AAA4',
selectedColor: '#F2C95C', selectedColor: '#F2C95C',
selectedAndPopOverOpen: '#E08318', inlineEditorOpenColor: '#FCF3DC',
selectedAndInlineEditorOpenColor: '#CBEBEA',
} }
const selectBacgroundForDiamond = ({ const selectBacgroundForDiamond = ({
@ -43,11 +44,11 @@ const selectBacgroundForDiamond = ({
isInlineEditorPopoverOpen, isInlineEditorPopoverOpen,
}: IDiamond) => { }: IDiamond) => {
if (isSelected && isInlineEditorPopoverOpen) { if (isSelected && isInlineEditorPopoverOpen) {
return dotTheme.selectedAndPopOverOpen return dotTheme.inlineEditorOpenColor
} else if (isSelected) { } else if (isSelected) {
return dotTheme.selectedColor return dotTheme.selectedColor
} else if (isInlineEditorPopoverOpen) { } else if (isInlineEditorPopoverOpen) {
return dotTheme.selectedColor return dotTheme.selectedAndInlineEditorOpenColor
} else { } else {
return dotTheme.normalColor return dotTheme.normalColor
} }
@ -67,7 +68,7 @@ const Diamond = styled.div<IDiamond>`
pointer-events: none; pointer-events: none;
` `
const HitZone = styled.div` const HitZone = styled.div<{isInlineEditorPopoverOpen: boolean}>`
z-index: 1; z-index: 1;
cursor: ew-resize; cursor: ew-resize;
@ -75,6 +76,11 @@ const HitZone = styled.div`
${absoluteDims(12)}; ${absoluteDims(12)};
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
& + ${Diamond} {
${(props) =>
props.isInlineEditorPopoverOpen ? absoluteDims(DOT_HOVER_SIZE_PX) : ''}
}
&:hover + ${Diamond} { &:hover + ${Diamond} {
${absoluteDims(DOT_HOVER_SIZE_PX)} ${absoluteDims(DOT_HOVER_SIZE_PX)}
} }
@ -98,7 +104,10 @@ const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
return ( return (
<> <>
<HitZone ref={ref} /> <HitZone
ref={ref}
isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
/>
<Diamond <Diamond
isSelected={!!props.selection} isSelected={!!props.selection}
isInlineEditorPopoverOpen={isInlineEditorPopoverOpen} isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}