From 0fad59841607eb749c882a4dcf526c2290ed5b00 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 16 Jul 2021 12:17:56 +0200 Subject: [PATCH] More style tweaks --- theatre/studio/src/UIRoot/PanelsRoot.tsx | 3 +- .../ObjectEditorPanel/ObjectEditorPanel.tsx | 12 ++++-- .../propEditors/CompoundPropEditor.tsx | 2 +- .../GraphEditorToggle.tsx | 3 +- .../DopeSheet/Left/AnyCompositeRow.tsx | 5 ++- .../DopeSheet/Left/PrimitivePropRow.tsx | 2 + .../SequenceEditorPanel.tsx | 37 +++++++++++++++---- .../SequenceEditorPanel/layout/layout.ts | 2 +- .../panels/SequenceEditorPanel/layout/tree.ts | 6 +-- 9 files changed, 53 insertions(+), 19 deletions(-) diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx index ab54ac9..6d56476 100644 --- a/theatre/studio/src/UIRoot/PanelsRoot.tsx +++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx @@ -4,6 +4,7 @@ import React from 'react' import getStudio from '@theatre/studio/getStudio' import {useVal} from '@theatre/dataverse-react' import PaneWrapper from '@theatre/studio/panels/BasePanel/PaneWrapper' +import SequenceEditorPanel from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' const PanelsRoot: React.FC = () => { const panes = useVal(getStudio().paneManager.allPanesD) @@ -18,7 +19,7 @@ const PanelsRoot: React.FC = () => { {/* {paneEls} */} - {/* */} + ) } diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index 4c1dc0c..c3fef33 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -52,7 +52,12 @@ const F1_1 = styled.div` display: none; ` -export const Punctuation = styled.span` +export const TitleBar_Piece = styled.span` + white-space: nowrap; +` + +export const TitleBar_Punctuation = styled.span` + white-space: nowrap; color: ${theme.panel.head.punctuation.color}; ` @@ -109,9 +114,10 @@ const Content: React.FC<{}> = () => { - {obj.sheet.address.sheetId} {':'}  + {obj.sheet.address.sheetId}{' '} + {':'}  {obj.sheet.address.sheetInstanceId}{' '} -  {'>'}  +  {'>'}  {obj.address.objectKey} diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index 7ccac55..1c5f1e8 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -22,7 +22,7 @@ export const rowBg = css` &:after { position: absolute; display: block; - inset: 0px 0 1px calc(0px + var(--left-pad) + var(--depth) * var(--step)); + inset: 0px 0 1px calc(-2px + var(--left-pad) + var(--depth) * var(--step)); content: ' '; z-index: -1; background-color: #282b2f; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx index b38c703..3ce6081 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/BottomRectangleThingy/GraphEditorToggle.tsx @@ -16,7 +16,8 @@ const Container = styled.button<{isOpen: boolean}>` padding: 0 8px; display: flex; color: #656d77; - line-height: 22px; + line-height: 20px; + font-size: 10px; &:hover { color: white; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx index 187000d..49eb8e1 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx @@ -4,6 +4,7 @@ import type {VoidFn} from '@theatre/shared/utils/types' import React from 'react' import {GoChevronRight} from 'react-icons/go' import styled from 'styled-components' +import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor' export const Container = styled.li<{depth: number}>` --depth: ${(props) => props.depth}; @@ -31,7 +32,9 @@ const Header = styled(BaseHeader)<{ ${(props) => props.isSelected && `background: blue`}; ` -const Head_Label = styled.span`` +const Head_Label = styled.span` + ${propNameText}; +` const Head_Icon = styled.span<{isOpen: boolean}>` width: 12px; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx index 5fbf0c0..95a6bd3 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx @@ -12,6 +12,7 @@ import {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEdit import {nextPrevCursorsTheme} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/NextPrevKeyframeCursors' import {graphEditorColors} from '@theatre/studio/panels/SequenceEditorPanel/GraphEditor/GraphEditor' import {BaseHeader, Container as BaseContainer} from './AnyCompositeRow' +import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor' const theme = { label: { @@ -74,6 +75,7 @@ const GraphIcon = () => ( const Head_Label = styled.span` margin-right: 4px; + ${propNameText}; ` const PrimitivePropRow: React.FC<{ diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index 12be362..4116c03 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -6,8 +6,8 @@ import {prism, val} from '@theatre/dataverse' import React from 'react' import styled from 'styled-components' import { - F1, - Punctuation, + TitleBar_Piece, + TitleBar_Punctuation, } from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' import DopeSheet from './DopeSheet/DopeSheet' import GraphEditor from './GraphEditor/GraphEditor' @@ -27,6 +27,24 @@ import {uniq} from 'lodash-es' 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 = (() => { const scrollableArea = 0 const rightOverlay = scrollableArea + 1 @@ -172,12 +190,15 @@ const Header: React.FC<{layoutP: Pointer}> = ({ width: val(layoutP.leftDims.width), }} > - - {sheet.address.sheetId} {':'}  - {sheet.address.sheetInstanceId}{' '} -  {'>'}  - Sequence - + + {sheet.address.sheetId} + + {':'}  + {sheet.address.sheetInstanceId} + +  {'>'}  + Sequence + ) }, [layoutP]) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts index 62bc342..6bdcb22 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts @@ -156,7 +156,7 @@ export function sequenceEditorPanelLayout( } const graphEditorOpen = graphEditorState?.isOpen === true - const bottomRectangleThingyHeight = 26 + const bottomRectangleThingyHeight = 20 const graphEditorHeight = Math.floor( (graphEditorOpen ? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts index 8fa09c0..6792f2a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts @@ -12,8 +12,8 @@ import type {PathToProp} from '@theatre/shared/utils/addresses' import type {SequenceTrackId} from '@theatre/shared/utils/ids' import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types' import {prism, val} from '@theatre/dataverse' -import {F1Height as F1Height} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel' import logger from '@theatre/shared/logger' +import {titleBarHeight} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' export type SequenceEditorTree_Row = { type: Type @@ -71,7 +71,7 @@ export const calculateSequenceEditorTree = ( sheet: Sheet, ): SequenceEditorTree => { prism.ensurePrism() - let topSoFar = F1Height + let topSoFar = titleBarHeight let nSoFar = 0 const tree: SequenceEditorTree = { @@ -121,7 +121,7 @@ export const calculateSequenceEditorTree = ( sheetObject, trackSetups, [], - sheetObject.template.config.props, + sheetObject.template.config, row.children, level + 1, )