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; overflow-y: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* background-color: transparent; */ background-color: transparent;
background-color: #282b2ff0; /* background-color: #282b2ff0; */
box-shadow: none; box-shadow: none;
&:after { &:after {
@ -28,7 +28,7 @@ const Container = styled(PanelWrapper)`
width: 1px; width: 1px;
bottom: 0; bottom: 0;
top: 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` export const rowBg = css`
/* &:after { &:after {
position: absolute; position: absolute;
display: block; 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: ' '; content: ' ';
z-index: -1; z-index: -1;
background-color: #282b2f; background-color: #282b2f;
opacity: 0.97; opacity: 0.95;
} */ }
` `
const Header = styled.div` const Header = styled.div`
@ -42,15 +42,17 @@ const Header = styled.div`
${rowBg}; ${rowBg};
` `
export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
const IconContainer = styled.div` const IconContainer = styled.div`
width: 12px; width: 12px;
margin-right: -12px; margin-right: -12px;
margin-left: calc(var(--left-pad) + var(--depth) * var(--step)); 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: -10px; left: -14px;
` `
const PropName = styled.div` 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 type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
import {shadeToColor} 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 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` export const propNameText = css`
font-weight: 300; font-weight: 300;
@ -34,7 +37,7 @@ const Row = styled.div`
const Left = styled.div` const Left = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-left: calc(var(--left-pad) + (var(--depth) + 1) * var(--step)); padding-left: ${indentationFormula};
padding-right: 4px; padding-right: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;