From 541b6287e2ad5f433839dc24277b5f15158e89f5 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 9 Jul 2021 16:26:18 +0200 Subject: [PATCH] More style tweaks --- .../propEditors/BooleanPropEditor.tsx | 7 ++- .../propEditors/CompoundPropEditor.tsx | 4 +- .../propEditors/utils/SingleRowPropEditor.tsx | 49 +++++++++++-------- .../uiComponents/form/BasicNumberEditor.tsx | 6 +-- .../uiComponents/form/BasicSelectEditor.tsx | 17 +++++-- 5 files changed, 53 insertions(+), 30 deletions(-) diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx index 6e6a91e..0621755 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx @@ -3,6 +3,11 @@ import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import React, {useCallback} from 'react' import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp' import {SingleRowPropEditor} from './utils/SingleRowPropEditor' +import styled from 'styled-components' + +const Input = styled.input` + margin-left: 6px; +` const BooleanPropEditor: React.FC<{ propConfig: PropTypeConfig_Boolean @@ -20,7 +25,7 @@ const BooleanPropEditor: React.FC<{ return ( - + ) } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index eebe906..65cbf96 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -13,7 +13,7 @@ import {GoChevronRight} from 'react-icons/go' import styled from 'styled-components' import DeterminePropEditor from './DeterminePropEditor' import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors' -import {labelText} from './utils/SingleRowPropEditor' +import {propNameText} from './utils/SingleRowPropEditor' const Container = styled.div<{depth: number}>` --depth: ${(props) => props.depth}; @@ -37,7 +37,7 @@ const IconContainer = styled.div` const PropName = styled.div` margin-right: 4px; cursor: default; - ${labelText} + ${propNameText} ` const SubProps = styled.div<{depth: number; lastSubIsComposite: boolean}>` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx index bc0ef50..9cf72a9 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx @@ -9,38 +9,46 @@ import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/Objec import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' import styled, {css} from 'styled-components' -export const labelText = css` +export const propNameText = css` font-weight: 300; font-size: 11px; color: #9a9a9a; - text-shadow: 0.5px 0.5px 2px black; + text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3); &:hover { color: white; } ` -const Container = styled.div` +const Row = styled.div` display: flex; height: 30px; - justify-content: flex-end; + justify-content: flex-start; align-items: center; ` -const Label = styled.label` +const PropNameContainer = styled.div` margin-right: 4px; text-align: right; - ${labelText}; + flex: 0 0; + flex-basis: 106px; + + ${propNameText}; ` -const Body = styled.label` + +const ControlsContainer = styled.div` + flex-basis: 8px; + flex: 0 0; +` + +const InputContainer = styled.div` display: flex; align-items: center; - padding-left: 8px; + justify-content: stretch; + padding: 0 16px 0 2px; box-sizing: border-box; - width: 140px; height: 100%; - margin-right: 16px; - margin-left: 4px; + flex: 1 1; ` export const SingleRowPropEditor: React.FC<{ @@ -50,27 +58,28 @@ export const SingleRowPropEditor: React.FC<{ }> = ({propConfig, pointerToProp, stuff, children}) => { const label = propConfig.label ?? last(getPointerParts(pointerToProp).path) - const [labelRef, labelNode] = useRefAndState(null) + const [propNameContainerRef, propNameContainer] = + useRefAndState(null) - const [contextMenu] = useContextMenu(labelNode, { + const [contextMenu] = useContextMenu(propNameContainer, { items: stuff.contextMenuItems, }) const color = shadeToColor[stuff.shade] return ( - + {contextMenu} - - {stuff.controlIndicators} - {children} - + + {stuff.controlIndicators} + {children} + ) } diff --git a/theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx b/theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx index dec2231..46bc76c 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx @@ -8,9 +8,8 @@ import DraggableArea from '@theatre/studio/uiComponents/DraggableArea' type IMode = IState['mode'] const Container = styled.div<{mode: IMode}>` - display: flex; - align-items: center; height: 100%; + width: 100%; ` const Input = styled.input` @@ -65,6 +64,7 @@ const BasicNumberEditor: React.FC<{ temporarilySetValue: (v: number) => void discardTemporaryValue: () => void permenantlySetValue: (v: number) => void + className?: string }> = (propsA) => { const [stateA, setState] = useState({mode: 'noFocus'}) @@ -238,7 +238,7 @@ const BasicNumberEditor: React.FC<{ ) return ( - + void options: Record -}> = ({value, onChange, options}) => { + className?: string +}> = ({value, onChange, options, className}) => { const _onChange = useCallback( (el: React.ChangeEvent) => { onChange(String(el.target.value)) @@ -35,7 +44,7 @@ const BasicSelectEditor: React.FC<{ [onChange], ) return ( - {Object.keys(options).map((key, i) => (