OutlinePanel now autohides

theatre/studio/src/panels/BasePanel/PaneWrapper.tsx

@@ -13,6 +13,7 @@ import PanelWrapper from './PanelWrapper'
 import {ErrorBoundary} from 'react-error-boundary'
 import {IoClose} from 'react-icons/all'
 import getStudio from '@theatre/studio/getStudio'
+import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
 
 const defaultPosition: PanelPosition = {
   edges: {
@@ -45,6 +46,7 @@ const Container = styled(PanelWrapper)`
   flex-direction: column;
 
   box-shadow: 2px 2px 0 rgb(0 0 0 / 11%);
+  z-index: ${panelZIndexes.pluginPanes};
 `
 
 const Title = styled.div`

theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx

@@ -11,6 +11,7 @@ import PanelWrapper from '@theatre/studio/panels/BasePanel/PanelWrapper'
 import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
 import {isSheetObject} from '@theatre/shared/instanceTypes'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
+import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
 
 const Container = styled(PanelWrapper)`
   overflow-y: hidden;
@@ -19,6 +20,7 @@ const Container = styled(PanelWrapper)`
   background-color: transparent;
   /* background-color: #282b2ff0; */
   box-shadow: none;
+  z-index: ${panelZIndexes.propsPanel};
 
   &:after {
     position: absolute;

theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx

@@ -1,42 +1,44 @@
-import {usePrism} from '@theatre/dataverse-react'
 import React from 'react'
 import styled from 'styled-components'
+import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
 import ProjectsList from './ProjectsList/ProjectsList'
-import type {PanelPosition} from '@theatre/studio/store/types'
-import BasePanel from '@theatre/studio/panels/BasePanel/BasePanel'
-import PanelWrapper from '@theatre/studio/panels/BasePanel/PanelWrapper'
-import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
 
-const defaultPosition: PanelPosition = {
+const Container = styled.div`
-  edges: {
+  background-color: transparent;
-    left: {from: 'screenLeft', distance: 0.2},
+  pointer-events: none;
-    right: {from: 'screenLeft', distance: 0.4},
+  position: absolute;
-    top: {from: 'screenTop', distance: 0.2},
+  left: 0;
-    bottom: {from: 'screenBottom', distance: 0.2},
+  top: 50px;
-  },
+  bottom: 8px;
-}
+  right: 0;
+  z-index: ${panelZIndexes.outlinePanel};
 
-const minDims = {width: 300, height: 300}
+  &:before {
+    display: block;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 20px;
+    pointer-events: auto;
+  }
+`
 
-const OutlinePanel: React.FC<{}> = (props) => {
+const Content = styled.div`
-  return (
+  position: absolute;
-    <BasePanel
+  top: 0;
-      panelId="outlinePanel"
+  bottom: 0;
-      defaultPosition={defaultPosition}
+  left: 0;
-      minDims={minDims}
-    >
-      <Content />
-    </BasePanel>
-  )
-}
-
-const Container = styled(PanelWrapper)`
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  background-color: transparent;
+  transform: translateX(-100%);
-  box-shadow: none;
+  pointer-events: auto;
-  pointer-events: none;
+
+  ${Container}:hover & {
+    transform: translateX(0);
+  }
 `
 
 const Title = styled.div`
@@ -53,21 +55,19 @@ const F2 = styled.div`
   padding: 0;
 `
 
-const Content: React.FC = () => {
+const OutlinePanel: React.FC<{}> = (props) => {
-  return usePrism(() => {
+  return (
-    return (
+    <Container>
-      <Container>
+      <Content>
-        <PanelDragZone>
+        <Header>
-          <Header>
+          <Title>Outline</Title>
-            <Title>Outline</Title>
+        </Header>
-          </Header>
-        </PanelDragZone>
         <F2>
           <ProjectsList />
         </F2>
-      </Container>
+      </Content>
-    )
+    </Container>
-  }, [])
+  )
 }
 
 export default OutlinePanel

theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectsList.tsx

@@ -9,6 +9,7 @@ const Container = styled.ul`
   list-style: none;
   margin: 0;
   padding: 0;
+  padding-right: 4px;
 `
 
 const ProjectsList: React.FC<{}> = (props) => {

theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx

@@ -25,8 +25,11 @@ import type Sheet from '@theatre/core/sheets/Sheet'
 import {isSheet, isSheetObject} from '@theatre/shared/instanceTypes'
 import {uniq} from 'lodash-es'
 import GraphEditorToggle from './GraphEditorToggle'
+import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
 
-const Container = styled(PanelWrapper)``
+const Container = styled(PanelWrapper)`
+  z-index: ${panelZIndexes.sequenceEditorPanel};
+`
 
 const LeftBackground = styled.div`
   background-color: #282b2fed;

theatre/studio/src/panels/panelZIndexes.tsx

@@ -0,0 +1,21 @@
+export const panelZIndexes = {
+  get outlinePanel() {
+    return 1
+  },
+
+  get propsPanel() {
+    return panelZIndexes.outlinePanel
+  },
+
+  get sequenceEditorPanel() {
+    return this.outlinePanel - 1
+  },
+
+  get toolbar() {
+    return this.outlinePanel + 1
+  },
+
+  get pluginPanes() {
+    return this.sequenceEditorPanel - 1
+  },
+}

theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx

@@ -1,11 +1,13 @@
 import {useVal} from '@theatre/dataverse-react'
 import getStudio from '@theatre/studio/getStudio'
+import {panelZIndexes} from '@theatre/studio/panels/panelZIndexes'
 import React from 'react'
 import styled from 'styled-components'
 
 const Container = styled.div`
   position: fixed;
-  z-index: 50;
+  z-index: ${panelZIndexes.toolbar};
+
   top: 12px;
   right: 12px;
   left: 12px;