From d98ab07cbe77ee7f1387d598dd84bfe8c229276e Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 16 Jul 2021 15:58:20 +0200 Subject: [PATCH] SequenceEditorPanel has a slightly more minimal look now --- .../BottomRectangleThingy.tsx | 71 ------------------- .../DopeSheet/Right/DopeSheetBackground.tsx | 4 +- .../FrameStampPositionProvider.tsx | 8 +-- .../GraphEditor/GraphEditor.tsx | 3 +- .../GraphEditorToggle.tsx | 12 ++-- .../RightOverlay/FrameStamp.tsx | 8 +-- .../SequenceEditorPanel.tsx | 5 +- .../SequenceEditorPanel/layout/layout.ts | 22 +----- 8 files changed, 19 insertions(+), 114 deletions(-) delete mode 100644 theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/BottomRectangleThingy.tsx rename theatre/studio/src/panels/SequenceEditorPanel/{BottomRectangleThingy => }/GraphEditorToggle.tsx (86%) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/BottomRectangleThingy.tsx b/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/BottomRectangleThingy.tsx deleted file mode 100644 index 66322ed..0000000 --- a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/BottomRectangleThingy.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type {Pointer} from '@theatre/dataverse' -import {val} from '@theatre/dataverse' -import {usePrism} from '@theatre/dataverse-react' -import {theme} from '@theatre/studio/css' -import React from 'react' -import styled from 'styled-components' -import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' -import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' -import GraphEditorToggle from './GraphEditorToggle' - -const Container = styled.div<{graphEditorOpen: boolean}>` - position: absolute; - z-index: ${() => zIndexes.bottomRectangleThingy}; - background: ${theme.panel.bg}; - box-sizing: border-box; - border-top: 1px solid rgba(0, 0, 0, 0.45); - border-bottom: ${({graphEditorOpen}) => - graphEditorOpen ? '1px solid rgba(0, 0, 0, 0.45)' : 'none'}; -` - -const Left = styled.div` - position: absolute; - top: 0; - bottom: 0; -` -const Right = styled.div` - position: absolute; - top: 0; - bottom: 0; - display: flex; -` - -const BottomRectangleThingy: React.FC<{ - layoutP: Pointer -}> = ({layoutP}) => { - const {dims, leftWidth, rightWidth, graphEditorOpen} = usePrism(() => { - return { - dims: val(layoutP.bottomRectangleThingyDims), - leftWidth: val(layoutP.leftDims.width), - rightWidth: val(layoutP.rightDims.width), - graphEditorOpen: val(layoutP.graphEditorDims.isOpen), - } - }, [layoutP]) - return ( - - - - - - - ) -} - -export default BottomRectangleThingy diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx index 943ec9e..c946ca9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx @@ -3,7 +3,7 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEdi import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import {useVal} from '@theatre/dataverse-react' import type {Pointer} from '@theatre/dataverse' -import {darken} from 'polished' +import {darken, transparentize} from 'polished' import React from 'react' import styled from 'styled-components' import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid' @@ -16,7 +16,7 @@ const Container = styled.div<{width: number}>` bottom: 0; z-index: ${() => zIndexes.rightBackground}; overflow: hidden; - background: ${darken(1 * 0.03, theme.panel.bg)}; + background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))}; pointer-events: none; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx index ed36164..b666584 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx @@ -106,16 +106,10 @@ const pointerPositionInUnitSpace = ( const {clientX, clientY} = val(mousePositionD) const {screenX: x, screenY: y, width: rightWidth, height} = rightDims - const bottomRectangleThingyDims = val(layoutP.bottomRectangleThingyDims) if ( inRange(clientX, x, x + rightWidth) && - inRange(clientY, y, y + height) && - !inRange( - clientY, - bottomRectangleThingyDims.screenY, - bottomRectangleThingyDims.screenY + bottomRectangleThingyDims.height, - ) + inRange(clientY, y, y + height) ) { const posInRightDims = clientX - x const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx index b205bc1..d4c40b0 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx @@ -12,6 +12,7 @@ import {contentWidth} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet import HorizontallyScrollableArea from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea' import PrimitivePropGraph from './PrimitivePropGraph' import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid' +import {transparentize} from 'polished' export const graphEditorColors = { '1': {iconColor: '#b98b08'}, @@ -26,7 +27,7 @@ const Container = styled.div` position: absolute; right: 0; bottom: 0; - background: #1a1c1e; + background: ${transparentize(0.03, '#1a1c1e')}; ` const SVGContainer = styled.svg` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx similarity index 86% rename from theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx rename to theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx index 3ce6081..e21a02b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx @@ -6,12 +6,16 @@ import React, {useCallback} from 'react' import styled from 'styled-components' import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' -const Container = styled.button<{isOpen: boolean}>` - height: 100%; - border: none; +const Container = styled.button` outline: none; - background: ${(props) => (props.isOpen ? '#1A1C1E' : '#212327')}; + background-color: #1c1d21; + border: 1px solid #191919; + border-radius: 2px; display: flex; + bottom: 14px; + right: 8px; + z-index: 1; + position: absolute; padding: 0 8px; display: flex; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx index 11f9c1e..e98f096 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FrameStamp.tsx @@ -93,16 +93,10 @@ const usePointerPositionInUnitSpace = ( const {clientX, clientY} = val(mousePositionD) const {screenX: x, screenY: y, width: rightWidth, height} = rightDims - const bottomRectangleThingyDims = val(layoutP.bottomRectangleThingyDims) if ( inRange(clientX, x, x + rightWidth) && - inRange(clientY, y, y + height) && - !inRange( - clientY, - bottomRectangleThingyDims.screenY, - bottomRectangleThingyDims.screenY + bottomRectangleThingyDims.height, - ) + inRange(clientY, y, y + height) ) { const posInRightDims = clientX - x const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index fd701c6..9d165de 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -24,6 +24,7 @@ import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import type Sheet from '@theatre/core/sheets/Sheet' import {isSheet, isSheetObject} from '@theatre/shared/instanceTypes' import {uniq} from 'lodash-es' +import GraphEditorToggle from './GraphEditorToggle' const Container = styled(PanelWrapper)`` @@ -46,7 +47,6 @@ export const zIndexes = (() => { const currentFrameStamp = seeker + 1 const lengthIndicator = currentFrameStamp + 1 const horizontalScrollbar = lengthIndicator + 1 - const bottomRectangleThingy = horizontalScrollbar + 1 return { scrollableArea, @@ -56,7 +56,6 @@ export const zIndexes = (() => { horizontalScrollbar, currentFrameStamp, lengthIndicator, - bottomRectangleThingy, } })() @@ -155,10 +154,10 @@ const Content: React.FC<{}> = () => {
- {/* */} {graphEditorOpen && ( )} + diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts index 7319bde..d63d155 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts @@ -68,7 +68,6 @@ export type SequenceEditorPanelLayout = { isOpen: boolean padding: {top: number; bottom: number} } - bottomRectangleThingyDims: DimsOfPanelPart & {bottom: number} horizontalScrollbarDims: {bottom: number} graphEditorVerticalSpace: { space: number @@ -136,7 +135,6 @@ export function sequenceEditorPanelLayout( rightDims, graphEditorDims, dopeSheetDims, - bottomRectangleThingyDims, horizontalScrollbarDims, } = prism.memo( 'leftDims', @@ -156,25 +154,15 @@ export function sequenceEditorPanelLayout( } const graphEditorOpen = graphEditorState?.isOpen === true - const bottomRectangleThingyHeight = 0 const graphEditorHeight = Math.floor( (graphEditorOpen ? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7) : 0) * panelDims.heightWithoutBorder, ) - const bottomHeight = bottomRectangleThingyHeight + graphEditorHeight + const bottomHeight = 0 + graphEditorHeight const dopeSheetHeight = panelDims.height - bottomHeight - const bottomRectangleThingyDims: SequenceEditorPanelLayout['bottomRectangleThingyDims'] = - { - width: panelDims.width, - height: bottomRectangleThingyHeight, - screenX: panelDims.screenX, - screenY: panelDims.screenY + dopeSheetHeight, - bottom: graphEditorHeight, - } - const dopeSheetDims: SequenceEditorPanelLayout['dopeSheetDims'] = { width: panelDims.width, height: dopeSheetHeight, @@ -188,9 +176,7 @@ export function sequenceEditorPanelLayout( width: rightDims.width, height: graphEditorHeight, screenX: panelDims.screenX, - screenY: - bottomRectangleThingyDims.screenY + - bottomRectangleThingyDims.height, + screenY: panelDims.screenY + dopeSheetHeight, padding: { top: 20, bottom: 20, @@ -199,7 +185,7 @@ export function sequenceEditorPanelLayout( const horizontalScrollbarDims: SequenceEditorPanelLayout['horizontalScrollbarDims'] = { - bottom: graphEditorOpen ? 0 : bottomRectangleThingyDims.height, + bottom: graphEditorOpen ? 0 : 0, } return { @@ -207,7 +193,6 @@ export function sequenceEditorPanelLayout( rightDims, graphEditorDims, dopeSheetDims, - bottomRectangleThingyDims, horizontalScrollbarDims, } }, @@ -337,7 +322,6 @@ export function sequenceEditorPanelLayout( leftDims, rightDims, dopeSheetDims, - bottomRectangleThingyDims, horizontalScrollbarDims, seeker, unitSpace,