Simulate indentation of the project tree using some divs

instead of using combinations of padding/margin.

Fixes #10574

Author: ficristo

src/project/FileTreeView.js

@@ -59,6 +59,8 @@ define(function (require, exports, module) {
     var CLICK_RENAME_MINIMUM  = 500,
         RIGHT_MOUSE_BUTTON    = 2,
         LEFT_MOUSE_BUTTON     = 0;
+    
+    var INDENTATION_WIDTH     = 18;
 
     /**
      * @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 depthness of the current node.
+     * @return {ReactComponent} - The resulting div.
+     */
+    function _createThickness(depth) {
+        return DOM.div({
+            className: "thickness",
+            style: {
+                width: (INDENTATION_WIDTH * depth) + "px"
+            }
+        });
+    }
+
+    /**
+     * @private
+     *
+     * Create the arrow icons used for the folders indented correctly.
+     *
+     * @param {int} depth - The depthness of the current node.
+     * @return {ReactComponent} - The resulting ins.
+     */
+    function _createAlignedIns(depth) {
+        return DOM.ins({
+            className: "jstree-icon",
+            style: {
+                marginLeft: (INDENTATION_WIDTH * depth) + "px"
+            }
+        }, " ");
+    }
+
     /**
      * 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.
@@ -457,32 +493,40 @@ 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")) {
                 nameDisplay = fileRenameInput({
                     actions: this.props.actions,
                     entry: this.props.entry,
                     name: this.props.name,
                     parentPath: this.props.parentPath
                 });
+
+                liArgs.push(thickness);
             } else {
                 // Need to flatten the argument list because getIcons returns an array
                 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);
         }
     }));
 
@@ -668,6 +712,7 @@ define(function (require, exports, module) {
             if (isOpen && children) {
                 nodeClass = "open";
                 childNodes = directoryContents({
+                    depth: this.props.depth + 1,
                     parentPath: this.myPath(),
                     contents: children,
                     extensions: this.props.extensions,
@@ -698,11 +743,13 @@ define(function (require, exports, module) {
                 });
             }
 
+            var thickness = _createThickness(this.props.depth);
+
             // Need to flatten the arguments because getIcons returns an array
             var aArgs = _.flatten([{
                 href: "#",
                 className: directoryClasses
-            }, this.getIcons()]);
+            }, thickness, this.getIcons()]);
             if (!entry.get("rename")) {
                 aArgs.push(this.props.name);
             }
@@ -714,9 +761,7 @@ define(function (require, exports, module) {
                 onClick: this.handleClick,
                 onMouseDown: this.handleMouseDown
             },
-                DOM.ins({
-                    className: "jstree-icon"
-                }, " "),
+                _createAlignedIns(this.props.depth),
                 renameInput,
                 nameDisplay,
                 childNodes);
@@ -764,6 +809,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 +821,7 @@ define(function (require, exports, module) {
                     });
                 } else {
                     return directoryNode({
+                        depth: this.props.depth,
                         parentPath: this.props.parentPath,
                         name: name,
                         entry: entry,
@@ -977,6 +1024,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/brackets.less

@@ -1009,10 +1009,6 @@ a, img {
 #project-files-container {
     .box-flex(1);
 
-    ul {
-        padding-left: 8px;
-    }
-
     > ul {
         padding-bottom: 24px;
     }    

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:0px; }
 .jstree-rtl > ul > li { margin-right:0px; }
@@ -46,6 +46,7 @@ li.jstree-closed > ul { display:none; }
 .jstree-brackets .jstree-open > ins { background-position:-72px 0; }
 .jstree-brackets .jstree-closed > ins { background-position:-54px 0; }
 .jstree-brackets .jstree-leaf > ins { background-position:-36px 0; }
+.jstree-brackets .thickness { display: inline-block; }
 
 .jstree-brackets li a:hover {
     text-decoration: none;
@@ -86,14 +87,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 {