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

Style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-07-26 18:02:08 +02:00
parent 307588dd31
commit d621794280
4 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import {isSheetObject} from '@theatre/shared/instanceTypes'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import { import {
panelZIndexes, panelZIndexes,
TitleBar_Piece,
TitleBar_Punctuation, TitleBar_Punctuation,
} from '@theatre/studio/panels/BasePanel/common' } from '@theatre/studio/panels/BasePanel/common'
@ -37,7 +38,7 @@ const Content = styled.div`
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 300px; width: 260px;
bottom: 0; bottom: 0;
/* transform: translateX(100%); */ /* transform: translateX(100%); */
/* pointer-events: none; */ /* pointer-events: none; */
@ -47,7 +48,13 @@ const Content = styled.div`
} }
` `
const Title = styled.div`` const Title = styled.div`
margin: 0 10px;
color: #ffffffc2;
font-weight: 500;
font-size: 10px;
user-select: none;
`
const headerHeight = `32px` const headerHeight = `32px`
@ -59,6 +66,17 @@ const Header = styled.div`
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
&:after {
position: absolute;
inset: 4px 0px;
display: block;
content: ' ';
pointer-events: none;
z-index: -1;
background-color: #69777947;
border-radius: 2px 0 0 2px;
}
` `
const Body = styled.div` const Body = styled.div`
@ -71,6 +89,7 @@ const Body = styled.div`
max-height: calc(100% - ${headerHeight}); max-height: calc(100% - ${headerHeight});
overflow-y: scroll; overflow-y: scroll;
padding: 0; padding: 0;
user-select: none;
` `
const ObjectEditorPanel: React.FC<{}> = (props) => { const ObjectEditorPanel: React.FC<{}> = (props) => {
@ -88,11 +107,15 @@ const ObjectEditorPanel: React.FC<{}> = (props) => {
<Content> <Content>
<Header> <Header>
<Title> <Title>
{obj.sheet.address.sheetId}{' '} <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece>
<TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation> <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
{obj.sheet.address.sheetInstanceId}{' '} <TitleBar_Piece>
{obj.sheet.address.sheetInstanceId}{' '}
</TitleBar_Piece>
<TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation> <TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
{obj.address.objectKey} <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
</Title> </Title>
</Header> </Header>
<Body> <Body>

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

@ -57,6 +57,8 @@ const PropName = styled.div`
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
user-select: none;
${() => propNameText}; ${() => propNameText};
` `

1
theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
View file

@ -35,6 +35,7 @@ const Content = styled.div`
flex-direction: column; flex-direction: column;
transform: translateX(-100%); transform: translateX(-100%);
pointer-events: auto; pointer-events: auto;
user-select: none;
/* background-color: blue; */ /* background-color: blue; */
${Container}:hover & { ${Container}:hover & {

4
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -15,8 +15,8 @@ export const TheButton = styled.button`
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
width: 28px; width: 24px;
height: 28px; height: 24px;
outline: none; outline: none;
color: ${baseFontColor}; color: ${baseFontColor};