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

More style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-07-16 14:05:51 +02:00
parent 0fad598416
commit f06f18f838
5 changed files with 22 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
theatre/studio/src/panels/BasePanel/PaneWrapper.tsx
View file

@ -4,7 +4,7 @@ import type {PaneInstance} from '@theatre/studio/TheatreStudio'
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { import {
F1, TitleBar,
F2 as F2Impl, F2 as F2Impl,
} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
import BasePanel from './BasePanel' import BasePanel from './BasePanel'
@ -57,9 +57,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
return ( return (
<Container> <Container>
<PanelDragZone> <PanelDragZone>
<F1> <TitleBar>
<Title>{paneInstance.instanceId}</Title> <Title>{paneInstance.instanceId}</Title>
</F1> </TitleBar>
</PanelDragZone> </PanelDragZone>
<F2> <F2>
<Comp id={paneInstance.instanceId} object={paneInstance.object} /> <Comp id={paneInstance.instanceId} object={paneInstance.object} />

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

@ -34,18 +34,22 @@ const Container = styled(PanelWrapper)`
const emptyPanel = <Container /> const emptyPanel = <Container />
export const F1Height = 40 export const titleBarHeight = 20
export const F1 = styled.div` export const TitleBar = styled.div`
height: ${F1Height}px; height: ${titleBarHeight}px;
box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 14px; padding: 0 10px;
color: ${theme.panel.head.title.color}; color: #adadadb3;
font-size: 11px; border-bottom: 1px solid rgb(0 0 0 / 13%);
border-bottom: 2px solid rgba(0, 0, 0, 0.45); background: #00000017;
background: ${theme.panel.bg}; font-size: 10px;
box-sizing: border-box; font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
` `
const F1_1 = styled.div` const F1_1 = styled.div`
@ -106,7 +110,7 @@ const Content: React.FC<{}> = () => {
const obj = selection.find((s): s is SheetObject => isSheetObject(s)) const obj = selection.find((s): s is SheetObject => isSheetObject(s))
if (!obj) return emptyPanel if (!obj) return <></>
const key = prism.memo('key', () => JSON.stringify(obj.address), [obj]) const key = prism.memo('key', () => JSON.stringify(obj.address), [obj])

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

@ -36,6 +36,7 @@ const Container = styled(PanelWrapper)`
flex-direction: column; flex-direction: column;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
pointer-events: none;
` `
const Title = styled.div` const Title = styled.div`

23
theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
View file

@ -6,6 +6,7 @@ import {prism, val} from '@theatre/dataverse'
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { import {
TitleBar,
TitleBar_Piece, TitleBar_Piece,
TitleBar_Punctuation, TitleBar_Punctuation,
} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
@ -27,24 +28,6 @@ import {uniq} from 'lodash-es'
const Container = styled(PanelWrapper)`` const Container = styled(PanelWrapper)``
export const titleBarHeight = 20
const TitleBar = styled.div`
height: ${titleBarHeight}px;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 10px;
color: #adadadb3;
border-bottom: 1px solid rgb(0 0 0 / 13%);
background: #00000017;
font-size: 10px;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`
export const zIndexes = (() => { export const zIndexes = (() => {
const scrollableArea = 0 const scrollableArea = 0
const rightOverlay = scrollableArea + 1 const rightOverlay = scrollableArea + 1
@ -134,10 +117,10 @@ const Content: React.FC<{}> = () => {
) )
const selectedTemplates = uniq(selectedSheets.map((s) => s.template)) const selectedTemplates = uniq(selectedSheets.map((s) => s.template))
if (selectedTemplates.length !== 1) return <EmptyPanel {...panelSize} /> if (selectedTemplates.length !== 1) return <></>
const sheet = selectedSheets[0] const sheet = selectedSheets[0]
if (!sheet) return <EmptyPanel {...panelSize} /> if (!sheet) return <></>
const panelSizeP = valToAtom('panelSizeP', panelSize).pointer const panelSizeP = valToAtom('panelSizeP', panelSize).pointer

2
theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts
View file

@ -13,7 +13,7 @@ import type {SequenceTrackId} from '@theatre/shared/utils/ids'
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types' import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
import {prism, val} from '@theatre/dataverse' import {prism, val} from '@theatre/dataverse'
import logger from '@theatre/shared/logger' import logger from '@theatre/shared/logger'
import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import {titleBarHeight} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
export type SequenceEditorTree_Row<Type> = { export type SequenceEditorTree_Row<Type> = {
type: Type type: Type