add file icons and file types default to file

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>

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>

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
       });

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,

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"

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 => {

client/styles/components/_sidebar.scss

@@ -20,9 +20,9 @@
 .sidebar__add {
   @extend %icon;
   cursor: pointer;
-  height: #{26 / $base-font-size}rem;
+  // height: #{26 / $base-font-size}rem;
-  margin-right: #{16 / $base-font-size}rem;
+  // margin-right: #{16 / $base-font-size}rem;
-  font-size: #{24 / $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;
+}

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 });