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