From 7fa90ab9ec766f791679bce08b07326e4390b413 Mon Sep 17 00:00:00 2001 From: Kevin Dangoor Date: Sun, 28 Sep 2014 10:07:00 -0400 Subject: [PATCH 1/2] Properly handle clicks when renaming nested files and directories. Fix for #9316 --- src/project/FileTreeView.js | 48 ++++++++++++++++++++++++----------- src/project/ProjectManager.js | 2 +- src/styles/jsTreeTheme.less | 11 ++++++-- 3 files changed, 43 insertions(+), 18 deletions(-) diff --git a/src/project/FileTreeView.js b/src/project/FileTreeView.js index 1107947be8e..299988f6975 100644 --- a/src/project/FileTreeView.js +++ b/src/project/FileTreeView.js @@ -95,6 +95,18 @@ define(function (require, exports, module) { * and invoking the correct action based on that input. */ var renameBehavior = { + /** + * Stop clicks from propagating so that clicking on the rename input doesn't + * cause directories to collapse. + */ + handleClick: function (e) { + e.stopPropagation(); + if (e.button !== LEFT_MOUSE_BUTTON) { + return false; + } + return true; + }, + /** * If the user presses enter or escape, we either successfully complete or cancel, respectively, * the rename or create operation that is underway. @@ -162,12 +174,13 @@ define(function (require, exports, module) { var width = _measureText(this.props.name); return DOM.input({ - className: "jstree-rename-input " + this.props.fileClasses, + className: "jstree-rename-input", type: "text", defaultValue: this.props.name, autoFocus: true, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, + onClick: this.handleClick, style: { width: width }, @@ -423,8 +436,7 @@ define(function (require, exports, module) { actions: this.props.actions, entry: this.props.entry, name: this.props.name, - parentPath: this.props.parentPath, - fileClasses: fileClasses + parentPath: this.props.parentPath }); } else { // Need to flatten the argument list because getIcons returns an array @@ -520,10 +532,11 @@ define(function (require, exports, module) { autoFocus: true, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, - ref: "name", style: { width: width - } + }, + onClick: this.handleClick, + ref: "name" }); } }); @@ -635,22 +648,26 @@ define(function (require, exports, module) { directoryClasses += " context-node"; } - var nameDisplay; + var nameDisplay, renameInput; if (entry.get("rename")) { - nameDisplay = directoryRenameInput({ + renameInput = directoryRenameInput({ actions: this.props.actions, entry: this.props.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 - }, this.getIcons(), this.props.name], true); - 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()], true); + if (!entry.get("rename")) { + aArgs.push(this.props.name); + } + + nameDisplay = DOM.a.apply(DOM.a, aArgs); return DOM.li({ className: this.getClasses("jstree-" + nodeClass), @@ -661,7 +678,8 @@ define(function (require, exports, module) { className: "jstree-icon" }, " "), nameDisplay, - childNodes); + childNodes, + renameInput); } }); diff --git a/src/project/ProjectManager.js b/src/project/ProjectManager.js index ca3ad04b192..42b54eaac09 100644 --- a/src/project/ProjectManager.js +++ b/src/project/ProjectManager.js @@ -1128,7 +1128,7 @@ define(function (require, exports, module) { model.setSelectionWidth($projectTreeContainer.width()); $(".main-view").click(function (jqEvent) { - if (jqEvent.target.className !== "jstree-rename-input") { + if (!jqEvent.target.classList.contains("jstree-rename-input")) { forceFinishRename(); actionCreator.setContext(null); } diff --git a/src/styles/jsTreeTheme.less b/src/styles/jsTreeTheme.less index 6345e7e922f..1d5588ba15e 100644 --- a/src/styles/jsTreeTheme.less +++ b/src/styles/jsTreeTheme.less @@ -31,8 +31,15 @@ .jstree-rtl li { margin-left:0; margin-right:18px; } .jstree > ul > li { margin-left:0px; } .jstree-rtl > ul > li { margin-right:0px; } -.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } + -.jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; } +.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } +.jstree a { + white-space: nowrap; + text-decoration: none; + padding: 1px 2px; + margin: 0; + line-height: 16px; + height: 16px; +} .jstree a:focus { outline: none; } .jstree a > ins { height:16px; width:16px; } .jstree a > .jstree-icon { margin-right:3px; } From db383a1f886e3b5d1d0ca9a4d85d9f60e0438df1 Mon Sep 17 00:00:00 2001 From: Kevin Dangoor Date: Tue, 30 Sep 2014 17:29:45 -0400 Subject: [PATCH 2/2] Change the directory DOM to match what's expected with the current CSS on rename. --- src/project/FileTreeView.js | 4 ++-- src/styles/jsTreeTheme.less | 8 -------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/project/FileTreeView.js b/src/project/FileTreeView.js index 20b871edb17..08d6550a5fd 100644 --- a/src/project/FileTreeView.js +++ b/src/project/FileTreeView.js @@ -688,9 +688,9 @@ define(function (require, exports, module) { DOM.ins({ className: "jstree-icon" }, " "), + renameInput, nameDisplay, - childNodes, - renameInput); + childNodes); } }); diff --git a/src/styles/jsTreeTheme.less b/src/styles/jsTreeTheme.less index 10fc0507e8a..e6f583b019e 100644 --- a/src/styles/jsTreeTheme.less +++ b/src/styles/jsTreeTheme.less @@ -32,14 +32,6 @@ .jstree > ul > li { margin-left:0px; } .jstree-rtl > ul > li { margin-right:0px; } .jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } -.jstree a { - white-space: nowrap; - text-decoration: none; - padding: 1px 2px; - margin: 0; - line-height: 16px; - height: 16px; -} .jstree a:focus { outline: none; } .jstree a > ins { height:16px; width:16px; } .jstree a > .jstree-icon { margin-right:3px; }