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

Trigger for the OutlinePanel

Browse source
This commit is contained in:
Aria Minaei 2021-08-10 18:03:05 +02:00
parent bbb56ff94f
commit d10b313d57
2 changed files with 37 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,8 @@ import styled from 'styled-components'
import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common' import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
import ProjectsList from './ProjectsList/ProjectsList' import ProjectsList from './ProjectsList/ProjectsList'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import ToolbarIconButton from '@theatre/studio/uiComponents/toolbar/ToolbarIconButton'
import {VscListTree} from 'react-icons/all'
const Container = styled.div` const Container = styled.div`
background-color: transparent; background-color: transparent;
@ -32,7 +34,12 @@ const Container = styled.div`
` `
const TriggerContainer = styled.div` const TriggerContainer = styled.div`
top: 0; margin-left: 12px;
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
` `
const Content = styled.div` const Content = styled.div`
@ -51,15 +58,25 @@ const Content = styled.div`
const headerHeight = `32px` const headerHeight = `32px`
const Header = styled.div` const TriggerButton = styled(ToolbarIconButton)`
height: ${headerHeight}; ${Container}:hover & {
display: flex; --item-bg: rgba(36, 38, 42, 0.95);
align-items: center; --item-border-color: rgba(255, 255, 255, 0.22);
position: absolute; color: white;
top: 0; }
left: 0; `
width: 180px;
${pointerEventsAutoInNormalMode}; const Title = styled.div`
margin: 0 12px;
color: #ffffffc2;
font-weight: 500;
font-size: 10px;
user-select: none;
position: relative;
display: none;
${Container}:hover & {
display: block;
}
&:after { &:after {
position: absolute; position: absolute;
@ -73,23 +90,11 @@ const Header = styled.div`
} }
` `
const Title = styled.div`
margin: 0 10px;
color: #ffffffc2;
font-weight: 500;
font-size: 10px;
user-select: none;
${pointerEventsAutoInNormalMode};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`
const Body = styled.div` const Body = styled.div`
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
position: absolute; position: absolute;
top: ${headerHeight}; top: ${headerHeight};
left: 0; left: 8px;
height: auto; height: auto;
max-height: calc(100% - ${headerHeight}); max-height: calc(100% - ${headerHeight});
overflow-y: scroll; overflow-y: scroll;
@ -102,12 +107,11 @@ const OutlinePanel: React.FC<{}> = (props) => {
return ( return (
<Container> <Container>
<TriggerContainer> <TriggerContainer>
{/* <ToolbarIconButton icon={} label="Outline" /> */} <TriggerButton icon={<VscListTree />} label="Outline" />
<Title>Outline</Title>
</TriggerContainer> </TriggerContainer>
<Content> <Content>
<Header> {/* <Header><Title>Outline</Title></Header> */}
<Title>Outline</Title>
</Header>
<Body> <Body>
<ProjectsList /> <ProjectsList />
</Body> </Body>

7
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -63,7 +63,12 @@ const ToolbarIconButton: React.FC<
> = ({label, icon, ...props}) => { > = ({label, icon, ...props}) => {
return ( return (
<> <>
<TheButton aria-label={label} onClick={props.onClick} title={label}> <TheButton
aria-label={label}
onClick={props.onClick}
title={label}
className={props.className}
>
{icon} {icon}
</TheButton> </TheButton>
</> </>