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

Adjusted alignment of prop editors

Browse source
This commit is contained in:
Aria Minaei 2021-07-16 11:09:05 +02:00
parent 232ffa7836
commit 997a516f87
3 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx
View file

@ -16,8 +16,8 @@ const Container = styled(PanelWrapper)`
overflow-y: hidden;
display: flex;
flex-direction: column;
/* background-color: transparent; */
background-color: #282b2ff0;
background-color: transparent;
/* background-color: #282b2ff0; */
box-shadow: none;
&:after {
@ -28,7 +28,7 @@ const Container = styled(PanelWrapper)`
width: 1px;
bottom: 0;
top: 0;
border-left: 1px solid #3a3a44;
/* border-left: 1px solid #3a3a44; */
}
`

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

@ -20,15 +20,15 @@ const Container = styled.div`
`
export const rowBg = css`
/* &:after {
&:after {
position: absolute;
display: block;
inset: 0px 0 0px calc(10px + var(--left-pad) + var(--depth) * var(--step));
inset: 0px 0 1px calc(0px + var(--left-pad) + var(--depth) * var(--step));
content: ' ';
z-index: -1;
background-color: #282b2f;
opacity: 0.97;
} */
opacity: 0.95;
}
`
const Header = styled.div`
@ -42,15 +42,17 @@ const Header = styled.div`
${rowBg};
`
export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
const IconContainer = styled.div`
width: 12px;
margin-right: -12px;
margin-left: calc(var(--left-pad) + var(--depth) * var(--step));
margin-left: ${indentationFormula};
font-size: 9px;
text-align: center;
transform: rotateZ(90deg);
position: relative;
left: -10px;
left: -14px;
`
const PropName = styled.div`

7
theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
View file

@ -8,7 +8,10 @@ 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'
import {
indentationFormula,
rowBg,
} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor'
export const propNameText = css`
font-weight: 300;
@ -34,7 +37,7 @@ const Row = styled.div`
const Left = styled.div`
box-sizing: border-box;
padding-left: calc(var(--left-pad) + (var(--depth) + 1) * var(--step));
padding-left: ${indentationFormula};
padding-right: 4px;
display: flex;
flex-direction: row;