make console expandable and contractable

client/constants.js

@@ -39,6 +39,8 @@ export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
 export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
+export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/images/down-arrow.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow shape copy 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
+            <g id="Icons" transform="translate(16.000000, 1063.000000)">
+                <polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

client/images/up-arrow.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow shape copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
+            <g id="Icons" transform="translate(16.000000, 1063.000000)">
+                <polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

client/modules/IDE/actions/ide.js

@@ -55,3 +55,17 @@ export function collapseSidebar() {
     type: ActionTypes.COLLAPSE_SIDEBAR
   };
 }
+
+export function expandConsole() {
+  console.log('expand console!');
+  return {
+    type: ActionTypes.EXPAND_CONSOLE
+  };
+}
+
+export function collapseConsole() {
+  return {
+    type: ActionTypes.COLLAPSE_CONSOLE
+  };
+}
+

client/modules/IDE/components/Console.js

@@ -1,4 +1,8 @@
 import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+const upArrowUrl = require('../../../images/up-arrow.svg');
+const downArrowUrl = require('../../../images/down-arrow.svg');
+import classNames from 'classnames';
 
 /**
  *  How many console messages to store
@@ -34,7 +38,9 @@ class Console extends React.Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
+    return (nextProps.consoleEvent !== this.props.consoleEvent)
+      || (nextProps.isPlaying && !this.props.isPlaying)
+      || (this.props.isExpanded !== nextProps.isExpanded);
   }
 
   componentDidUpdate() {
@@ -43,10 +49,22 @@ class Console extends React.Component {
 
   render() {
     const childrenToDisplay = this.children.slice(-consoleMax);
+    const consoleClass = classNames({
+      'preview-console': true,
+      'preview-console--collapsed': !this.props.isExpanded
+    });
 
     return (
-      <div ref="console" className="preview-console">
+      <div ref="console" className={consoleClass}>
-        <h2 className="preview-console__header">console</h2>
+        <div className="preview-console__header">
+          <h2 className="preview-console__header-title">console</h2>
+          <a className="preview-console__collapse" onClick={this.props.collapseConsole} >
+            <InlineSVG src={downArrowUrl} />
+          </a>
+          <a className="preview-console__expand" onClick={this.props.expandConsole} >
+            <InlineSVG src={upArrowUrl} />
+          </a>
+        </div>
         <div ref="console_messages" className="preview-console__messages">
           {childrenToDisplay}
         </div>
@@ -58,7 +76,10 @@ class Console extends React.Component {
 
 Console.propTypes = {
   consoleEvent: PropTypes.object,
-  isPlaying: PropTypes.bool.isRequired
+  isPlaying: PropTypes.bool.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
+  collapseConsole: PropTypes.func.isRequired,
+  expandConsole: PropTypes.func.isRequired
 };
 
 export default Console;

client/modules/IDE/pages/IDEView.js

@@ -81,6 +81,9 @@ class IDEView extends React.Component {
             <Console
               consoleEvent={this.props.ide.consoleEvent}
               isPlaying={this.props.ide.isPlaying}
+              isExpanded={this.props.ide.consoleIsExpanded}
+              expandConsole={this.props.expandConsole}
+              collapseConsole={this.props.collapseConsole}
             />
           </div>
           <PreviewFrame
@@ -127,7 +130,8 @@ IDEView.propTypes = {
     isPlaying: PropTypes.bool.isRequired,
     consoleEvent: PropTypes.object,
     modalIsVisible: PropTypes.bool.isRequired,
-    sidebarIsExpanded: PropTypes.bool.isRequired
+    sidebarIsExpanded: PropTypes.bool.isRequired,
+    consoleIsExpanded: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -170,7 +174,9 @@ IDEView.propTypes = {
   expandSidebar: PropTypes.func.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
-  cloneProject: PropTypes.func.isRequired
+  cloneProject: PropTypes.func.isRequired,
+  expandConsole: PropTypes.func.isRequired,
+  collapseConsole: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -8,7 +8,8 @@ const initialState = {
     arguments: []
   },
   modalIsVisible: false,
-  sidebarIsExpanded: true
+  sidebarIsExpanded: true,
+  consoleIsExpanded: false
 };
 
 const ide = (state = initialState, action) => {
@@ -33,6 +34,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { sidebarIsExpanded: false });
     case ActionTypes.EXPAND_SIDEBAR:
       return Object.assign({}, state, { sidebarIsExpanded: true });
+    case ActionTypes.COLLAPSE_CONSOLE:
+      return Object.assign({}, state, { consoleIsExpanded: false });
+    case ActionTypes.EXPAND_CONSOLE:
+      return Object.assign({}, state, { consoleIsExpanded: true });
     default:
       return state;
   }

client/styles/components/_console.scss

@@ -26,14 +26,23 @@
 	.preview-console__warn {
 		color: $console-warn-color;
 	}
+
+	&.preview-console--collapsed {
+		height: #{29 / $base-font-size}rem;
+	}
 }
 
 .preview-console__header {
 	background-color: $console-header-background-color;
 	color: $console-header-color;
+	padding: #{5 / $base-font-size}rem;
+	display: flex;
+	justify-content: space-between;
+}
+
+.preview-console__header-title {
 	font-size: #{16 / $base-font-size}rem;
 	font-weight: normal;
-	padding: #{5 / $base-font-size}rem;
 }
 
 .preview-console__messages {
@@ -42,4 +51,17 @@
 	overflow-y: auto;
 	height: #{121 / $base-font-size}rem;
 
+}
+
+.preview-console__collapse {
+	.preview-console--collapsed & {
+		display: none;
+	}
+}
+
+.preview-console__expand {
+	display: none;
+	.preview-console--collapsed & {
+		display: inline-block;
+	}
 }