From 2dd49009405c0e3ee700d6340c772484faef40bc Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 16 Jul 2021 09:58:40 +0200 Subject: [PATCH] Better horizontal alignment for prop editors --- theatre/studio/src/UIRoot/PanelsRoot.tsx | 5 +- .../ObjectEditorPanel/ObjectEditorPanel.tsx | 33 +++++++-- .../propEditors/CompoundPropEditor.tsx | 70 ++++++++++++++----- .../propEditors/utils/SingleRowPropEditor.tsx | 62 +++++++++++----- .../src/uiComponents/form/BasicSwitch.tsx | 4 ++ 5 files changed, 132 insertions(+), 42 deletions(-) diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx index d47cacc..ab54ac9 100644 --- a/theatre/studio/src/UIRoot/PanelsRoot.tsx +++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx @@ -1,7 +1,6 @@ import OutlinePanel from '@theatre/studio/panels/OutlinePanel/OutlinePanel' import ObjectEditorPanel from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' import React from 'react' -import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import getStudio from '@theatre/studio/getStudio' import {useVal} from '@theatre/dataverse-react' import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper' @@ -16,10 +15,10 @@ const PanelsRoot: React.FC = () => { return ( <> - {paneEls} + {/* {paneEls} */} - + {/* */} ) } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index b988e6d..e4de85f 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -16,6 +16,20 @@ const Container = styled(PanelWrapper)` overflow-y: hidden; display: flex; flex-direction: column; + /* background-color: transparent; */ + background-color: #282b2ff0; + box-shadow: none; + + &:after { + position: absolute; + display: block; + content: ' '; + left: 0; + width: 1px; + bottom: 0; + top: 0; + border-left: 1px solid #3a3a44; + } ` const emptyPanel = @@ -34,6 +48,10 @@ export const F1 = styled.div` box-sizing: border-box; ` +const F1_1 = styled.div` + display: none; +` + export const Punctuation = styled.span` color: ${theme.panel.head.punctuation.color}; ` @@ -47,6 +65,13 @@ export const F2 = styled.div` padding: 0; ` +const F2_2 = styled.div` + background: transparent; + flex-grow: 1; + overflow-y: scroll; + padding: 6px 0 0 0; +` + const defaultPosition: PanelPosition = { edges: { left: {from: 'screenRight', distance: 0.4}, @@ -83,14 +108,14 @@ const Content: React.FC<{}> = () => { return ( - + {obj.sheet.address.sheetId} {':'}  {obj.sheet.address.sheetInstanceId}{' '}  {'>'}  {obj.address.objectKey} - + - + = () => { propConfig={obj.template.config} depth={1} /> - + ) }, []) diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index ac584cd..75b8f9f 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -2,48 +2,71 @@ import type {PropTypeConfig_Compound} from '@theatre/core/propTypes' import {isPropConfigComposite} from '@theatre/shared/propTypes/utils' import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import {theme} from '@theatre/studio/css' -import {voidFn} from '@theatre/shared/utils' import {usePrism} from '@theatre/dataverse-react' import type {$IntentionalAny} from '@theatre/shared/utils/types' import {getPointerParts} from '@theatre/dataverse' import last from 'lodash-es/last' -import {darken} from 'polished' +import {darken, transparentize} from 'polished' import React from 'react' import {HiOutlineChevronRight} from 'react-icons/all' -import styled from 'styled-components' +import styled, {css} from 'styled-components' import DeterminePropEditor from './DeterminePropEditor' -import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors' import {propNameText} from './utils/SingleRowPropEditor' +import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator' -const Container = styled.div<{depth: number}>` - --depth: ${(props) => props.depth}; +const Container = styled.div` + --step: 8px; + --left-pad: 18px; +` + +export const rowBg = css` + /* &:after { + position: absolute; + display: block; + inset: 0px 0 0px calc(10px + var(--left-pad) + var(--depth) * var(--step)); + content: ' '; + z-index: -1; + background-color: #282b2f; + opacity: 0.97; + } */ ` const Header = styled.div` height: 30px; - padding-left: calc(-8px + var(--depth) * 20px); + /* padding-left: calc(var(--left-pad) + var(--depth) * var(--step)); */ display: flex; align-items: center; - color: ${theme.panel.body.compoudThing.label.color}; + /* color: ${theme.panel.body.compoudThing.label.color}; */ + position: relative; + + ${rowBg}; ` const IconContainer = styled.div` width: 12px; - margin-right: 6px; + margin-right: -12px; + margin-left: calc(var(--left-pad) + var(--depth) * var(--step)); font-size: 9px; text-align: center; transform: rotateZ(90deg); + position: relative; + left: -10px; ` const PropName = styled.div` - margin-right: 4px; + margin-left: 4px; cursor: default; - ${propNameText} + height: 100%; + display: flex; + align-items: center; + ${() => propNameText}; ` +const color = transparentize(0.05, `#282b2f`) + const SubProps = styled.div<{depth: number; lastSubIsComposite: boolean}>` - background: ${({depth}) => darken(depth * 0.03, theme.panel.bg)}; - padding: ${(props) => (props.lastSubIsComposite ? 0 : '4px')} 0; + /* background: ${({depth}) => darken(depth * 0.03, color)}; */ + /* padding: ${(props) => (props.lastSubIsComposite ? 0 : '4px')} 0; */ ` const CompoundPropEditor: React.FC<{ @@ -66,21 +89,30 @@ const CompoundPropEditor: React.FC<{ return usePrism(() => { return ( - + { -
+
- {propName || 'props'} - + /> */} + + {propName || 'Props'}
} - + {[...nonCompositeSubs, ...compositeSubs].map( ([subPropKey, subPropConfig]) => { return ( diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx index 9cf72a9..779063f 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx @@ -8,6 +8,7 @@ import React from 'react' import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' import styled, {css} from 'styled-components' +import {rowBg} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor' export const propNameText = css` font-weight: 300; @@ -24,14 +25,35 @@ const Row = styled.div` display: flex; height: 30px; justify-content: flex-start; - align-items: center; + align-items: stretch; + --right-width: 60%; + position: relative; + + ${rowBg}; +` + +const Left = styled.div` + box-sizing: border-box; + padding-left: calc(var(--left-pad) + (var(--depth) + 1) * var(--step)); + padding-right: 4px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + gap: 4px; + flex-grow: 0; + flex-shrink: 0; + width: calc(100% - var(--right-width)); ` const PropNameContainer = styled.div` - margin-right: 4px; - text-align: right; - flex: 0 0; - flex-basis: 106px; + text-align: left; + flex: 1 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + align-items: center; ${propNameText}; ` @@ -39,16 +61,20 @@ const PropNameContainer = styled.div` const ControlsContainer = styled.div` flex-basis: 8px; flex: 0 0; + display: flex; + align-items: center; ` const InputContainer = styled.div` display: flex; align-items: center; justify-content: stretch; - padding: 0 16px 0 2px; + padding: 0 8px 0 2px; box-sizing: border-box; height: 100%; - flex: 1 1; + width: var(--right-width); + flex-shrink: 0; + flex-grow: 0; ` export const SingleRowPropEditor: React.FC<{ @@ -70,15 +96,19 @@ export const SingleRowPropEditor: React.FC<{ return ( {contextMenu} - - {label} - - {stuff.controlIndicators} + + {stuff.controlIndicators} + + + {label} + + + {children} ) diff --git a/theatre/studio/src/uiComponents/form/BasicSwitch.tsx b/theatre/studio/src/uiComponents/form/BasicSwitch.tsx index 9237660..0f2f0ce 100644 --- a/theatre/studio/src/uiComponents/form/BasicSwitch.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSwitch.tsx @@ -7,7 +7,9 @@ const Container = styled.form` flex-direction: row; align-items: stretch; vertical-align: middle; + justify-content: stretch; height: 24px; + width: 100%; ` const Label = styled.label` padding: 0 0.5em; @@ -15,6 +17,8 @@ const Label = styled.label` /* background: #373748; */ display: flex; align-items: center; + justify-content: center; + flex-grow: 1; color: #a7a7a7; border: 1px solid #1c2123; box-sizing: border-box;