From 0f39692e6517eb26a3eaafc4ea0db3b2b43d22e4 Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Mon, 7 Oct 2013 20:10:32 +0100 Subject: [PATCH 1/8] Added close button to inline editor --- src/editor/InlineTextEditor.js | 9 +++++++++ src/styles/brackets.less | 4 ++++ 2 files changed, 13 insertions(+) diff --git a/src/editor/InlineTextEditor.js b/src/editor/InlineTextEditor.js index b15407c0635..c678c671ef8 100644 --- a/src/editor/InlineTextEditor.js +++ b/src/editor/InlineTextEditor.js @@ -210,6 +210,15 @@ define(function (require, exports, module) { // header containing filename, dirty indicator, line number var $header = $("
").addClass("inline-editor-header"); + + // Close button + var $closeBtn = $header.append("×"); + + $closeBtn.on("mouseup", function(e) { + self.close(); + e.stopImmediatePropagation(); + }); + var $filenameInfo = $("").addClass("filename"); // dirty indicator, with file path stored on it diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 4cf338cfda3..96f88158d40 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -643,6 +643,10 @@ a, img { color: @inline-color-2; } } + + #inline-close { + margin-right: 10px; + } } .shadow { From e331204a6830134edc1be6484547e0e25b452f3c Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Wed, 9 Oct 2013 22:27:39 +0100 Subject: [PATCH 2/8] Added the close button for all inline widgets --- src/editor/InlineTextEditor.js | 8 -------- src/editor/InlineWidget.js | 10 +++++++++- src/styles/brackets.less | 13 +++++++++---- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/editor/InlineTextEditor.js b/src/editor/InlineTextEditor.js index c678c671ef8..2f6ea3c3e84 100644 --- a/src/editor/InlineTextEditor.js +++ b/src/editor/InlineTextEditor.js @@ -210,14 +210,6 @@ define(function (require, exports, module) { // header containing filename, dirty indicator, line number var $header = $("
").addClass("inline-editor-header"); - - // Close button - var $closeBtn = $header.append("×"); - - $closeBtn.on("mouseup", function(e) { - self.close(); - e.stopImmediatePropagation(); - }); var $filenameInfo = $("").addClass("filename"); diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index c6770b24a8e..2b916852e16 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -44,7 +44,15 @@ define(function (require, exports, module) { this.$htmlContent = $(this.htmlContent).addClass("inline-widget"); this.$htmlContent.append("
") .append("
"); - + + // create the close button + var $closeBtn = this.$htmlContent.append("×"); + + $closeBtn .on("mouseup", function(e) { + self.close(); + e.stopImmediatePropagation(); + }); + this.$htmlContent.on("keydown", function (e) { if (e.keyCode === KeyEvent.DOM_VK_ESCAPE) { self.close(); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 96f88158d40..f79abe35e40 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -643,10 +643,6 @@ a, img { color: @inline-color-2; } } - - #inline-close { - margin-right: 10px; - } } .shadow { @@ -676,6 +672,15 @@ a, img { background-color: @inline-background-color-1; } } + + + + #inline-close { + position: relative; + right: 20px; + top: 10px; + } + } /* CSSInlineEditor rule list */ From 1bd959fd7cec2e2446c5853d543a09afcd80cf7a Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Wed, 9 Oct 2013 22:48:21 +0100 Subject: [PATCH 3/8] Fixed jslint errors --- src/editor/InlineWidget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index 2b916852e16..fac7a83174f 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -48,7 +48,7 @@ define(function (require, exports, module) { // create the close button var $closeBtn = this.$htmlContent.append("×"); - $closeBtn .on("mouseup", function(e) { + $closeBtn.on("mouseup", function (e) { self.close(); e.stopImmediatePropagation(); }); From f4014f34ab883db38f47a0c0dfeaf6e0a25b244a Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Thu, 10 Oct 2013 18:41:40 +0100 Subject: [PATCH 4/8] Fixed a typo in code --- src/editor/InlineWidget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index fac7a83174f..a407ef6f546 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -46,7 +46,7 @@ define(function (require, exports, module) { .append("
"); // create the close button - var $closeBtn = this.$htmlContent.append("×"); + var $closeBtn = this.$htmlContent.append("×"); $closeBtn.on("mouseup", function (e) { self.close(); From 12776799f2b8af83a9cdc002231dd3c91cf1e097 Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Thu, 10 Oct 2013 19:06:37 +0100 Subject: [PATCH 5/8] Editor now gets focus back when clicking the close button --- src/editor/InlineWidget.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index a407ef6f546..163537738c9 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -46,9 +46,9 @@ define(function (require, exports, module) { .append("
"); // create the close button - var $closeBtn = this.$htmlContent.append("×"); + this.$closeBtn = this.$htmlContent.append("×"); - $closeBtn.on("mouseup", function (e) { + this.$closeBtn.click(function (e) { self.close(); e.stopImmediatePropagation(); }); From 9b10a82ccb867023d8f23ee477da96907b7e4225 Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Thu, 10 Oct 2013 21:12:57 +0100 Subject: [PATCH 6/8] Tidied up the code for easier reading --- src/editor/InlineWidget.js | 6 +++--- src/styles/brackets.less | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index 163537738c9..798bb5f4063 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -43,11 +43,11 @@ define(function (require, exports, module) { this.htmlContent = window.document.createElement("div"); this.$htmlContent = $(this.htmlContent).addClass("inline-widget"); this.$htmlContent.append("
") - .append("
"); + .append("
") + .append("×"); // create the close button - this.$closeBtn = this.$htmlContent.append("×"); - + this.$closeBtn = this.$htmlContent.find('#inline-close'); this.$closeBtn.click(function (e) { self.close(); e.stopImmediatePropagation(); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index f79abe35e40..413e541e529 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -673,12 +673,12 @@ a, img { } } - - #inline-close { position: relative; - right: 20px; + float: left; + left: 15px; top: 10px; + margin-right: 30px; } } From a0f8a309f7a0e4c0c2068349ff0c6d4e2fb2a286 Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Thu, 10 Oct 2013 21:42:21 +0100 Subject: [PATCH 7/8] Identifying button with class instead of an id --- src/editor/InlineWidget.js | 4 ++-- src/styles/brackets.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index 798bb5f4063..95e38e97163 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -44,10 +44,10 @@ define(function (require, exports, module) { this.$htmlContent = $(this.htmlContent).addClass("inline-widget"); this.$htmlContent.append("
") .append("
") - .append("×"); + .append("×"); // create the close button - this.$closeBtn = this.$htmlContent.find('#inline-close'); + this.$closeBtn = this.$htmlContent.find('.close'); this.$closeBtn.click(function (e) { self.close(); e.stopImmediatePropagation(); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 413e541e529..a3e25f5e06e 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -673,7 +673,7 @@ a, img { } } - #inline-close { + .close { position: relative; float: left; left: 15px; From dfa7cb5267426fc4962f33e44fbd3268e0270b94 Mon Sep 17 00:00:00 2001 From: Thomas Erbe Date: Thu, 10 Oct 2013 21:51:41 +0100 Subject: [PATCH 8/8] Code cleanup --- src/editor/InlineWidget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/InlineWidget.js b/src/editor/InlineWidget.js index 95e38e97163..8c9cc9f33eb 100644 --- a/src/editor/InlineWidget.js +++ b/src/editor/InlineWidget.js @@ -47,7 +47,7 @@ define(function (require, exports, module) { .append("×"); // create the close button - this.$closeBtn = this.$htmlContent.find('.close'); + this.$closeBtn = this.$htmlContent.find(".close"); this.$closeBtn.click(function (e) { self.close(); e.stopImmediatePropagation();