From 550347e6fce4734e13d06128c4f42aef8f2153dd Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Tue, 30 Aug 2016 21:08:50 -0400
Subject: [PATCH] add expanding/contracting styles

---
 client/images/triangle-arrow-down.svg     |  4 +---
 client/images/triangle-arrow-right.svg    |  4 +---
 client/modules/IDE/components/FileNode.js | 29 +++++++++++------------
 client/styles/components/_sidebar.scss    | 15 ++++++++++++
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/client/images/triangle-arrow-down.svg b/client/images/triangle-arrow-down.svg
index fec407e0..a66e9ff6 100644
--- a/client/images/triangle-arrow-down.svg
+++ b/client/images/triangle-arrow-down.svg
@@ -1,7 +1,5 @@
-<?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>
+    <title>Down Arrow</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
diff --git a/client/images/triangle-arrow-right.svg b/client/images/triangle-arrow-right.svg
index 8261d814..a99148b2 100644
--- a/client/images/triangle-arrow-right.svg
+++ b/client/images/triangle-arrow-right.svg
@@ -1,7 +1,5 @@
-<?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>
+    <title>Right Arrow</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
diff --git a/client/modules/IDE/components/FileNode.js b/client/modules/IDE/components/FileNode.js
index ed481706..a08f7bbe 100644
--- a/client/modules/IDE/components/FileNode.js
+++ b/client/modules/IDE/components/FileNode.js
@@ -83,23 +83,22 @@ 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>
+                    <div>
+                      <span
+                        className="sidebar__file-item-closed"
+                        onClick={() => this.props.showFolderChildren(this.props.id)}
+                      >
+                        <InlineSVG className="folder-right" src={folderRightUrl} />
+                      </span>
+                      <span
+                        className="sidebar__file-item-open"
+                        onClick={() => this.props.hideFolderChildren(this.props.id)}
+                      >
+                        <InlineSVG className="folder-down" src={folderDownUrl} />
+                      </span>
+                    </div>
                   );
                 })()}
                 <a className="sidebar__file-item-name">{this.props.name}</a>
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 030d4034..bea88324 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -166,6 +166,21 @@
   margin-right: #{5 / $base-font-size}rem;
 }
 
+.sidebar__file-item-closed {
+  @extend .sidebar__file-item-icon;
+  display: none;
+  .sidebar__file-item--closed & {
+    display: inline-block;
+  }
+}
+
+.sidebar__file-item-open {
+  @extend .sidebar__file-item-icon;
+  .sidebar__file-item--closed & {
+    display: none;
+  }
+}
+
 .sidebar__project-options {
   @extend %modal;
   display: none;