Experiment: Transparent outline pane

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

@@ -31,7 +31,7 @@ export const F1 = styled.div`
   font-size: 11px;
   border-bottom: 2px solid rgba(0, 0, 0, 0.45);
   background: ${theme.panel.bg};
-  box-size: border-box;
+  box-sizing: border-box;
 `
 
 export const Punctuation = styled.span`

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

@@ -1,11 +1,8 @@
-import {theme} from '@theatre/studio/css'
 import type {VoidFn} from '@theatre/shared/utils/types'
 import React from 'react'
-import {HiOutlineChevronRight} from 'react-icons/all'
+import {GoChevronRight, DiHtml53DEffects} from 'react-icons/all'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import noop from '@theatre/shared/utils/noop'
-import {lighten} from 'polished'
-import {propNameText} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
 
 export const Container = styled.li<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -16,46 +13,62 @@ export const Container = styled.li<{depth: number}>`
 
 export const BaseHeader = styled.div<{}>``
 
-const Header = styled(BaseHeader)<{
+const Header = styled(BaseHeader)`
-  selectionStatus: SelectionStatus
+  padding-left: calc(16px + var(--depth) * 16px);
-}>`
+  height: 22px;
-  padding-left: calc(16px + var(--depth) * 20px);
+  box-sizing: border-box;
-  height: 28px;
-
   display: flex;
   align-items: center;
-  color: ${({selectionStatus}) =>
+  pointer-events: none;
-    lighten(
-      selectionStatus === 'selected' ? 0.2 : 0,
-      theme.panel.body.compoudThing.label.color,
-    )};
 
-  background: ${({selectionStatus}) =>
+  &.selected {
-    selectionStatus === 'selected'
+  }
-      ? '#1919245e'
-      : selectionStatus === 'descendant-is-selected'
-      ? '#19192426'
-      : 'transparent'};
 
-  box-sizing: border-box;
+  &.descendant-is-selected {
-
-  &:hover {
-    color: ${lighten(0.2, theme.panel.body.compoudThing.label.color)};
   }
 `
 
+export const outlineItemFont = css`
+  font-weight: 500;
+  font-size: 11px;
+`
+
 const Head_Label = styled.span`
-  ${propNameText}
+  ${outlineItemFont};
+  color: #ffffffdb;
+  background-color: #758184;
+  padding: 2px 8px;
+  border-radius: 2px;
+  pointer-events: auto;
+
+  ${Header}:hover > & {
+    background-color: red;
+  }
+
+  ${Header}.selected > & {
+    color: white;
+    background-color: #464242;
+  }
 `
 
 const Head_IconContainer = styled.span`
   width: 12px;
   margin-right: 8px;
+  /* background-color: #435356d9; */
+  color: black;
+  font-weight: 500;
+
+  ${Header}.selected > & {
+    color: white;
+    background-color: #464242;
+  }
 `
 
-const Head_Icon = styled.span<{isOpen: boolean}>`
+const Head_Icon_WithDescendants = styled.span<{isOpen: boolean}>`
   width: 12px;
   font-size: 9px;
+  position: relative;
+  display: block;
   transform: rotateZ(${(props) => (props.isOpen ? 90 : 0)}deg);
 `
 
@@ -81,13 +94,14 @@ const BaseItem: React.FC<{
 
   return (
     <Container depth={depth}>
-      <Header selectionStatus={selectionStatus} onClick={select ?? noop}>
+      <Header className={selectionStatus} onClick={select ?? noop}>
         <Head_IconContainer>
-          {canContainChildren && (
+          {canContainChildren ? (
-            <Head_Icon isOpen={true}>
+            <Head_Icon_WithDescendants isOpen={true}>
-              {/* <GoChevronRight /> */}
+              <GoChevronRight />
-              <HiOutlineChevronRight />
+            </Head_Icon_WithDescendants>
-            </Head_Icon>
+          ) : (
+            <DiHtml53DEffects />
           )}
         </Head_IconContainer>
 

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

@@ -4,10 +4,6 @@ import styled from 'styled-components'
 import ProjectsList from './ProjectsList/ProjectsList'
 import type {PanelPosition} from '@theatre/studio/store/types'
 import BasePanel from '@theatre/studio/panels/BasePanel/BasePanel'
-import {
-  F1,
-  F2,
-} from '@theatre/studio/panels/ObjectEditorPanel/ObjectEditorPanel'
 import PanelWrapper from '@theatre/studio/panels/BasePanel/PanelWrapper'
 import PanelDragZone from '@theatre/studio/panels/BasePanel/PanelDragZone'
 
@@ -38,20 +34,30 @@ const Container = styled(PanelWrapper)`
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
+  background-color: transparent;
+  box-shadow: none;
 `
 
 const Title = styled.div`
   width: 100%;
 `
 
+const Header = styled.div``
+
+const F2 = styled.div`
+  flex-grow: 1;
+  overflow-y: scroll;
+  padding: 0;
+`
+
 const Content: React.FC = () => {
   return usePrism(() => {
     return (
       <Container>
         <PanelDragZone>
-          <F1>
+          <Header>
             <Title>Outline</Title>
-          </F1>
+          </Header>
         </PanelDragZone>
         <F2>
           <ProjectsList />

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

@@ -13,6 +13,7 @@ const Container = styled.div`
 
   display: flex;
   gap: 1rem;
+  display: none;
 `
 
 const GlobalToolbar: React.FC<{}> = (props) => {