From 1ae27f0d6675430b55f2cce44f7c65cff34c27c8 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Thu, 25 Aug 2016 17:32:27 -0400
Subject: [PATCH] add file icons and file types default to file

---
 client/images/folder-triangle.svg         | 14 +++++++++++++
 client/images/folder.svg                  | 12 +++++++++++
 client/modules/IDE/actions/files.js       |  4 ++--
 client/modules/IDE/components/FileNode.js | 11 ++++++++++
 client/modules/IDE/components/Sidebar.js  | 11 ++++++++--
 client/modules/IDE/reducers/files.js      | 14 ++++++++-----
 client/styles/components/_sidebar.scss    | 25 +++++++++++++++++++----
 server/models/project.js                  |  2 +-
 8 files changed, 79 insertions(+), 14 deletions(-)
 create mode 100644 client/images/folder-triangle.svg
 create mode 100644 client/images/folder.svg

diff --git a/client/images/folder-triangle.svg b/client/images/folder-triangle.svg
new file mode 100644
index 00000000..1843a73e
--- /dev/null
+++ b/client/images/folder-triangle.svg
@@ -0,0 +1,14 @@
+<?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">
+    <!-- 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="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>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/images/folder.svg b/client/images/folder.svg
new file mode 100644
index 00000000..172b4d75
--- /dev/null
+++ b/client/images/folder.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="12px" viewBox="0 0 9 8" 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>"." project folder</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(-11.000000, -13.000000)" fill="#B5B5B5">
+            <path d="M15.628,14.604 C15.628,14.604 15.628,13.848 15.016,13.848 L12.88,13.848 C12.256,13.848 12.256,14.604 12.256,14.604 L15.628,14.604 Z M18.964,15.036 L11.932,15.036 C11.524,15.036 11.2,15.36 11.2,15.768 L11.2,20.616 C11.2,20.82 11.356,20.988 11.56,20.988 L19.336,20.988 C19.54,20.988 19.708,20.82 19.708,20.616 L19.708,15.768 C19.708,15.36 19.372,15.036 18.964,15.036 L18.964,15.036 Z" id="&quot;.&quot;-project-folder"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 638aca56..aeba6588 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -74,7 +74,7 @@ export function createFile(formProps) {
       const postParams = {
         name: createUniqueName(formProps.name, state.files),
         url: formProps.url,
-        content: formProps.content || ''
+        content: formProps.content || '',
         // TODO pass parent id to API, once there are folders
         parentId: rootFile.id
       };
@@ -107,7 +107,7 @@ export function createFile(formProps) {
         id,
         _id: id,
         url: formProps.url,
-        content: formProps.content || ''
+        content: formProps.content || '',
         // TODO pass parent id from File Tree
         parentId: rootFile.id
       });
diff --git a/client/modules/IDE/components/FileNode.js b/client/modules/IDE/components/FileNode.js
index 6048aefa..ebd3abf1 100644
--- a/client/modules/IDE/components/FileNode.js
+++ b/client/modules/IDE/components/FileNode.js
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import InlineSVG from 'react-inlinesvg';
 const downArrowUrl = require('../../../images/down-arrow.svg');
