Change/splitter (codesandbox#9)

* Ability to hide sidebar

* Hide splitter if fullscreen

Author: CompuIves

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -6,6 +6,7 @@ import Fork from 'react-icons/lib/go/repo-forked';
 import Download from 'react-icons/lib/go/cloud-download';
 import PlusIcon from 'react-icons/lib/go/plus';
 import GithubIcon from 'react-icons/lib/go/mark-github';
+import ChevronLeft from 'react-icons/lib/go/chevron-left';
 
 import type { Sandbox, CurrentUser } from 'common/types';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
@@ -45,7 +46,28 @@ const Left = styled.div`
   height: 100%;
 `;
 
+const Chevron = styled(ChevronLeft)`
+  transition: 0.3s ease all;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin-left: 0.5rem;
+  z-index: 20;
+
+  cursor: pointer;
+  &:hover {
+    transform: rotateZ(${props => (props.workspaceHidden ? '135deg' : '45deg')});
+    color: white;
+  }
+
+  transform: rotateZ(${props => (props.workspaceHidden ? '180deg' : '0')});
+`;
+
 type Props = {
+  toggleWorkspace: () => void,
+  workspaceHidden: boolean,
   sandbox: Sandbox,
   sandboxActions: typeof sandboxActionCreators,
   userActions: typeof userActionCreators,
@@ -92,11 +114,21 @@ export default class Header extends React.PureComponent {
   };
 
   render() {
-    const { sandbox, userActions, user } = this.props;
+    const {
+      sandbox,
+      userActions,
+      user,
+      toggleWorkspace,
+      workspaceHidden,
+    } = this.props;
     const canSave = sandbox.modules.some(m => m.isNotSynced);
     return (
       <Container>
         <Left>
+          <Chevron
+            onClick={toggleWorkspace}
+            workspaceHidden={workspaceHidden}
+          />
           <Action onClick={this.forkSandbox} title="Fork" Icon={Fork} />
           <Action
             onClick={canSave && this.massUpdateModules}

src/app/pages/Sandbox/Editor/Content/index.js

@@ -23,6 +23,8 @@ import Preview from 'app/components/sandbox/Preview';
 import Header from './Header';
 
 type Props = {
+  workspaceHidden: boolean,
+  toggleWorkspace: () => void,
   sandbox: Sandbox,
   user: CurrentUser,
   preferences: Preferences,
@@ -98,6 +100,8 @@ class EditorPreview extends React.PureComponent {
       preferences,
       userActions,
       user,
+      workspaceHidden,
+      toggleWorkspace,
     } = this.props;
 
     const { modules, directories } = sandbox;
@@ -157,6 +161,8 @@ class EditorPreview extends React.PureComponent {
           sandboxActions={sandboxActions}
           userActions={userActions}
           user={user}
+          workspaceHidden={workspaceHidden}
+          toggleWorkspace={toggleWorkspace}
         />
         <SplitPane
           onDragStarted={this.startResizing}
@@ -165,6 +171,12 @@ class EditorPreview extends React.PureComponent {
           defaultSize="50%"
           minSize={360}
           paneStyle={{ height: '100%' }}
+          resizerStyle={{
+            visibility: (!sandbox.showPreview && sandbox.showEditor) ||
+              (sandbox.showPreview && !sandbox.showEditor)
+              ? 'hidden'
+              : 'visible',
+          }}
           pane1Style={{
             display: sandbox.showEditor ? 'block' : 'none',
             minWidth: !sandbox.showPreview && sandbox.showEditor

src/app/pages/Sandbox/Editor/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react';
 import SplitPane from 'react-split-pane';
-import type { Sandbox } from 'app/store/entities/sandboxes/entity';
+import type { Sandbox } from 'common/types';
 
 import Workspace from './Workspace';
 
@@ -14,25 +14,41 @@ type Props = {
 
 export default class ContentSplit extends React.PureComponent {
   props: Props;
-  state = { resizing: false };
+  state = {
+    resizing: false,
+    workspaceHidden: false,
+  };
 
   startResizing = () => this.setState({ resizing: true });
   stopResizing = () => this.setState({ resizing: false });
 
+  toggleWorkspace = () =>
+    this.setState({ workspaceHidden: !this.state.workspaceHidden });
+
   render() {
     const { sandbox, match } = this.props;
-    const { resizing } = this.state;
+    const { resizing, workspaceHidden } = this.state;
     return (
       <SplitPane
         split="vertical"
-        minSize={100}
         defaultSize={16 * 16}
         style={{ top: 0 }}
         onDragStarted={this.startResizing}
         onDragFinished={this.stopResizing}
+        resizerStyle={{ visibility: workspaceHidden ? 'hidden' : 'visible' }}
+        pane1Style={{
+          visiblity: workspaceHidden ? 'hidden' : 'visible',
+          maxWidth: workspaceHidden ? 0 : 'inherit',
+        }}
       >
-        <Workspace sandbox={sandbox} />
-        <Content sandbox={sandbox} resizing={resizing} match={match} />
+        {!workspaceHidden && <Workspace sandbox={sandbox} />}
+        <Content
+          workspaceHidden={workspaceHidden}
+          toggleWorkspace={this.toggleWorkspace}
+          sandbox={sandbox}
+          resizing={resizing}
+          match={match}
+        />
       </SplitPane>
     );
   }

src/app/split-pane.css

@@ -3,23 +3,23 @@
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: #000;
-    opacity: .2;
-    z-index: 1;
+    opacity: .4;
+    z-index: 50;
     -moz-background-clip: padding;
     -webkit-background-clip: padding;
     background-clip: padding-box;
 }
 
 .Resizer:hover {
-    -webkit-transition: all 2s ease;
-    transition: all 2s ease;
+    -webkit-transition: all 0.3s ease;
+    transition: all 0.3s ease;
 }
 
 .Resizer.horizontal {
     height: 11px;
     margin: -5px 0;
-    border-top: 5px solid rgba(255, 255, 255, 0);
-    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    border-top: 5px solid rgba(0, 0, 0, 0);
+    border-bottom: 5px solid rgba(0, 0, 0, 0);
     cursor: row-resize;
     width: 100%;
 }
@@ -32,8 +32,8 @@
 .Resizer.vertical {
     width: 11px;
     margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
+    border-left: 5px solid rgba(0, 0, 0, 0);
+    border-right: 5px solid rgba(0, 0, 0, 0);
     cursor: col-resize;
 }