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

Fix the color inconsistency that shows up when dragging the focus range

Browse source
This commit is contained in:
Aria Minaei 2022-05-10 18:56:43 +02:00
parent 7ce3111e07
commit 417233a7c6
1 changed files with 15 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
View file

@ -35,7 +35,7 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
height: ${() => topStripHeight - 1}px; height: ${() => topStripHeight - 1}px;
z-index: 3; z-index: 3;
background-color: ${({enabled}) => --bg: ${({enabled}) =>
enabled enabled
? focusRangeStripTheme.enabled.backgroundColor ? focusRangeStripTheme.enabled.backgroundColor
: focusRangeStripTheme.disabled.backgroundColor}; : focusRangeStripTheme.disabled.backgroundColor};
@ -64,23 +64,27 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
pointer-events: none !important; pointer-events: none !important;
} }
// highlight the handle when it's being dragged or the whole strip is being dragged // highlight the handle if it's hovered, or the whole strip is hovverd
${() => RangeStrip}:hover ~ &, &:hover {
--bg: ${focusRangeStripTheme.hover.backgroundColor};
stroke: ${focusRangeStripTheme.hover.stroke};
}
// highlight the handle when it's being dragged or the whole strip is being dragged.
// using dragging.dragging to give this selector priority, as it seems to be overridden
// by the hover selector above
&.dragging, &.dragging,
${() => RangeStrip}.dragging ~ & { ${() => RangeStrip}.dragging.dragging ~ & {
background: ${focusRangeStripTheme.dragging.backgroundColor}; --bg: ${focusRangeStripTheme.dragging.backgroundColor};
stroke: ${focusRangeStripTheme.dragging.stroke}; stroke: ${focusRangeStripTheme.dragging.stroke};
} }
#pointer-root.draggingPositionInSequenceEditor &:hover { #pointer-root.draggingPositionInSequenceEditor &:hover {
background: ${focusRangeStripTheme.dragging.backgroundColor}; --bg: ${focusRangeStripTheme.dragging.backgroundColor};
stroke: #40aaa4; stroke: #40aaa4;
} }
// highlight the handle if it's hovered, or the whole strip is hovverd background-color: var(--bg);
${() => RangeStrip}:hover ~ &, &:hover {
background: ${focusRangeStripTheme.hover.backgroundColor};
stroke: ${focusRangeStripTheme.hover.stroke};
}
// a larger hit zone // a larger hit zone
&:before { &:before {
@ -101,20 +105,6 @@ const ColoredMargin = styled.div<{type: 'start' | 'end'; enabled: boolean}>`
bottom: 0; bottom: 0;
pointer-events: none; pointer-events: none;
${() => RangeStrip}.dragging ~ ${TheDiv} > & {
--bg: ${focusRangeStripTheme.dragging.backgroundColor};
}
--bg: ${({enabled}) =>
enabled
? focusRangeStripTheme.enabled.backgroundColor
: focusRangeStripTheme.disabled.backgroundColor};
// highlight the handle if it's hovered, or the whole strip is hovverd
${() => RangeStrip}:hover ~ ${TheDiv} > & {
--bg: ${focusRangeStripTheme.hover.backgroundColor};
}
background: linear-gradient( background: linear-gradient(
${(props) => (props.type === 'start' ? 90 : -90)}deg, ${(props) => (props.type === 'start' ? 90 : -90)}deg,
var(--bg) 0%, var(--bg) 0%,
@ -138,11 +128,9 @@ const OuterColoredMargin = styled.div<{
bottom: 0; bottom: 0;
pointer-events: none; pointer-events: none;
--bg: ${() => topStripTheme.backgroundColor};
background: linear-gradient( background: linear-gradient(
${(props) => (props.type === 'start' ? -90 : 90)}deg, ${(props) => (props.type === 'start' ? -90 : 90)}deg,
var(--bg) 0%, ${() => topStripTheme.backgroundColor} 0%,
#ffffff00 100% #ffffff00 100%
); );