+const fileUrl = require('../../../images/file.svg');
 import classNames from 'classnames';
 
 export class FileNode extends React.Component {
@@ -70,6 +71,15 @@ export class FileNode extends React.Component {
           if (this.props.name !== 'root') {
             return (
               <div className="file-item__content">
+                {(() => { // eslint-disable-line
+                  if (this.props.type === 'file') {
+                    return (
+                      <span className="sidebar__file-item-icon">
+                        <InlineSVG src={fileUrl} />
+                      </span>
+                    );
+                  }
+                })()}
                 <a className="sidebar__file-item-name">{this.props.name}</a>
                 <input
                   type="text"
@@ -141,6 +151,7 @@ FileNode.propTypes = {
   parentId: PropTypes.string,
   children: PropTypes.array,
   name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
   isSelected: PropTypes.bool,
   isOptionsOpen: PropTypes.bool,
   isEditingName: PropTypes.bool,
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index cb9a0153..64a2af52 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -4,6 +4,8 @@ import InlineSVG from 'react-inlinesvg';
 // import SidebarItem from './SidebarItem';
 const rightArrowUrl = require('../../../images/right-arrow.svg');
 const leftArrowUrl = require('../../../images/left-arrow.svg');
+const folderUrl = require('../../../images/folder.svg');
+const downArrowUrl = require('../../../images/down-arrow.svg');
 import ConnectedFileNode from './FileNode';
 
 class Sidebar extends React.Component {
@@ -25,14 +27,19 @@ class Sidebar extends React.Component {
     return (
       <nav className={sidebarClass} title="file-navigation" role="navigation">
         <div className="sidebar__header">
-          <h3 className="sidebar__title">Sketch Files</h3>
+          <h3 className="sidebar__title">
+            <span className="sidebar__folder-icon">
+              <InlineSVG src={folderUrl} />
+            </span>
+            <span>project-folder</span>
+          </h3>
           <div className="sidebar__icons">
             <button
               aria-label="add file"
               className="sidebar__add"
               onClick={this.props.newFile}
             >
-              +
+              <InlineSVG src={downArrowUrl} />
             </button>
             <button
               aria-label="collapse file navigation"
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index 52e9b889..f9445345 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@@ -42,26 +42,30 @@ function initialState() {
       name: 'root',
       id: r,
       _id: r,
-      children: [a, b, c]
+      children: [a, b, c],
+      type: 'folder'
     },
     {
       name: 'sketch.js',
       content: defaultSketch,
       id: a,
       _id: a,
-      isSelected: true
+      isSelected: true,
+      type: 'file'
     },
     {
       name: 'index.html',
       content: defaultHTML,
       id: b,
-      _id: b
+      _id: b,
+      type: 'file'
     },
     {
       name: 'style.css',
       content: defaultCSS,
       id: c,
-      _id: c
+      _id: c,
+      type: 'file'
     }];
 }
 
@@ -101,7 +105,7 @@ const files = (state, action) => {
           }
           return file;
         });
-        return [...newState, { name: action.name, id: action.id, _id: action._id, content: action.content, url: action.url }];
+        return [...newState, { name: action.name, id: action.id, _id: action._id, content: action.content, url: action.url, type: 'file' }];
       }
     case ActionTypes.SHOW_FILE_OPTIONS:
       return state.map(file => {
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index b109dd29..a7dc7d82 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -20,9 +20,9 @@
 .sidebar__add {
   @extend %icon;
   cursor: pointer;
-  height: #{26 / $base-font-size}rem;
-  margin-right: #{16 / $base-font-size}rem;
-  font-size: #{24 / $base-font-size}rem;
+  // height: #{26 / $base-font-size}rem;
+  // margin-right: #{16 / $base-font-size}rem;
+  // font-size: #{24 / $base-font-size}rem;
   .sidebar--contracted & {
     display: none;
   }
@@ -46,11 +46,14 @@
   &:hover .sidebar__file-item-name {
     color: $light-primary-text-color;
   }
+  &:hover .sidebar__file-item-icon g {
+    fill: $light-primary-text-color;
+  }
 }
 
 .file-item__content {
   display: flex;
-  justify-content: space-between;
+  // justify-content: space-between;
   position: relative;
 }
 
@@ -63,6 +66,8 @@
 .sidebar__file-item-show-options {
   @extend %icon;
   display: none;
+  margin-left: auto;
+  margin-right: 0;
   .sidebar__file-item--selected & {
     display: inline-block;
   }
@@ -96,6 +101,7 @@
 
 .sidebar__contract {
   @extend %icon;
+  margin-left: #{4 / $base-font-size}rem;
   height: #{14 / $base-font-size}rem;
   & svg {
     height: #{14 / $base-font-size}rem;
@@ -121,3 +127,14 @@
   display: flex;
   align-items: center;
 }
+
+.sidebar__folder-icon {
+  margin-right: #{5 / $base-font-size}rem;
+  & g {
+    fill: $light-primary-text-color;
+  }
+}
+
+.sidebar__file-item-icon {
+  margin-right: #{5 / $base-font-size}rem;
+}
diff --git a/server/models/project.js b/server/models/project.js
index 3811f38c..9fd8bffa 100644
--- a/server/models/project.js
+++ b/server/models/project.js
@@ -38,7 +38,7 @@ const fileSchema = new Schema({
   content: { type: String, default: '' },
   url: { type: String },
   children: { type: [ String ], default: [] },
-  fileType: { type: String },
+  fileType: { type: String, default: 'file' },
   isSelected: { type: Boolean }
 }, { timestamps: true, _id: true });