From 3d26f840aeab17b319c45cc6d648d0cb62de8b0e Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 23 Jul 2021 21:30:25 +0200 Subject: [PATCH] OutlinePanel now autohides --- .../src/panels/BasePanel/PaneWrapper.tsx | 2 + .../ObjectEditorPanel/ObjectEditorPanel.tsx | 2 + .../src/panels/OutlinePanel/OutlinePanel.tsx | 84 +++++++++---------- .../ProjectsList/ProjectsList.tsx | 1 + .../SequenceEditorPanel.tsx | 5 +- theatre/studio/src/panels/panelZIndexes.tsx | 21 +++++ .../toolbars/GlobalToolbar/GlobalToolbar.tsx | 4 +- 7 files changed, 75 insertions(+), 44 deletions(-) create mode 100644 theatre/studio/src/panels/panelZIndexes.tsx diff --git a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx index fdef2c6..595a6b1 100644 --- a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx +++ b/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` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index 2b70c2f..d453a4b 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/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; diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index f237aa3..6e0ee32 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/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 = { - edges: { - left: {from: 'screenLeft', distance: 0.2}, - right: {from: 'screenLeft', distance: 0.4}, - top: {from: 'screenTop', distance: 0.2}, - bottom: {from: 'screenBottom', distance: 0.2}, - }, -} +const Container = styled.div` + background-color: transparent; + pointer-events: none; + position: absolute; + left: 0; + 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) => { - return ( - - - - ) -} - -const Container = styled(PanelWrapper)` +const Content = styled.div` + position: absolute; + top: 0; + bottom: 0; + left: 0; overflow-y: hidden; display: flex; flex-direction: column; - background-color: transparent; - box-shadow: none; - pointer-events: none; + transform: translateX(-100%); + pointer-events: auto; + + ${Container}:hover & { + transform: translateX(0); + } ` const Title = styled.div` @@ -53,21 +55,19 @@ const F2 = styled.div` padding: 0; ` -const Content: React.FC = () => { - return usePrism(() => { - return ( - - -
- Outline -
- +const OutlinePanel: React.FC<{}> = (props) => { + return ( + + +
+ Outline +
- - ) - }, []) + + + ) } export default OutlinePanel diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectsList.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectsList.tsx index 88779b9..536603f 100644 --- a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectsList.tsx +++ b/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) => { diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index 9d165de..0ba1ebb 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/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; diff --git a/theatre/studio/src/panels/panelZIndexes.tsx b/theatre/studio/src/panels/panelZIndexes.tsx new file mode 100644 index 0000000..f99c583 --- /dev/null +++ b/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 + }, +} diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx index d5935bc..1523851 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx +++ b/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;