add expand/contract sidebar

client/constants.js

@@ -34,5 +34,8 @@ export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';
 export const CREATE_FILE = 'CREATE_FILE';
 
+export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
+export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
+
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/images/left-arrow.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - 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(-529.000000, -1165.000000)" fill="#333333">
+            <polygon id="arrow-shape-copy" transform="translate(534.000000, 1172.198314) rotate(-90.000000) translate(-534.000000, -1172.198314) " points="535.4 1169.39663 541 1174.99663 539.6 1176.39663 534 1170.79663 528.4 1176.39663 527 1174.99663 532.6 1169.39663 533.996628 1168"></polygon>
+        </g>
+    </g>
+</svg>

client/images/plus-icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>close shape</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(-558.000000, -1166.000000)" fill="#333333">
+            <g id="Icons" transform="translate(16.000000, 1063.000000)">
+                <g id="close-copy-3" transform="translate(499.500000, 110.000000) scale(1, -1) translate(-499.500000, -110.000000) translate(438.000000, 98.000000)">
+                    <polygon id="close-shape" transform="translate(113.000000, 10.000000) rotate(45.000000) translate(-113.000000, -10.000000) " points="120 15.6 118.6 17 113 11.4 107.4 17 106 15.6 111.6 10 106 4.4 107.4 3 113 8.6 118.6 3 120 4.4 114.4 10"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

client/images/right-arrow.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - 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(-496.000000, -1165.000000)" fill="#333333">
+            <polygon id="arrow-shape-copy" transform="translate(501.000000, 1172.198314) rotate(90.000000) translate(-501.000000, -1172.198314) " points="502.4 1169.39663 508 1174.99663 506.6 1176.39663 501 1170.79663 495.4 1176.39663 494 1174.99663 499.6 1169.39663 500.996628 1168"></polygon>
+        </g>
+    </g>
+</svg>

client/modules/IDE/actions/ide.js

@@ -36,3 +36,15 @@ export function closeNewFileModal() {
     type: ActionTypes.HIDE_MODAL
   };
 }
+
+export function expandSidebar() {
+  return {
+    type: ActionTypes.EXPAND_SIDEBAR
+  };
+}
+
+export function collapseSidebar() {
+  return {
+    type: ActionTypes.COLLAPSE_SIDEBAR
+  };
+}

client/modules/IDE/components/Sidebar.js

