variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Styling tweaks to compound prop editor

Browse source
This commit is contained in:
Aria Minaei 2021-07-16 11:31:33 +02:00
parent 3aa73b66ff
commit ec563f430f
1 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
View file

@ -8,7 +8,6 @@ import {getPointerParts} from '@theatre/dataverse'
import last from 'lodash-es/last' import last from 'lodash-es/last'
import {darken, transparentize} from 'polished' import {darken, transparentize} from 'polished'
import React from 'react' import React from 'react'
import {HiOutlineChevronRight} from 'react-icons/all'
import styled, {css} from 'styled-components' import styled, {css} from 'styled-components'
import DeterminePropEditor from './DeterminePropEditor' import DeterminePropEditor from './DeterminePropEditor'
import {propNameText} from './utils/SingleRowPropEditor' import {propNameText} from './utils/SingleRowPropEditor'
@ -35,7 +34,7 @@ const Header = styled.div`
height: 30px; height: 30px;
/* padding-left: calc(var(--left-pad) + var(--depth) * var(--step)); */ /* padding-left: calc(var(--left-pad) + var(--depth) * var(--step)); */
display: flex; display: flex;
align-items: center; align-items: stretch;
/* color: ${theme.panel.body.compoudThing.label.color}; */ /* color: ${theme.panel.body.compoudThing.label.color}; */
position: relative; position: relative;
@ -44,15 +43,21 @@ const Header = styled.div`
export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))` export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
const Padding = styled.div`
padding-left: ${indentationFormula};
display: flex;
align-items: center;
`
const IconContainer = styled.div` const IconContainer = styled.div`
width: 12px; width: 12px;
margin-right: -12px; margin-right: -12px;
margin-left: ${indentationFormula}; /* margin-left: ${indentationFormula}; */
font-size: 9px; font-size: 9px;
text-align: center; text-align: center;
transform: rotateZ(90deg); transform: rotateZ(90deg);
position: relative; position: relative;
left: -14px; left: -18px;
` `
const PropName = styled.div` const PropName = styled.div`
@ -97,15 +102,17 @@ const CompoundPropEditor: React.FC<{
// @ts-ignore // @ts-ignore
style={{'--depth': depth - 1}} style={{'--depth': depth - 1}}
> >
<IconContainer> <Padding>
<HiOutlineChevronRight /> {/* <IconContainer>
</IconContainer> <HiOutlineChevronRight />
{/* <NextPrevKeyframeCursors </IconContainer> */}
{/* <NextPrevKeyframeCursors
jumpToPosition={voidFn} jumpToPosition={voidFn}
toggleKeyframeOnCurrentPosition={voidFn} toggleKeyframeOnCurrentPosition={voidFn}
/> */} /> */}
<DefaultOrStaticValueIndicator hasStaticOverride={false} /> <DefaultOrStaticValueIndicator hasStaticOverride={false} />
<PropName>{propName || 'Props'}</PropName> <PropName>{propName || 'Props'}</PropName>
</Padding>
</Header> </Header>
} }