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 5 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
10 changes: 9 additions & 1 deletion src/editor/InlineWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,15 @@ define(function (require, exports, module) {
this.$htmlContent = $(this.htmlContent).addClass("inline-widget");
this.$htmlContent.append("<div class='shadow top' />")
.append("<div class='shadow bottom' />");


// create the close button
this.$closeBtn = this.$htmlContent.append("<a href='#' class='close' id='inline-close'>&times;</a>");
Copy link
Contributor

Choose a reason for hiding this comment

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

This assignment is wrong. You're assigning the entire inline widget as close button. What you want is create an element with your "a" tag and assign it to the close button before appending it to $htmlContent.

Now with this code you can close the inline editor just clicking anywhere inside the inline.


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;
right: 20px;
top: 10px;
}

}

/* CSSInlineEditor rule list */
Expand Down