SequenceEditorPanel has a slightly more minimal look now

theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/BottomRectangleThingy.tsx

@@ -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<SequenceEditorPanelLayout>
-}> = ({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 (
-    <Container
-      graphEditorOpen={graphEditorOpen}
-      style={{
-        width: dims.width + 'px',
-        height: dims.height + 'px',
-        bottom: dims.bottom + 'px',
-      }}
-    >
-      <Left
-        style={{
-          width: leftWidth + 'px',
-          left: 0 + 'px',
-        }}
-      ></Left>
-      <Right
-        style={{
-          left: leftWidth + 'px',
-          width: rightWidth + 'px',
-        }}
-      >
-        <GraphEditorToggle layoutP={layoutP} />
-      </Right>
-    </Container>
-  )
-}
-
-export default BottomRectangleThingy

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;
 `
 

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, y, y + height)
-      !inRange(
-        clientY,
-        bottomRectangleThingyDims.screenY,
-        bottomRectangleThingyDims.screenY + bottomRectangleThingyDims.height,
-      )
     ) {
       const posInRightDims = clientX - x
       const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims)

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`

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}>`
+const Container = styled.button`
-  height: 100%;
-  border: none;
   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;

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, y, y + height)
-      !inRange(
-        clientY,
-        bottomRectangleThingyDims.screenY,
-        bottomRectangleThingyDims.screenY + bottomRectangleThingyDims.height,
-      )
     ) {
       const posInRightDims = clientX - x
       const posInUnitSpace = clippedSpaceToUnitSpace(posInRightDims)

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<{}> = () => {
         <FrameStampPositionProvider layoutP={layoutP}>
           <Header layoutP={layoutP} />
           <DopeSheet key={key + '-dopeSheet'} layoutP={layoutP} />
-          {/* <BottomRectangleThingy layoutP={layoutP} /> */}
           {graphEditorOpen && (
             <GraphEditor key={key + '-graphEditor'} layoutP={layoutP} />
           )}
+          <GraphEditorToggle layoutP={layoutP} />
           <RightOverlay layoutP={layoutP} />
         </FrameStampPositionProvider>
       </Container>

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:
+          screenY: panelDims.screenY + dopeSheetHeight,
-            bottomRectangleThingyDims.screenY +
-            bottomRectangleThingyDims.height,
           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,