From 3357ba5f5be8570a99cd92695ce9001b516ffe2e Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Sat, 21 Aug 2021 16:56:23 +0200 Subject: [PATCH] Style tweaks --- .../src/panels/OutlinePanel/OutlinePanel.tsx | 40 +++++++++++-------- .../src/uiComponents/Popover/BasicPopover.tsx | 2 +- .../src/uiComponents/Popover/ErrorTooltip.tsx | 9 +++++ 3 files changed, 33 insertions(+), 18 deletions(-) create mode 100644 theatre/studio/src/uiComponents/Popover/ErrorTooltip.tsx diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index f107083..d143324 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -11,6 +11,7 @@ import {val} from '@theatre/dataverse' import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip' import type {$IntentionalAny} from '@theatre/shared/utils/types' import BasicTooltip from '@theatre/studio/uiComponents/Popover/BasicTooltip' +import ErrorTooltip from '@theatre/studio/uiComponents/Popover/ErrorTooltip' const Container = styled.div` background-color: transparent; @@ -53,7 +54,7 @@ const Content = styled.div` left: 0; right: 0; bottom: 0; - transform: translateX(-100%); + /* transform: translateX(-100%); */ pointer-events: none; ${Container}:hover & { @@ -61,14 +62,14 @@ const Content = styled.div` } ` -const ErrorTooltip = styled(BasicTooltip)`` - const headerHeight = `32px` const TriggerButton = styled(ToolbarIconButton)` ${Container}:hover & { - --item-bg: rgba(36, 38, 42, 0.95); - --item-border-color: rgba(255, 255, 255, 0.22); + background-color: rgba(36, 38, 42, 0.95); + &:after { + border-color: rgba(255, 255, 255, 0.22); + } color: white; } ` @@ -81,6 +82,8 @@ const Title = styled.div` user-select: none; position: relative; display: none; + background-color: rgba(60, 60, 60, 0.2); + height: 24px; ${Container}:hover & { display: block; } @@ -105,7 +108,7 @@ const Body = styled.div` height: auto; max-height: calc(100% - ${headerHeight}); overflow-y: scroll; - overflow-x: visible; + overflow-x: hidden; padding: 0; user-select: none; ` @@ -140,21 +143,24 @@ const OutlinePanel: React.FC<{}> = (props) => { ) }, []) - const [errorTooltip, triggerButtonRef] = useTooltip( - {enabled: conflicts.length > 0, enterDelay: 0}, - () => ( - - {conflicts.length === 1 - ? `There is a state conflict in project "${conflicts[0].projectId}". Select the project in the outline below in order to fix it.` - : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `} - - ), + const [triggerTooltip, triggerButtonRef] = useTooltip( + {enterDelay: conflicts.length > 0 ? 0 : 200}, + () => + conflicts.length > 0 ? ( + + {conflicts.length === 1 + ? `There is a state conflict in project "${conflicts[0].projectId}". Select the project in the outline below in order to fix it.` + : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `} + + ) : ( + Outline + ), ) return ( - {errorTooltip} + {triggerTooltip} @@ -163,7 +169,7 @@ const OutlinePanel: React.FC<{}> = (props) => { {conflicts.length} ) : null} - Outline + {/* Outline */} diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index e8bf94f..c320cde 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -23,7 +23,7 @@ const Container = styled.div` border-radius: 3px; z-index: 10000; border: 1px solid var(--popover-inner-stroke); - box-shadow: 0 6px 8px -4px black, 0 0 0 1px var(--popover-outer-stroke); + box-shadow: 0 0 0 1px var(--popover-outer-stroke), 0 6px 8px -4px black; backdrop-filter: blur(8px); & a { diff --git a/theatre/studio/src/uiComponents/Popover/ErrorTooltip.tsx b/theatre/studio/src/uiComponents/Popover/ErrorTooltip.tsx new file mode 100644 index 0000000..5989d04 --- /dev/null +++ b/theatre/studio/src/uiComponents/Popover/ErrorTooltip.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components' +import BasicTooltip from './BasicTooltip' + +const ErrorTooltip = styled(BasicTooltip)` + --popover-outer-stroke: #e11c1c; + --popover-bg: #391515; +` + +export default ErrorTooltip