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

Inline Editor Close Button #5443

Merged
merged 8 commits into from
Oct 10, 2013
Merged

Inline Editor Close Button #5443

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0f39692
Added close button to inline editor
Oct 7, 2013
e331204
Added the close button for all inline widgets
Oct 9, 2013
1bd959f
Fixed jslint errors
Oct 9, 2013
f4014f3
Fixed a typo in code
Oct 10, 2013
1277679
Editor now gets focus back when clicking the close button
Oct 10, 2013
9b10a82
Tidied up the code for easier reading
Oct 10, 2013
a0f8a30
Identifying button with class instead of an id
Oct 10, 2013
dfa7cb5
Code cleanup
Oct 10, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/editor/InlineTextEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ define(function (require, exports, module) {

// header containing filename, dirty indicator, line number
var $header = $("<div/>").addClass("inline-editor-header");

var $filenameInfo = $("<a/>").addClass("filename");

// dirty indicator, with file path stored on it
Expand Down
12 changes: 10 additions & 2 deletions src/editor/InlineWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,16 @@ define(function (require, exports, module) {
this.htmlContent = window.document.createElement("div");
this.$htmlContent = $(this.htmlContent).addClass("inline-widget");
this.$htmlContent.append("<div class='shadow top' />")
.append("<div class='shadow bottom' />");

.append("<div class='shadow bottom' />")
.append("<a href='#' class='close' id='inline-close'>&times;</a>");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't use an id here because there can be multiple inline editors open at once. If you change this to a class it should work fine.

But it seems like you could just use the existing .close class on this node -- the find() call below should still work since it's scoped, and the CSS rule below is already nested under a .inline-widget selector as well.


// create the close button
this.$closeBtn = this.$htmlContent.find('#inline-close');
this.$closeBtn.click(function (e) {
self.close();
e.stopImmediatePropagation();
});

this.$htmlContent.on("keydown", function (e) {
if (e.keyCode === KeyEvent.DOM_VK_ESCAPE) {
self.close();
Expand Down
9 changes: 9 additions & 0 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -672,6 +672,15 @@ a, img {
background-color: @inline-background-color-1;
}
}

#inline-close {
position: relative;
float: left;
left: 15px;
top: 10px;
margin-right: 30px;
}

}

/* CSSInlineEditor rule list */
Expand Down