From d621794280633239489cfeffecc91c183c1f6f76 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Mon, 26 Jul 2021 18:02:08 +0200 Subject: [PATCH] Style tweaks --- .../ObjectEditorPanel/ObjectEditorPanel.tsx | 33 ++++++++++++++++--- .../propEditors/CompoundPropEditor.tsx | 2 ++ .../src/panels/OutlinePanel/OutlinePanel.tsx | 1 + .../toolbar/ToolbarIconButton.tsx | 4 +-- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index 1b2bedd..04dfa62 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -8,6 +8,7 @@ import {isSheetObject} from '@theatre/shared/instanceTypes' import type SheetObject from '@theatre/core/sheetObjects/SheetObject' import { panelZIndexes, + TitleBar_Piece, TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' @@ -37,7 +38,7 @@ const Content = styled.div` position: absolute; top: 0; right: 0; - width: 300px; + width: 260px; bottom: 0; /* transform: translateX(100%); */ /* 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` @@ -59,6 +66,17 @@ const Header = styled.div` top: 0; left: 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` @@ -71,6 +89,7 @@ const Body = styled.div` max-height: calc(100% - ${headerHeight}); overflow-y: scroll; padding: 0; + user-select: none; ` const ObjectEditorPanel: React.FC<{}> = (props) => { @@ -88,11 +107,15 @@ const ObjectEditorPanel: React.FC<{}> = (props) => {
- {obj.sheet.address.sheetId}{' '} + <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> + <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> - {obj.sheet.address.sheetInstanceId}{' '} + <TitleBar_Piece> + {obj.sheet.address.sheetInstanceId}{' '} + </TitleBar_Piece> + <TitleBar_Punctuation> {'>'} </TitleBar_Punctuation> - {obj.address.objectKey} + <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index 79391fe..ad61959 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -57,6 +57,8 @@ const PropName = styled.div` height: 100%; display: flex; align-items: center; + user-select: none; + ${() => propNameText}; ` diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index 71c8594..a7e0a6c 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -35,6 +35,7 @@ const Content = styled.div` flex-direction: column; transform: translateX(-100%); pointer-events: auto; + user-select: none; /* background-color: blue; */ ${Container}:hover & { diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index aef7399..a757650 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -15,8 +15,8 @@ export const TheButton = styled.button` justify-content: center; font-size: 14px; font-weight: 600; - width: 28px; - height: 28px; + width: 24px; + height: 24px; outline: none; color: ${baseFontColor};