@@ -1,17 +1,39 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import InlineSVG from 'react-inlinesvg';
+const rightArrowUrl = require('../../../images/right-arrow.svg');
+const leftArrowUrl = require('../../../images/left-arrow.svg');
 
 function Sidebar(props) {
+  const sidebarClass = classNames({
+    sidebar: true,
+    'sidebar--contracted': !props.isExpanded
+  });
+
   return (
-    <section className="sidebar">
+    <section className={sidebarClass}>
       <div className="sidebar__header">
         <h3 className="sidebar__title">Sketch Files</h3>
-        <a
+        <div className="sidebar__icons">
-          className="sidebar__add"
+          <a
-          onClick={props.newFile}
+            className="sidebar__add"
-        >
+            onClick={props.newFile}
-          +
+          >
-        </a>
+            +
+          </a>
+          <a
+            className="sidebar__contract"
+            onClick={props.collapseSidebar}
+          >
+            <InlineSVG src={leftArrowUrl} />
+          </a>
+          <a
+            className="sidebar__expand"
+            onClick={props.expandSidebar}
+          >
+            <InlineSVG src={rightArrowUrl} />
+          </a>
+        </div>
       </div>
       <ul className="sidebar__file-list">
         {props.files.map(file => {

client/modules/IDE/pages/IDEView.js

@@ -60,6 +60,9 @@ class IDEView extends React.Component {
           selectedFile={this.props.selectedFile}
           setSelectedFile={this.props.setSelectedFile}
           newFile={this.props.newFile}
+          isExpanded={this.props.ide.sidebarIsExpanded}
+          expandSidebar={this.props.expandSidebar}
+          collapseSidebar={this.props.collapseSidebar}
         />
         <Editor
           file={this.props.selectedFile}
@@ -99,7 +102,8 @@ IDEView.propTypes = {
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
-    modalIsVisible: PropTypes.bool.isRequired
+    modalIsVisible: PropTypes.bool.isRequired,
+    sidebarIsExpanded: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -134,7 +138,9 @@ IDEView.propTypes = {
   jsFiles: PropTypes.array.isRequired,
   cssFiles: PropTypes.array.isRequired,
   newFile: PropTypes.func.isRequired,
-  closeNewFileModal: PropTypes.func.isRequired
+  closeNewFileModal: PropTypes.func.isRequired,
+  expandSidebar: PropTypes.func.isRequired,
+  collapseSidebar: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -3,7 +3,8 @@ import * as ActionTypes from '../../../constants';
 const initialState = {
   isPlaying: false,
   selectedFile: '1',
-  modalIsVisible: false
+  modalIsVisible: false,
+  sidebarIsExpanded: true
 };
 
 const ide = (state = initialState, action) => {
@@ -22,6 +23,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { modalIsVisible: true });
     case ActionTypes.HIDE_MODAL:
       return Object.assign({}, state, { modalIsVisible: false });
+    case ActionTypes.COLLAPSE_SIDEBAR:
+      return Object.assign({}, state, { sidebarIsExpanded: false });
+    case ActionTypes.EXPAND_SIDEBAR:
+      return Object.assign({}, state, { sidebarIsExpanded: true });
     default:
       return state;
   }

client/styles/abstracts/_placeholders.scss

@@ -41,6 +41,7 @@
 	&:hover {
 		color: $light-icon-hover-color;
 		& g {
+			opacity: 1;
 			fill: $light-icon-hover-color;
 		}
 	}

client/styles/components/_sidebar.scss

@@ -3,23 +3,37 @@
   display: flex;
   justify-content: space-between;
   border-top: 1px solid $ide-border-color;
+  align-items: center;
+  height: #{47 / $base-font-size}rem;
 }
 
 .sidebar__title {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{16 / $base-font-size}rem;
   display: inline-block;
+  .sidebar--contracted & {
+    display: none;
+  }
 }
 
 .sidebar__add {
   cursor: pointer;
+  height: #{26 / $base-font-size}rem;
+  margin-right: #{16 / $base-font-size}rem;
+  font-size: #{24 / $base-font-size}rem;
+  .sidebar--contracted & {
+    display: none;
+  }
 }
 
 .sidebar__file-list {
   border-top: 1px solid $ide-border-color;
+  .sidebar--contracted & {
+    display: none;
+  }
 }
 
 .sidebar__file-item {
-  font-size: #{12 / $base-font-size}rem;
+  font-size: #{16 / $base-font-size}rem;
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
   cursor: pointer;
@@ -27,3 +41,31 @@
     background-color: $ide-border-color;
   }
 }
+
+.sidebar__contract {
+  @extend %icon;
+  height: #{14 / $base-font-size}rem;
+  & svg {
+    height: #{14 / $base-font-size}rem;
+  }
+  .sidebar--contracted & {
+    display: none;
+  }
+}
+
+.sidebar__expand {
+  @extend %icon;
+  height: #{14 / $base-font-size}rem;
+  & svg {
+    height: #{14 / $base-font-size}rem;
+  }
+  display: none;
+  .sidebar--contracted & {
+    display: inline-block;
+  }
+}
+
+.sidebar__icons {
+  display: flex;
+  align-items: center;
+}

client/styles/layout/_ide.scss

@@ -20,5 +20,8 @@
 }
 
 .sidebar {
-  width: #{140 / $base-font-size}rem;
+  width: #{180 / $base-font-size}rem;
+  &.sidebar--contracted {
+  	width: #{20 / $base-font-size}rem;
+  }
 }