Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Commit

Permalink
Merge pull request #12047 from ficristo/fix-folders-tree
Browse files Browse the repository at this point in the history 
Simulate indentation of the project tree using some divs
  • Loading branch information
Marcel Gerber authored Aug 20, 2016
2 parents bf9b07d + dc8cb32 commit 23f3eb6
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 48 deletions.
139 changes: 96 additions & 43 deletions src/project/FileTreeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ define(function (require, exports, module) {
RIGHT_MOUSE_BUTTON = 2,
LEFT_MOUSE_BUTTON = 0;

var INDENTATION_WIDTH = 10;

/**
* @private
*
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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,
Expand All @@ -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);
}
}));

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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,
Expand All @@ -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);
}
}));

Expand Down Expand Up @@ -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,
Expand All @@ -775,6 +826,7 @@ define(function (require, exports, module) {
});
} else {
return directoryNode({
depth: this.props.depth,
parentPath: this.props.parentPath,
name: name,
entry: entry,
Expand Down Expand Up @@ -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,
Expand Down
7 changes: 2 additions & 5 deletions src/styles/jsTreeTheme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 23f3eb6

Please sign in to comment.