add hide/showing files, carrot doesn't work

client/constants.js

@@ -69,6 +69,8 @@ export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS';
 export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS';
 export const SHOW_NEW_FOLDER_MODAL = 'SHOW_NEW_FOLDER_MODAL';
 export const CLOSE_NEW_FOLDER_MODAL = 'CLOSE_NEW_FOLDER_MODAL';
+export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN';
+export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/images/triangle-arrow-down.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Triangle 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+            <g id="libraries" transform="translate(21.000000, 32.000000)">
+                <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

client/images/triangle-arrow-right.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="6px" height="7px" viewBox="0 0 6 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
     <title>Triangle 3</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="environment" transform="translate(-25.000000, -41.000000)" stroke="#B5B5B5" fill="#B5B5B5">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
             <g id="libraries" transform="translate(21.000000, 32.000000)">
                 <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
             </g>

client/modules/IDE/actions/files.js

@@ -247,3 +247,17 @@ export function deleteFile(id, parentId) {
     }
   };
 }
+
+export function showFolderChildren(id) {
+  return {
+    type: ActionTypes.SHOW_FOLDER_CHILDREN,
+    id
+  };
+}
+
+export function hideFolderChildren(id) {
+  return {
+    type: ActionTypes.HIDE_FOLDER_CHILDREN,
+    id
+  };
+}

client/modules/IDE/components/FileNode.js

@@ -5,6 +5,8 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import InlineSVG from 'react-inlinesvg';
 const downArrowUrl = require('../../../images/down-arrow.svg');
+const folderRightUrl = require('../../../images/triangle-arrow-right.svg');
+const folderDownUrl = require('../../../images/triangle-arrow-down.svg');
 const fileUrl = require('../../../images/file.svg');
 import classNames from 'classnames';
 
@@ -60,7 +62,8 @@ export class FileNode extends React.Component {
       'sidebar__file-item': this.props.name !== 'root',
       'sidebar__file-item--selected': this.props.isSelected,
       'sidebar__file-item--open': this.props.isOptionsOpen,
-      'sidebar__file-item--editing': this.props.isEditingName
+      'sidebar__file-item--editing': this.props.isEditingName,
+      'sidebar__file-item--closed': this.props.isFolderClosed
     });
     return (
       <div
@@ -80,7 +83,24 @@ export class FileNode extends React.Component {
                         <InlineSVG src={fileUrl} />
                       </span>
                     );
+                  } else if (this.props.isFolderClosed) {
+                    return (
+                      <span
+                        className="sidebar__file-item-icon"
+                        onClick={() => this.props.showFolderChildren(this.props.id)}
+                      >
+                        <InlineSVG src={folderRightUrl} />
+                      </span>
+                    );
                   }
+                  return (
+                    <span
+                      className="sidebar__file-item-icon"
+                      onClick={() => this.props.hideFolderChildren(this.props.id)}
+                    >
+                      <InlineSVG src={folderDownUrl} />
+                    </span>
+                  );
                 })()}
                 <a className="sidebar__file-item-name">{this.props.name}</a>
                 <input
@@ -179,6 +199,7 @@ FileNode.propTypes = {
   isSelected: PropTypes.bool,
   isOptionsOpen: PropTypes.bool,
   isEditingName: PropTypes.bool,
+  isFolderClosed: PropTypes.bool,
   setSelectedFile: PropTypes.func.isRequired,
   showFileOptions: PropTypes.func.isRequired,
   hideFileOptions: PropTypes.func.isRequired,
@@ -188,7 +209,9 @@ FileNode.propTypes = {
   updateFileName: PropTypes.func.isRequired,
   resetSelectedFile: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
-  newFolder: PropTypes.func.isRequired
+  newFolder: PropTypes.func.isRequired,
+  showFolderChildren: PropTypes.func.isRequired,
+  hideFolderChildren: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state, ownProps) {

client/modules/IDE/reducers/files.js

@@ -172,6 +172,20 @@ const files = (state, action) => {
         }
         return Object.assign({}, file, { isSelected: false });
       });
+    case ActionTypes.SHOW_FOLDER_CHILDREN:
+      return state.map(file => {
+        if (file.id === action.id) {
+          return Object.assign({}, file, { isFolderClosed: false });
+        }
+        return file;
+      });
+    case ActionTypes.HIDE_FOLDER_CHILDREN:
+      return state.map(file => {
+        if (file.id === action.id) {
+          return Object.assign({}, file, { isFolderClosed: true });
+        }
+        return file;
+      });
     default:
       return state;
   }

client/styles/components/_sidebar.scss

@@ -177,3 +177,7 @@
   padding: #{8 / $base-font-size}rem;
   width: #{110 / $base-font-size}rem;
 }
+
+.sidebar__file-item--closed .file-item__children {
+  display: none;
+}