From f9e32fbadeff3eade50d47b3bf7ed6e9f8e1a732 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 16 Jul 2021 15:42:01 +0200 Subject: [PATCH] More tweaks --- .../src/panels/BasePanel/PanelWrapper.tsx | 4 +--- .../ObjectEditorPanel/ObjectEditorPanel.tsx | 2 +- .../DopeSheet/Left/AnyCompositeRow.tsx | 13 +++++++---- .../SequenceEditorPanel.tsx | 22 +++++++++++-------- .../SequenceEditorPanel/layout/layout.ts | 2 +- 5 files changed, 25 insertions(+), 18 deletions(-) diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx index ed1d050..51a35b5 100644 --- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx @@ -2,15 +2,13 @@ import React from 'react' import styled from 'styled-components' import {usePanel} from './BasePanel' import PanelResizers from './PanelResizers' -import {theme} from '@theatre/studio/css' const Container = styled.div` position: absolute; user-select: none; box-sizing: border-box; pointer-events: auto; - background: ${theme.panel.bg}; - box-shadow: 1px 2px 10px -5px black; + /* box-shadow: 1px 2px 10px -5px black; */ z-index: 1000; ` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index 79f5e9b..b5701ba 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -44,7 +44,7 @@ export const TitleBar = styled.div` padding: 0 10px; color: #adadadb3; border-bottom: 1px solid rgb(0 0 0 / 13%); - background: #00000017; + background-color: #25272b; font-size: 10px; font-weight: 500; overflow: hidden; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx index 49eb8e1..fe41387 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx @@ -2,7 +2,7 @@ import {theme} from '@theatre/studio/css' import type {SequenceEditorTree_Row} from '@theatre/studio/panels/SequenceEditorPanel/layout/tree' import type {VoidFn} from '@theatre/shared/utils/types' import React from 'react' -import {GoChevronRight} from 'react-icons/go' +import {HiOutlineChevronRight} from 'react-icons/all' import styled from 'styled-components' import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor' @@ -24,7 +24,7 @@ const Header = styled(BaseHeader)<{ padding-left: calc(16px + var(--depth) * 20px); display: flex; - align-items: center; + align-items: stretch; color: ${theme.panel.body.compoudThing.label.color}; box-sizing: border-box; @@ -34,12 +34,17 @@ const Header = styled(BaseHeader)<{ const Head_Label = styled.span` ${propNameText}; + display: flex; + align-items: center; ` const Head_Icon = styled.span<{isOpen: boolean}>` width: 12px; margin-right: 8px; - font-size: 13px; + font-size: 9px; + display: flex; + align-items: center; + transform: rotateZ(${(props) => (props.isOpen ? 90 : 0)}deg); ` @@ -70,7 +75,7 @@ const AnyCompositeRow: React.FC<{ isEven={leaf.n % 2 === 0} > - + {label} diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index be6a28e..fd701c6 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -15,7 +15,6 @@ import GraphEditor from './GraphEditor/GraphEditor' import type {PanelDims, SequenceEditorPanelLayout} from './layout/layout' import {sequenceEditorPanelLayout} from './layout/layout' import RightOverlay from './RightOverlay/RightOverlay' -import BottomRectangleThingy from './BottomRectangleThingy/BottomRectangleThingy' import BasePanel, {usePanel} from '@theatre/studio/panels/BasePanel/BasePanel' import type {PanelPosition} from '@theatre/studio/store/types' import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone' @@ -28,6 +27,17 @@ import {uniq} from 'lodash-es' const Container = styled(PanelWrapper)`` +const LeftBackground = styled.div` + background-color: #282b2fed; + position: absolute; + left: 0; + top: 0; + bottom: 0; + z-index: -1; + width: 200px; + pointer-events: none; +` + export const zIndexes = (() => { const scrollableArea = 0 const rightOverlay = scrollableArea + 1 @@ -57,13 +67,6 @@ const Header_Container = styled(PanelDragZone)` z-index: 1; ` -/** - * @todo Add a message here - */ -const EmptyPanel: React.FC<{width: number; height: number}> = (props) => ( - -) - const defaultPosition: PanelPosition = { edges: { left: {from: 'screenLeft', distance: 0.1}, @@ -148,10 +151,11 @@ const Content: React.FC<{}> = () => { const graphEditorOpen = val(layoutP.graphEditorDims.isOpen) return ( +
- + {/* */} {graphEditorOpen && ( )} diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts index 6bdcb22..7319bde 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts @@ -156,7 +156,7 @@ export function sequenceEditorPanelLayout( } const graphEditorOpen = graphEditorState?.isOpen === true - const bottomRectangleThingyHeight = 20 + const bottomRectangleThingyHeight = 0 const graphEditorHeight = Math.floor( (graphEditorOpen ? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)