add resizers

client/modules/IDE/pages/IDEView.js

@@ -14,6 +14,7 @@ import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
 import * as PreferencesActions from '../actions/preferences';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
+import SplitPane from 'react-split-pane';
 
 class IDEView extends React.Component {
   componentDidMount() {
@@ -87,6 +88,7 @@ class IDEView extends React.Component {
           setAutosave={this.props.setAutosave}
         />
         <div className="editor-preview-container">
+          <SplitPane split="vertical" defaultSize={180}>
             <Sidebar
               files={this.props.files}
               setSelectedFile={this.props.setSelectedFile}
@@ -101,7 +103,13 @@ class IDEView extends React.Component {
               hideEditFileName={this.props.hideEditFileName}
               updateFileName={this.props.updateFileName}
             />
-          <div className="editor-console-container">
+            <SplitPane
+              split="vertical"
+              defaultSize={'50%'}
+              onChange={() => (this.refs.overlay.style.display = 'block')}
+              onDragFinished={() => (this.refs.overlay.style.display = 'none')}
+            >
+              <SplitPane split="horizontal" primary="second" defaultSize={29} minSize={29} ref="consolePane">
                 <Editor
                   file={this.props.selectedFile}
                   updateFileContent={this.props.updateFileContent}
@@ -117,6 +125,9 @@ class IDEView extends React.Component {
                   expandConsole={this.props.expandConsole}
                   collapseConsole={this.props.collapseConsole}
                 />
+              </SplitPane>
+              <div>
+                <div className="preview-frame-overlay" ref="overlay">
                 </div>
                 <PreviewFrame
                   htmlFile={this.props.htmlFile}
@@ -131,6 +142,9 @@ class IDEView extends React.Component {
                   dispatchConsoleEvent={this.props.dispatchConsoleEvent}
                 />
               </div>
+            </SplitPane>
+          </SplitPane>
+        </div>
         {(() => {
           if (this.props.ide.modalIsVisible) {
             return (

client/styles/components/_console.scss

@@ -1,10 +1,6 @@
 .preview-console {
-	position: absolute;
 	width: 100%;
-	height: #{150 / $base-font-size}rem;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	height: 100%;
 	background: $console-light-background-color;
 	z-index: 1000;
 	overflow: hidden;
@@ -28,7 +24,7 @@
 	}
 
 	&.preview-console--collapsed {
-		height: #{29 / $base-font-size}rem;
+		// height: #{29 / $base-font-size}rem;
 	}
 }
 

client/styles/components/_resizer.scss

@@ -0,0 +1,43 @@
+.Resizer {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: $ide-border-color;
+    opacity: .2;
+    z-index: 1;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+}
+
+// .Resizer:hover {
+//     -webkit-transition: all 2s ease;
+//     transition: all 2s 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);
+    cursor: row-resize;
+    width: 100%;
+}
+
+.Resizer.horizontal:hover {
+    // border-top: 5px solid rgba(0, 0, 0, 0.5);
+    // border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.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);
+    cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+    // border-left: 5px solid rgba(0, 0, 0, 0.5);
+    // border-right: 5px solid rgba(0, 0, 0, 0.5);
+}

client/styles/layout/_ide.scss

@@ -9,11 +9,13 @@
   width: 100%;
   flex: 1 0 0px;
   display: flex;
+  position: relative;
 }
 
 .editor-console-container {
-  flex: 1 0 0px;
-  max-width: 45%;
+  // flex: 1 0 0px;
+  // max-width: 45%;
+  width: 100%;
   height: 100%;
   position: relative;
 
@@ -28,8 +30,16 @@
 }
 
 .preview-frame {
-	flex: 1 0 0px;
-  min-height: 100%;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+.preview-frame-overlay {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 10;
 }
 
 .toolbar {
@@ -37,8 +47,10 @@
 }
 
 .sidebar {
-  width: #{180 / $base-font-size}rem;
-  &.sidebar--contracted {
-  	width: #{20 / $base-font-size}rem;
-  }
+  // width: #{180 / $base-font-size}rem;
+  // &.sidebar--contracted {
+  // 	width: #{20 / $base-font-size}rem;
+  // }
+  width: 100%;
+  height: 100%;
 }

client/styles/main.scss

@@ -19,6 +19,7 @@
 @import 'components/sidebar';
 @import 'components/modal';
 @import 'components/console';
+@import 'components/resizer';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';

package.json

@@ -93,6 +93,7 @@
     "react-inlinesvg": "^0.4.2",
     "react-redux": "^4.4.5",
     "react-router": "^2.4.1",
+    "react-split-pane": "^0.1.44",
     "redux": "^3.5.2",
     "redux-form": "^5.2.5",
     "redux-thunk": "^2.1.0",