variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-08-21 16:56:23 +02:00
parent cd02f1a6c3
commit 3357ba5f5b
3 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
View file

@ -11,6 +11,7 @@ import {val} from '@theatre/dataverse'
import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip' import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip'
import type {$IntentionalAny} from '@theatre/shared/utils/types' import type {$IntentionalAny} from '@theatre/shared/utils/types'
import BasicTooltip from '@theatre/studio/uiComponents/Popover/BasicTooltip' import BasicTooltip from '@theatre/studio/uiComponents/Popover/BasicTooltip'
import ErrorTooltip from '@theatre/studio/uiComponents/Popover/ErrorTooltip'
const Container = styled.div` const Container = styled.div`
background-color: transparent; background-color: transparent;
@ -53,7 +54,7 @@ const Content = styled.div`
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
transform: translateX(-100%); /* transform: translateX(-100%); */
pointer-events: none; pointer-events: none;
${Container}:hover & { ${Container}:hover & {
@ -61,14 +62,14 @@ const Content = styled.div`
} }
` `
const ErrorTooltip = styled(BasicTooltip)``
const headerHeight = `32px` const headerHeight = `32px`
const TriggerButton = styled(ToolbarIconButton)` const TriggerButton = styled(ToolbarIconButton)`
${Container}:hover & { ${Container}:hover & {
--item-bg: rgba(36, 38, 42, 0.95); background-color: rgba(36, 38, 42, 0.95);
--item-border-color: rgba(255, 255, 255, 0.22); &:after {
border-color: rgba(255, 255, 255, 0.22);
}
color: white; color: white;
} }
` `
@ -81,6 +82,8 @@ const Title = styled.div`
user-select: none; user-select: none;
position: relative; position: relative;
display: none; display: none;
background-color: rgba(60, 60, 60, 0.2);
height: 24px;
${Container}:hover & { ${Container}:hover & {
display: block; display: block;
} }
@ -105,7 +108,7 @@ const Body = styled.div`
height: auto; height: auto;
max-height: calc(100% - ${headerHeight}); max-height: calc(100% - ${headerHeight});
overflow-y: scroll; overflow-y: scroll;
overflow-x: visible; overflow-x: hidden;
padding: 0; padding: 0;
user-select: none; user-select: none;
` `
@ -140,21 +143,24 @@ const OutlinePanel: React.FC<{}> = (props) => {
) )
}, []) }, [])
const [errorTooltip, triggerButtonRef] = useTooltip( const [triggerTooltip, triggerButtonRef] = useTooltip(
{enabled: conflicts.length > 0, enterDelay: 0}, {enterDelay: conflicts.length > 0 ? 0 : 200},
() => ( () =>
conflicts.length > 0 ? (
<ErrorTooltip> <ErrorTooltip>
{conflicts.length === 1 {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 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. `} : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `}
</ErrorTooltip> </ErrorTooltip>
) : (
<BasicTooltip>Outline</BasicTooltip>
), ),
) )
return ( return (
<Container> <Container>
<TriggerContainer> <TriggerContainer>
{errorTooltip} {triggerTooltip}
<TriggerButton ref={triggerButtonRef as $IntentionalAny}> <TriggerButton ref={triggerButtonRef as $IntentionalAny}>
<VscListTree /> <VscListTree />
</TriggerButton> </TriggerButton>
@ -163,7 +169,7 @@ const OutlinePanel: React.FC<{}> = (props) => {
{conflicts.length} {conflicts.length}
</NumberOfConflictsIndicator> </NumberOfConflictsIndicator>
) : null} ) : null}
<Title>Outline</Title> {/* <Title>Outline</Title> */}
</TriggerContainer> </TriggerContainer>
<Content> <Content>
<Body> <Body>

2
theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
View file

@ -23,7 +23,7 @@ const Container = styled.div`
border-radius: 3px; border-radius: 3px;
z-index: 10000; z-index: 10000;
border: 1px solid var(--popover-inner-stroke); 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); backdrop-filter: blur(8px);
& a { & a {

9
theatre/studio/src/uiComponents/Popover/ErrorTooltip.tsx Normal file
View file

@ -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