Simulate indentation of the project tree using some divs

src/project/FileTreeView.js

@@ -60,6 +60,8 @@ define(function (require, exports, module) {
         RIGHT_MOUSE_BUTTON    = 2,
         LEFT_MOUSE_BUTTON     = 0;
 
+    var INDENTATION_WIDTH     = 10;
+
     /**
      * @private
      *
@@ -108,6 +110,40 @@ define(function (require, exports, module) {
         return width;
     }
 
+    /**
+     * @private
+     *
+     * Create an appropriate div based "thickness" to indent the tree correctly.
+     *
+     * @param {int} depth The depth of the current node.
+     * @return {ReactComponent} The resulting div.
+     */
+    function _createThickness(depth) {
+        return DOM.div({
+            style: {
+                display: "inline-block",
+                width: INDENTATION_WIDTH * depth
+            }
+        });
+    }
+
+    /**
+     * @private
+     *
+     * Create, and indent correctly, the arrow icons used for the folders.
+     *
+     * @param {int} depth The depth of the current node.
+     * @return {ReactComponent} The resulting ins.
+     */
+    function _createAlignedIns(depth) {
+        return DOM.ins({
+            className: "jstree-icon",
+            style: {
+                marginLeft: INDENTATION_WIDTH * depth
+            }
+        });
+    }
+
     /**
      * This is a mixin that provides rename input behavior. It is responsible for taking keyboard input
      * and invoking the correct action based on that input.
@@ -391,6 +427,7 @@ define(function (require, exports, module) {
         handleClick: function (e) {
             // If we're renaming, allow the click to go through to the rename input.
             if (this.props.entry.get("rename")) {
+                e.stopPropagation();
                 return;
             }
 
@@ -457,7 +494,22 @@ define(function (require, exports, module) {
                 'context-node': this.props.entry.get("context")
             });
 
+            var liArgs = [
+                {
+                    className: this.getClasses("jstree-leaf"),
+                    onClick: this.handleClick,
+                    onMouseDown: this.handleMouseDown,
+                    onDoubleClick: this.handleDoubleClick
+                },
+                DOM.ins({
+                    className: "jstree-icon"
+                }),
+            ];
+
+            var thickness = _createThickness(this.props.depth);
+
             if (this.props.entry.get("rename")) {
+                liArgs.push(thickness);
                 nameDisplay = fileRenameInput({
                     actions: this.props.actions,
                     entry: this.props.entry,
@@ -469,20 +521,13 @@ define(function (require, exports, module) {
                 var aArgs = _.flatten([{
                     href: "#",
                     className: fileClasses
-                }, this.getIcons(), name, extension]);
+                }, thickness, this.getIcons(), name, extension]);
                 nameDisplay = DOM.a.apply(DOM.a, aArgs);
             }
 
-            return DOM.li({
-                className: this.getClasses("jstree-leaf"),
-                onClick: this.handleClick,
-                onMouseDown: this.handleMouseDown,
-                onDoubleClick: this.handleDoubleClick
-            },
-                DOM.ins({
-                    className: "jstree-icon"
-                }, " "),
-                nameDisplay);
+            liArgs.push(nameDisplay);
+
+            return DOM.li.apply(DOM.li, liArgs);
         }
     }));
 
@@ -612,6 +657,11 @@ define(function (require, exports, module) {
          * If you click on a directory, it will toggle between open and closed.
          */
         handleClick: function (event) {
+            if (this.props.entry.get("rename")) {
+                event.stopPropagation();
+                return;
+            }
+
             if (event.button !== LEFT_MOUSE_BUTTON) {
                 return;
             }
@@ -662,12 +712,12 @@ define(function (require, exports, module) {
                 nodeClass,
                 childNodes,
                 children = entry.get("children"),
-                isOpen = entry.get("open"),
-                directoryClasses = "";
+                isOpen = entry.get("open");
 
             if (isOpen && children) {
                 nodeClass = "open";
                 childNodes = directoryContents({
+                    depth: this.props.depth + 1,
                     parentPath: this.myPath(),
                     contents: children,
                     extensions: this.props.extensions,
@@ -680,46 +730,46 @@ define(function (require, exports, module) {
                 nodeClass = "closed";
             }
 
-            if (this.props.entry.get("selected")) {
-                directoryClasses += " jstree-clicked sidebar-selection";
-            }
+            var nameDisplay,
+                cx = Classnames;
 
-            if (entry.get("context")) {
-                directoryClasses += " context-node";
-            }
+            var directoryClasses = cx({
+                'jstree-clicked sidebar-selection': entry.get("selected"),
+                'context-node': entry.get("context")
+            });
+
+            var liArgs = [
+                {
+                    className: this.getClasses("jstree-" + nodeClass),
+                    onClick: this.handleClick,
+                    onMouseDown: this.handleMouseDown
+                },
+                _createAlignedIns(this.props.depth)
+            ];
+
+            var thickness = _createThickness(this.props.depth);
 
-            var nameDisplay, renameInput;
             if (entry.get("rename")) {
-                renameInput = directoryRenameInput({
+                liArgs.push(thickness);
+                nameDisplay = directoryRenameInput({
                     actions: this.props.actions,
-                    entry: this.props.entry,
+                    entry: entry,
                     name: this.props.name,
                     parentPath: this.props.parentPath
                 });
+            } else {
+                // Need to flatten the arguments because getIcons returns an array
+                var aArgs = _.flatten([{
+                    href: "#",
+                    className: directoryClasses
+                }, thickness, this.getIcons(), this.props.name]);
+                nameDisplay = DOM.a.apply(DOM.a, aArgs);
             }
 
-            // Need to flatten the arguments because getIcons returns an array
-            var aArgs = _.flatten([{
-                href: "#",
-                className: directoryClasses
-            }, this.getIcons()]);
-            if (!entry.get("rename")) {
-                aArgs.push(this.props.name);
-            }
-
-            nameDisplay = DOM.a.apply(DOM.a, aArgs);
+            liArgs.push(nameDisplay);
+            liArgs.push(childNodes);
 
-            return DOM.li({
-                className: this.getClasses("jstree-" + nodeClass),
-                onClick: this.handleClick,
-                onMouseDown: this.handleMouseDown
-            },
-                DOM.ins({
-                    className: "jstree-icon"
-                }, " "),
-                renameInput,
-                nameDisplay,
-                childNodes);
+            return DOM.li.apply(DOM.li, liArgs);
         }
     }));
 
@@ -764,6 +814,7 @@ define(function (require, exports, module) {
 
                 if (FileTreeViewModel.isFile(entry)) {
                     return fileNode({
+                        depth: this.props.depth,
                         parentPath: this.props.parentPath,
                         name: name,
                         entry: entry,
@@ -775,6 +826,7 @@ define(function (require, exports, module) {
                     });
                 } else {
                     return directoryNode({
+                        depth: this.props.depth,
                         parentPath: this.props.parentPath,
                         name: name,
                         entry: entry,
@@ -971,6 +1023,7 @@ define(function (require, exports, module) {
                 }),
                 contents = directoryContents({
                     isRoot: true,
+                    depth: 1,
                     parentPath: this.props.parentPath,
                     sortDirectoriesFirst: this.props.sortDirectoriesFirst,
                     contents: this.props.treeData,

src/styles/jsTreeTheme.less

@@ -27,7 +27,7 @@
 @li-min-height: 23px;
 
 .jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
-.jstree li { display:block; min-height:@li-min-height; line-height:16px; white-space:nowrap; margin-left:18px; min-width:18px; }
+.jstree li { display:block; min-height:@li-min-height; line-height:16px; white-space:nowrap; min-width:18px; }
 .jstree-rtl li { margin-left:0; margin-right:18px; }
 .jstree > ul > li { margin-left:0; }
 .jstree-rtl > ul > li { margin-right:0; }
@@ -86,14 +86,10 @@ li.jstree-closed > ul { display:none; }
         color: @project-panel-text-2;
     }
     &.jstree-closed, &.jstree-open {
-        margin-left: 10px;
         > a {
             color: @project-panel-text-2;
         }
     }
-    &.jstree-leaf {
-        margin-left: 10px;
-    }
 }
 
 .jstree ins {
@@ -155,6 +151,7 @@ ins.jstree-icon {
     left: 3px !important;
     top: 2px !important;
     margin: 0;
+    margin-bottom: 5px; /* It should instead be applyed only to folders */
     padding: 0;
     position: relative;
     width: 150px;