From 307588dd31b8e8291e72e437f69a929b1081cfce Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Mon, 26 Jul 2021 15:33:07 +0200 Subject: [PATCH] Style tweaks --- .../ObjectEditorPanel/ObjectEditorPanel.tsx | 39 ++++++++++++------- .../propEditors/CompoundPropEditor.tsx | 3 +- .../propEditors/utils/SingleRowPropEditor.tsx | 3 ++ .../RightOverlay/Playhead.tsx | 4 +- .../RightOverlay/TopStrip.tsx | 4 +- .../toolbars/GlobalToolbar/GlobalToolbar.tsx | 2 + theatre/studio/src/uiComponents/Tooltip.tsx | 23 ----------- .../simpleContextMenu/RightClickMenu/Item.tsx | 20 ++++++++-- .../RightClickMenu/RightClickMenu.tsx | 5 ++- .../toolbar/ToolbarIconButton.tsx | 17 +------- .../toolbar/ToolbarSwitchSelect.tsx | 5 +-- 11 files changed, 59 insertions(+), 66 deletions(-) delete mode 100644 theatre/studio/src/uiComponents/Tooltip.tsx diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index ffe2918..1b2bedd 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -14,11 +14,11 @@ import { const Container = styled.div` background-color: transparent; pointer-events: none; - position: absolute; + position: fixed; left: 0; right: 0; - top: 10px; - bottom: 8px; + top: 12px; + bottom: 0px; z-index: ${panelZIndexes.propsPanel}; &:before { @@ -36,30 +36,39 @@ const Container = styled.div` const Content = styled.div` position: absolute; top: 0; - bottom: 0; right: 0; - width: 320px; - overflow-y: hidden; - display: flex; - flex-direction: column; - transform: translateX(100%); - pointer-events: auto; + width: 300px; + bottom: 0; + /* transform: translateX(100%); */ + /* pointer-events: none; */ ${Container}:hover & { transform: translateX(0); } ` -const Title = styled.div` - width: 100%; -` +const Title = styled.div`` + +const headerHeight = `32px` const Header = styled.div` - display: none; + height: ${headerHeight}; + display: flex; + align-items: center; + position: absolute; + top: 0; + left: 0; + right: 0; ` const Body = styled.div` - flex-grow: 1; + pointer-events: auto; + position: absolute; + top: ${headerHeight}; + left: 0; + right: 0; + height: auto; + max-height: calc(100% - ${headerHeight}); overflow-y: scroll; padding: 0; ` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index 1efd1a4..79391fe 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -19,7 +19,8 @@ import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator' const Container = styled.div` --step: 8px; - --left-pad: 18px; + --left-pad: 0px; + pointer-events: auto; ` const Header = styled.div` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx index 860cd6b..67e5e82 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx @@ -43,6 +43,7 @@ const Row = styled.div` align-items: stretch; --right-width: 60%; position: relative; + pointer-events: auto; ${rowBg}; ` @@ -69,6 +70,8 @@ const PropNameContainer = styled.div` text-overflow: ellipsis; display: flex; align-items: center; + user-select: none; + cursor: default; ${propNameText}; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx index 49be472..0808028 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx @@ -120,7 +120,7 @@ const Tooltip = styled.div` font-size: 10px; line-height: 18px; text-align: center; - ${Thumb}:hover & { + ${Thumb}:hover &, ${Container}.seeking & { display: block; } ` @@ -152,6 +152,7 @@ const Playhead: React.FC<{layoutP: Pointer}> = ({ onDragEnd() { setIsSeeking(false) }, + lockCursorTo: 'ew-resize', } }, []) @@ -175,6 +176,7 @@ const Playhead: React.FC<{layoutP: Pointer}> = ({ diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx index 5e7364d..af231c0 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx @@ -4,6 +4,7 @@ import React from 'react' import styled from 'styled-components' import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' import StampsGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/StampsGrid' +import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone' const height = 20 @@ -12,7 +13,7 @@ export const topStripTheme = { borderColor: `#1c1e21`, } -const Container = styled.div` +const Container = styled(PanelDragZone)` position: absolute; top: 0; left: 0; @@ -21,6 +22,7 @@ const Container = styled.div` box-sizing: border-box; background: ${topStripTheme.backgroundColor}; border-bottom: 1px solid ${topStripTheme.borderColor}; + pointer-events: auto; ` const TopStrip: React.FC<{layoutP: Pointer}> = ({ diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx index 60d86ba..b9827dc 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx @@ -11,10 +11,12 @@ const Container = styled.div` top: 12px; right: 12px; left: 12px; + height: 28px; pointer-events: none; display: flex; gap: 1rem; + justify-content: center; ` const GlobalToolbar: React.FC<{}> = (props) => { diff --git a/theatre/studio/src/uiComponents/Tooltip.tsx b/theatre/studio/src/uiComponents/Tooltip.tsx deleted file mode 100644 index 218b075..0000000 --- a/theatre/studio/src/uiComponents/Tooltip.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type {VFC} from 'react' -import React from 'react' -import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit' -import type {TooltipProps} from 'reakit' -import styled from 'styled-components' - -export {TooltipReference, useTooltipState} - -const Container = styled(TooltipImpl)` - padding: 8px 14px; - - font-size: 11px; - line-height: 1.25em; - border-radius: 2px; - background-color: #201f20; - color: white; - pointer-events: none; - font-weight: 500; -` - -export const Tooltip: VFC = ({className, ...props}) => ( - -) diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/Item.tsx index 83c9d00..2a31259 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/Item.tsx @@ -2,7 +2,7 @@ import type {ElementType} from 'react' import React from 'react' import styled from 'styled-components' -export const height = 30 +export const height = 26 const Container = styled.li` height: ${height}px; @@ -10,10 +10,22 @@ const Container = styled.li` margin: 0; display: flex; align-items: center; - font-weight: 600; + font-size: 11px; + font-weight: 400; + position: relative; - &:hover { - background: #2bb5de; + &:after { + position: absolute; + inset: 2px 1px; + display: block; + content: ' '; + pointer-events: none; + z-index: -1; + border-radius: 3px; + } + + &:hover:after { + background-color: rgba(63, 174, 191, 0.75); } ` diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/RightClickMenu.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/RightClickMenu.tsx index c54f124..813c677 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/RightClickMenu.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/RightClickMenu/RightClickMenu.tsx @@ -19,14 +19,15 @@ const Container = styled.ul` position: absolute; min-width: ${minWidth}px; z-index: 10000; - background: ${transparentize(0.1, '#111')}; + background: ${transparentize(0.2, '#111')}; color: white; list-style-type: none; - padding: 2px; + padding: 2px 0; margin: 0; border-radius: 1px; cursor: default; pointer-events: all; + border-radius: 3px; ` export type IContextMenuItem = { diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 3bbf617..aef7399 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -1,19 +1,13 @@ import type {ReactElement} from 'react' import React from 'react' import styled from 'styled-components' -import { - Tooltip, - TooltipReference, - useTooltipState, -} from '@theatre/studio/uiComponents/Tooltip' import type {ButtonProps} from 'reakit' -import {Button} from 'reakit' import {outlinePanelTheme} from '@theatre/studio/panels/OutlinePanel/BaseItem' import {darken, opacify} from 'polished' const {baseBg, baseBorderColor, baseFontColor} = outlinePanelTheme -export const TheButton = styled(TooltipReference)` +export const TheButton = styled.button` pointer-events: auto; position: relative; display: flex; @@ -66,18 +60,11 @@ const ToolbarIconButton: React.FC< label: string } > = ({label, icon, ...props}) => { - const tooltip = useTooltipState() return ( <> - + {icon} - {label} ) } diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx index e9c9ac3..fa55aea 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx @@ -3,7 +3,6 @@ import React from 'react' import type {IconType} from 'react-icons' import {Group, Button} from 'reakit' import styled from 'styled-components' -import {Tooltip, useTooltipState} from '@theatre/studio/uiComponents/Tooltip' import {TheButton as ButtonImpl} from './ToolbarIconButton' const Opt = styled(ButtonImpl)`` @@ -21,19 +20,17 @@ function OptionButton({ onClick: () => void isSelected: boolean }) { - const tooltip = useTooltipState() return ( <> {icon} - {label} ) }