Allow showing/hiding preview

Fixes codesandbox#530

Author: Ives van Hoorne

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

@@ -220,6 +220,10 @@ class Preview extends React.Component<Props, State> {
       code: store.editor.currentPackageJSONCode,
     };
 
+    if (!store.editor.previewWindow.content) {
+      return null;
+    }
+
     return (
       <FlyingContainer onPositionChange={this.resetAlignment}>
         {({ resize }) => (

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/elements.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import PrettierIcon from 'react-icons/lib/md/brush';
+import WindowIcon from 'react-icons/lib/md/web-asset';
 
 export const Container = styled.div`
   position: absolute;
@@ -35,6 +36,8 @@ export const StyledPrettierIcon = styled(PrettierIcon)`
   height: 1.125rem;
   cursor: pointer;
 
+  padding-right: 0.5rem;
+
   opacity: 0.6;
 
   &:hover {
@@ -56,3 +59,39 @@ export const IconContainer = styled.div`
   flex-shrink: 1;
   padding: 0 0.75rem;
 `;
+
+export const Line = styled.div`
+  height: 12px;
+  width: 1px;
+
+  background-color: rgba(255, 255, 255, 0.3);
+`;
+
+export const StyledWindowIcon = styled(WindowIcon)`
+  transition: 0.3s ease opacity;
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+
+  opacity: 0.6;
+
+  padding-left: 0.5rem;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  ${props =>
+    props.active &&
+    css`
+      opacity: 1;
+      color: white;
+    `};
+
+  ${props =>
+    props.disabled &&
+    css`
+      opacity: 0;
+      pointer-events: none;
+    `};
+`;

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

@@ -10,6 +10,8 @@ import {
   TabsContainer,
   IconContainer,
   StyledPrettierIcon,
+  StyledWindowIcon,
+  Line,
 } from './elements';
 
 class EditorTabs extends React.Component {
@@ -109,6 +111,8 @@ class EditorTabs extends React.Component {
 
     const currentModule = store.editor.currentModule;
 
+    const previewVisible = !!store.editor.previewWindow.content;
+
     return (
       <Container>
         <TabsContainer
@@ -169,13 +173,30 @@ class EditorTabs extends React.Component {
               );
             })}
         </TabsContainer>
+
         <IconContainer>
           <Tooltip title="Prettify">
             <StyledPrettierIcon
               disabled={!this.canPrettify(currentModule)}
               onClick={this.prettifyModule}
             />
           </Tooltip>
+          <Line />
+
+          <Tooltip title={previewVisible ? 'Hide Browser' : 'Show Browser'}>
+            <StyledWindowIcon
+              onClick={() =>
+                previewVisible
+                  ? this.props.signals.editor.setPreviewContent({
+                      content: undefined,
+                    })
+                  : this.props.signals.editor.setPreviewContent({
+                      content: 'browser',
+                    })
+              }
+              active={previewVisible}
+            />
+          </Tooltip>
         </IconContainer>
       </Container>
     );

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

@@ -240,18 +240,25 @@ class EditorPreview extends React.Component<Props, State> {
     const notSynced = !store.editor.isAllModulesSynced;
     const sandbox = store.editor.currentSandbox;
     const preferences = store.preferences;
-    const { x, y, width } = store.editor.previewWindow;
+    const { x, y, width, content } = store.editor.previewWindow;
+
+    const windowVisible = !!content;
 
     const windowRightSize = -x + width + 16;
 
     const isVerticalMode = this.state.width
       ? this.state.width / 4 > this.state.width - windowRightSize
       : false;
 
-    const editorWidth = isVerticalMode
+    let editorWidth = isVerticalMode
       ? '100%'
       : `calc(100% - ${windowRightSize}px)`;
-    const editorHeight = isVerticalMode ? `${y + 16}px` : '100%';
+    let editorHeight = isVerticalMode ? `${y + 16}px` : '100%';
+
+    if (!windowVisible) {
+      editorWidth = '100%';
+      editorHeight = '100%';
+    }
 
     return (
       <ThemeProvider

packages/app/src/app/store/modules/editor/index.js

@@ -41,6 +41,7 @@ export default Module({
       width: undefined,
       x: 0,
       y: 0,
+      content: 'browser',
     },
   },
   getters: {
@@ -80,5 +81,6 @@ export default Module({
     quickActionsOpened: sequences.openQuickActions,
     quickActionsClosed: sequences.closeQuickActions,
     setPreviewBounds: sequences.setPreviewBounds,
+    setPreviewContent: sequences.setPreviewContent,
   },
 });

packages/app/src/app/store/modules/editor/model.js

@@ -136,6 +136,7 @@ export default {
   isUpdatingPrivacy: types.boolean,
   quickActionsOpen: types.boolean,
   previewWindow: types.model({
+    content: types.maybe(types.string),
     width: types.maybe(types.number),
     height: types.maybe(types.number),
     x: types.maybe(types.number),

packages/app/src/app/store/modules/editor/sequences.js

@@ -202,3 +202,7 @@ export const handlePreviewAction = [
 ];
 
 export const setPreviewBounds = [actions.setPreviewBounds];
+
+export const setPreviewContent = [
+  set(state`editor.previewWindow.content`, props`content`),
+];