Introduce vertical mode to embeds

Author: CompuIves

packages/app/src/embed/components/Content/index.tsx

@@ -38,6 +38,7 @@ import { MenuIcon } from '../legacy/Header/elements';
 import SplitPane from '../SplitPane';
 import { CodeEditor } from './CodeEditor';
 import { Container, MenuInTabs, Tabs } from './elements';
+import { isSmallScreen } from '../../util/mobile';
 
 type Props = {
   showEditor: boolean;
@@ -407,10 +408,9 @@ export default class Content extends React.PureComponent<Props, State> {
       sidebarOpen,
       toggleSidebar,
       toggleLike,
-      editorSize,
     } = this.props;
 
-    const { isInProjectView } = this.state;
+    const { isInProjectView, editorSize } = this.state;
 
     const mainModule = isInProjectView
       ? findMainModule(sandbox)
@@ -489,17 +489,13 @@ export default class Content extends React.PureComponent<Props, State> {
       actions: [],
     };
 
-    // TODO: we use verticalMode as a very very bad proxy
-    // for identifying mobile mode
-    // mobile isn't even vertical anymore!
-    // we should really rename it
     return (
       <Container style={{ flexDirection: verticalMode ? 'column' : 'row' }}>
         <SplitPane
           sandbox={sandbox}
           showEditor={showEditor}
           showPreview={showPreview}
-          isSmallScreen={verticalMode}
+          isSmallScreen={isSmallScreen()}
           sidebarOpen={sidebarOpen}
           showNavigationActions={hideNavigation}
           refresh={this.refresh}
@@ -509,6 +505,7 @@ export default class Content extends React.PureComponent<Props, State> {
           setEditorSize={this.setEditorSize}
           hideDevTools={hideDevTools}
           setDragging={this.setDragging}
+          verticalMode={verticalMode}
         >
           <>
             <Tabs>
@@ -577,7 +574,9 @@ export default class Content extends React.PureComponent<Props, State> {
                 onChange={this.setCode}
                 onModuleChange={this.setCurrentModule}
                 highlightedLines={this.props.highlightedLines}
-                width={this.state.editorSize}
+                {...(verticalMode
+                  ? { height: editorSize }
+                  : { width: editorSize })}
               />
             </div>
           </>

packages/app/src/embed/components/SplitPane/elements.js

@@ -8,6 +8,13 @@ export const KNOB_WIDTH = 4;
  */
 export const RESIZER_GRAB_EXTRA_WIDTH = 4;
 
+const getKnobSizeKey = props => (props.verticalMode ? 'height' : 'width');
+const getKnobHeightKey = props => (props.verticalMode ? 'width' : 'height');
+const getContainerSizeKey = props => (props.verticalMode ? 'width' : 'height');
+const getKnobOffsetKey = props => (props.verticalMode ? 'left' : 'top');
+const getKnobMarginKey = props =>
+  props.verticalMode ? 'margin-top' : 'margin-left';
+
 export const Container = styled.div`
   width: 100%;
   height: 100%;
@@ -22,10 +29,10 @@ export const Container = styled.div`
     transform: translateZ(0);
 
     background-color: ${props => props.theme.colors.separator.background};
-    width: ${RESIZER_WIDTH}px;
+    ${getKnobSizeKey}: ${RESIZER_WIDTH}px;
     display: block;
-    height: 100%;
-    cursor: ew-resize;
+    ${getContainerSizeKey}: 100%;
+    cursor: ${props => (props.verticalMode ? 'ns-resize' : 'ew-resize')};
     z-index: 50;
   }
 
@@ -36,10 +43,10 @@ export const Container = styled.div`
     border-radius: 50px;
     position: absolute;
 
-    width: ${KNOB_WIDTH}px;
-    height: 41px;
-    top: calc(50% - 20px);
-    margin-left: ${Math.floor(RESIZER_WIDTH / 2 - KNOB_WIDTH / 2)}px;
+    ${getKnobSizeKey}: ${KNOB_WIDTH}px;
+    ${getKnobHeightKey}: 41px;
+    ${getKnobOffsetKey}: calc(50% - 20px);
+    ${getKnobMarginKey}: ${Math.floor(RESIZER_WIDTH / 2 - KNOB_WIDTH / 2)}px;
     opacity: 1;
   }
 
@@ -48,13 +55,18 @@ export const Container = styled.div`
     position: absolute;
     top: 0;
     bottom: 0;
-    margin-left: -${RESIZER_GRAB_EXTRA_WIDTH}px;
-    width: ${RESIZER_WIDTH + RESIZER_GRAB_EXTRA_WIDTH * 2}px;
+    left: 0;
+    right: 0;
+    ${getKnobMarginKey}: -${RESIZER_GRAB_EXTRA_WIDTH}px;
+    ${getKnobSizeKey}: ${RESIZER_WIDTH + RESIZER_GRAB_EXTRA_WIDTH * 2}px;
     z-index: 50;
   }
 
   .Pane {
-    transition: ${props => (props.isDragging ? null : 'width 200ms ease')};
+    transition: ${props =>
+      props.isDragging
+        ? null
+        : `${props.verticalMode ? 'height' : 'width'} 200ms ease`};
     overflow: hidden;
   }
 `;
@@ -63,4 +75,5 @@ export const PaneContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
 `;

packages/app/src/embed/components/SplitPane/index.js

@@ -18,6 +18,7 @@ export default function SplitView({
   initialEditorSize = 50, // in percent
   hideDevTools,
   setEditorSize,
+  verticalMode,
   setDragging: setDraggingProp,
   ...props
 }) {
@@ -29,12 +30,14 @@ export default function SplitView({
     5. introduce the resizer element with animation
   */
 
-  const windowWidth = document.body.clientWidth;
+  const windowSize = verticalMode
+    ? document.body.clientHeight
+    : document.body.clientWidth;
   // TODO: pick this from the sidebar or ref instead of hardcoding
-  const sidebarWidth = 250;
+  const sidebarWidth = verticalMode ? 0 : 250;
 
   const maxSize =
-    (sidebarOpen ? windowWidth - sidebarWidth : windowWidth) - RESIZER_WIDTH;
+    (sidebarOpen ? windowSize - sidebarWidth : windowSize) - RESIZER_WIDTH;
 
   // #1. set initial size based on props
   let initialSize = null;
@@ -131,6 +134,7 @@ export default function SplitView({
       size={size}
       maxSize={maxSize}
       fullSize={size === maxSize}
+      verticalMode={verticalMode}
     >
       <GlobalActions
         sandbox={sandbox}
@@ -143,7 +147,7 @@ export default function SplitView({
         smallTouchScreen={smallTouchScreen}
       />
       <SplitPane
-        split="vertical"
+        split={verticalMode ? 'horizontal' : 'vertical'}
         onDragStarted={onDragStarted}
         onDragFinished={onDragFinished}
         minSize="0%"

packages/app/src/embed/util/mobile.ts

@@ -1,9 +1,13 @@
 const isTouch = !matchMedia('(pointer:fine)').matches;
 
-export function isSmallMobileScreen() {
+export function isSmallScreen() {
   if (typeof screen === 'undefined') {
     return false;
   }
 
-  return screen.width < 800 && isTouch;
+  return screen.width < 800;
+}
+
+export function isSmallMobileScreen() {
+  return isSmallScreen() && isTouch;
 }