From e82270a7091c447787074a4e46c5e57f0f9fbbda Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Tue, 30 Aug 2016 18:46:59 -0400
Subject: [PATCH] add hide/showing files, carrot doesn't work

---
 client/constants.js                           |  2 ++
 client/images/triangle-arrow-down.svg         | 14 ++++++++++
 ...-triangle.svg => triangle-arrow-right.svg} |  4 +--
 client/modules/IDE/actions/files.js           | 14 ++++++++++
 client/modules/IDE/components/FileNode.js     | 27 +++++++++++++++++--
 client/modules/IDE/reducers/files.js          | 14 ++++++++++
 client/styles/components/_sidebar.scss        |  4 +++
 7 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 client/images/triangle-arrow-down.svg
 rename client/images/{folder-triangle.svg => triangle-arrow-right.svg} (70%)

diff --git a/client/constants.js b/client/constants.js
index 459fe4f5..fdedc38b 100644
--- a/client/constants.js
+++ b/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';
diff --git a/client/images/triangle-arrow-down.svg b/client/images/triangle-arrow-down.svg
new file mode 100644
index 00000000..fec407e0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/images/folder-triangle.svg b/client/images/triangle-arrow-right.svg
similarity index 70%
rename from client/images/folder-triangle.svg
rename to client/images/triangle-arrow-right.svg
index 1843a73e..8261d814 100644
--- a/client/images/folder-triangle.svg
+++ b/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>
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 17b5cf1c..6c75fa59 100644
--- a/client/modules/IDE/actions/files.js
+++ b/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
+  };
+}
diff --git a/client/modules/IDE/components/FileNode.js b/client/modules/IDE/components/FileNode.js
index c68dda89..ed481706 100644
--- a/client/modules/IDE/components/FileNode.js
+++ b/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) {
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index 7fd7353a..1ae9713a 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/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;
   }
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 14ef3eaf..030d4034 100644
--- a/client/styles/components/_sidebar.scss
+++ b/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;
+}