From 9083186c0012b4a19631784064b1e6edaec57694 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Sun, 15 Oct 2023 12:55:15 +0200 Subject: [PATCH] =?UTF-8?q?Bit=20of=20=E2=9D=A4=EF=B8=8F=20for=20the=20edi?= =?UTF-8?q?tor=20popovers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../KeyframeEditor/BasicKeyframeConnector.tsx | 2 ++ .../CurveEditorPopover/CurveEditorPopover.tsx | 2 +- .../useSingleKeyframeInlineEditorPopover.tsx | 22 +++++++++---------- .../LengthIndicator/LengthEditorPopover.tsx | 1 - .../RightOverlay/Markers/MarkerDot.tsx | 2 +- .../Markers/MarkerEditorPopover.tsx | 3 +-- .../RightOverlay/Playhead.tsx | 2 +- .../RightOverlay/PlayheadPositionPopover.tsx | 1 - .../src/uiComponents/Popover/BasicPopover.tsx | 18 +++++++-------- .../src/uiComponents/Popover/PopoverArrow.tsx | 4 ++-- 10 files changed, 27 insertions(+), 30 deletions(-) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx index 4ad573ee06..dc71d83fea 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx @@ -29,6 +29,8 @@ const POPOVER_MARGIN = 5 const EasingPopover = styled(BasicPopover)` --popover-outer-stroke: transparent; --popover-inner-stroke: ${COLOR_POPOVER_BACK}; + border-radius: 2px; + padding: 0; ` type IBasicKeyframeConnectorProps = ISingleKeyframeEditorProps diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx index 9d56b0b328..977c61d77f 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx @@ -129,7 +129,7 @@ type ICurveEditorPopoverProps = { additionalConnections: Array } -const CurveEditorPopover: React.VFC = (props) => { +const CurveEditorPopover: React.FC = (props) => { const allConnections = useMemo( () => [props.curveConnection, ...props.additionalConnections], [props.curveConnection, ...props.additionalConnections], diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx index 94773ac7c5..f233a4fc12 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/useSingleKeyframeInlineEditorPopover.tsx @@ -19,18 +19,16 @@ export function useKeyframeInlineEditorPopover( ) { return usePopover({debugName: 'useKeyframeInlineEditorPopover'}, () => ( -
- {!Array.isArray(props) - ? undefined - : props.map((prop, i) => ( - - ))} -
+ {!Array.isArray(props) + ? undefined + : props.map((prop, i) => ( + + ))} )) } diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx index 3dec5a12c3..0e9a215cda 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx @@ -14,7 +14,6 @@ const greaterThanZero = (v: number) => isFinite(v) && v > 0 const Container = styled.div` display: flex; gap: 8px; - padding: 4px 8px; height: 28px; align-items: center; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.tsx index 76d7e8734e..500c86eae2 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Markers/MarkerDot.tsx @@ -173,7 +173,7 @@ const MarkerDotVisible: React.VFC = ({ close: closePopover, } = usePopover({debugName: 'MarkerPopover'}, () => { return ( - + - {/* */} + }> = ({ const popover = usePopover({debugName: 'Playhead'}, () => { return ( - + isFinite(v) && v >= 0 const Container = styled.div` display: flex; gap: 8px; - padding: 4px 8px; height: 28px; align-items: center; ` diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index a5c9cf78ad..e4a49c26fc 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -1,31 +1,31 @@ import type {$IntentionalAny} from '@theatre/utils/types' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import {transparentize} from 'polished' import React from 'react' import styled from 'styled-components' import PopoverArrow from './PopoverArrow' -export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`) +export const popoverBackgroundColor = `rgb(51 45 66 / 40%)` const Container = styled.div` position: absolute; --popover-bg: ${popoverBackgroundColor}; --popover-inner-stroke: #505159; - --popover-outer-stroke: #111; + --popover-outer-stroke: rgb(86 100 110 / 46%); + + border-radius: 4px; + box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px; + backdrop-filter: blur(8px) saturate(300%) contrast(65%) brightness(55%); + /* background-color: rgb(45 46 66 / 50%); */ + border: 0.5px solid var(--popover-outer-stroke); background: var(--popover-bg); /* border: 1px solid var(--popover-inner-stroke); */ - box-shadow: - 0 0 0 1px var(--popover-outer-stroke), - 0 6px 8px -4px black; - backdrop-filter: blur(8px); color: white; - padding: 0; + padding: 1px 2px 1px 10px; margin: 0; cursor: default; ${pointerEventsAutoInNormalMode}; - border-radius: 3px; z-index: 10000; & a { diff --git a/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx b/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx index fb0977704b..cfac0e70e8 100644 --- a/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx +++ b/theatre/studio/src/uiComponents/Popover/PopoverArrow.tsx @@ -15,7 +15,7 @@ const Adjust = styled.div` height: 8px; position: absolute; left: -7px; - top: -8px; + top: -6px; text-align: center; line-height: 0; ` @@ -50,7 +50,7 @@ const PopoverArrow = forwardRef(({className}, ref) => { xmlns="http://www.w3.org/2000/svg" > - + {/* */}