From 9201cb247c82ab1fe406592b55ef850416096941 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Thu, 21 Jul 2016 00:33:41 -0400
Subject: [PATCH] make console expandable and contractable

---
 client/constants.js                      |  2 ++
 client/images/down-arrow.svg             | 14 ++++++++++++
 client/images/up-arrow.svg               | 14 ++++++++++++
 client/modules/IDE/actions/ide.js        | 14 ++++++++++++
 client/modules/IDE/components/Console.js | 29 ++++++++++++++++++++----
 client/modules/IDE/pages/IDEView.js      | 10 ++++++--
 client/modules/IDE/reducers/ide.js       |  7 +++++-
 client/styles/components/_console.scss   | 24 +++++++++++++++++++-
 8 files changed, 106 insertions(+), 8 deletions(-)
 create mode 100644 client/images/down-arrow.svg
 create mode 100644 client/images/up-arrow.svg

diff --git a/client/constants.js b/client/constants.js
index 2a2c1858..50ca8f8e 100644
--- a/client/constants.js
+++ b/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';
diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
new file mode 100644
index 00000000..03019675
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
new file mode 100644
index 00000000..7d78ff1f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index 4d01d50b..fa668e4c 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/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
+  };
+}
+
diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index 952b5787..5455f9d3 100644
--- a/client/modules/IDE/components/Console.js
+++ b/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">
-        <h2 className="preview-console__header">console</h2>
+      <div ref="console" className={consoleClass}>
+        <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;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 96a9a1e6..6a7de81b 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/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) {
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index de6ff414..f78b8d9a 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/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;
   }
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index b9c49d29..6ca9b1fc 100644
--- a/client/styles/components/_console.scss
+++ b/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;
+	}
 }
\ No newline at end of file