diff --git a/src/editor/EditorManager.js b/src/editor/EditorManager.js
index bf628a09d42..9b8e8f6055c 100644
--- a/src/editor/EditorManager.js
+++ b/src/editor/EditorManager.js
@@ -50,6 +50,7 @@ define(function (require, exports, module) {
PerfUtils = require("utils/PerfUtils"),
Editor = require("editor/Editor").Editor,
InlineTextEditor = require("editor/InlineTextEditor").InlineTextEditor,
+ KeyEvent = require("utils/KeyEvent"),
EditorUtils = require("editor/EditorUtils"),
ViewUtils = require("utils/ViewUtils"),
StatusBar = require("widgets/StatusBar"),
@@ -78,9 +79,8 @@ define(function (require, exports, module) {
$cursorInfo,
$fileInfo,
$indentType,
- $indentWidth,
- $indentDecrement,
- $indentIncrement;
+ $indentWidthLabel,
+ $indentWidthInput;
/**
* Adds keyboard command handlers to an Editor instance.
@@ -587,10 +587,17 @@ define(function (require, exports, module) {
var indentWithTabs = Editor.getUseTabChar();
$indentType.text(indentWithTabs ? Strings.STATUSBAR_TAB_SIZE : Strings.STATUSBAR_SPACES);
$indentType.attr("title", indentWithTabs ? Strings.STATUSBAR_INDENT_TOOLTIP_SPACES : Strings.STATUSBAR_INDENT_TOOLTIP_TABS);
+ $indentWidthLabel.attr("title", indentWithTabs ? Strings.STATUSBAR_INDENT_SIZE_TOOLTIP_TABS : Strings.STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES);
+ }
+
+ function _getIndentSize() {
+ return Editor.getUseTabChar() ? Editor.getTabSize() : Editor.getIndentUnit();
}
function _updateIndentSize() {
- $indentWidth.text(Editor.getUseTabChar() ? Editor.getTabSize() : Editor.getIndentUnit());
+ var size = _getIndentSize();
+ $indentWidthLabel.text(size);
+ $indentWidthInput.val(size);
}
function _toggleIndentType() {
@@ -620,18 +627,31 @@ define(function (require, exports, module) {
$cursorInfo.text(StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, (cursor.line + 1), column + 1));
}
- function _changeIndentSize(inc) {
+ function _changeIndentWidth(value) {
+ $indentWidthLabel.removeClass("hidden");
+ $indentWidthInput.addClass("hidden");
+
+ // remove all event handlers from the input field
+ $indentWidthInput.off("blur keyup");
+
+ // restore focus to the editor
+ focusEditor();
+
+ if (!value || isNaN(value)) {
+ return;
+ }
+
if (Editor.getUseTabChar()) {
- Editor.setTabSize(Math.max(Editor.getTabSize() + inc, 1));
+ Editor.setTabSize(Math.max(Math.min(value, 10), 1));
} else {
- Editor.setIndentUnit(Math.max(Editor.getIndentUnit() + inc, 1));
+ Editor.setIndentUnit(Math.max(Math.min(value, 10), 1));
}
// update indicator
_updateIndentSize();
// column position may change when tab size changes
- _updateCursorInfo(null);
+ _updateCursorInfo();
}
function _onFocusedEditorChange(event, current, previous) {
@@ -669,14 +689,34 @@ define(function (require, exports, module) {
$cursorInfo = $("#status-cursor");
$fileInfo = $("#status-file");
$indentType = $("#indent-type");
- $indentWidth = $("#indent-width");
- $indentDecrement = $("#indent-decrement");
- $indentIncrement = $("#indent-increment");
+ $indentWidthLabel = $("#indent-width-label");
+ $indentWidthInput = $("#indent-width-input");
// indentation event handlers
$indentType.on("click", _toggleIndentType);
- $indentDecrement.on("click", function () { _changeIndentSize(-1); });
- $indentIncrement.on("click", function () { _changeIndentSize(1); });
+ $indentWidthLabel
+ .on("click", function () {
+ // update the input value before displaying
+ $indentWidthInput.val(_getIndentSize());
+
+ $indentWidthLabel.addClass("hidden");
+ $indentWidthInput.removeClass("hidden");
+ $indentWidthInput.focus();
+
+ $indentWidthInput
+ .on("blur", function () {
+ _changeIndentWidth($indentWidthInput.val());
+ })
+ .on("keyup", function (event) {
+ if (event.keyCode === KeyEvent.DOM_VK_RETURN) {
+ $indentWidthInput.blur();
+ } else if (event.keyCode === KeyEvent.DOM_VK_ESCAPE) {
+ _changeIndentWidth(false);
+ }
+ });
+ });
+
+ $indentWidthInput.focus(function () { $indentWidthInput.select(); });
_onFocusedEditorChange(null, getFocusedEditor(), null);
}
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 547aeb94f8e..fa21e6e67b7 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -140,12 +140,14 @@ define({
/**
* StatusBar strings
*/
- "STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
- "STATUSBAR_INDENT_TOOLTIP_SPACES" : "Click to switch indentation to spaces",
- "STATUSBAR_INDENT_TOOLTIP_TABS" : "Click to switch indentation to tabs",
- "STATUSBAR_SPACES" : "Spaces",
- "STATUSBAR_TAB_SIZE" : "Tab Size",
- "STATUSBAR_LINE_COUNT" : "{0} Lines",
+ "STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
+ "STATUSBAR_INDENT_TOOLTIP_SPACES" : "Click to switch indentation to spaces",
+ "STATUSBAR_INDENT_TOOLTIP_TABS" : "Click to switch indentation to tabs",
+ "STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES" : "Click to change number of spaces used when indenting",
+ "STATUSBAR_INDENT_SIZE_TOOLTIP_TABS" : "Click to change tab character width",
+ "STATUSBAR_SPACES" : "Spaces",
+ "STATUSBAR_TAB_SIZE" : "Tab Size",
+ "STATUSBAR_LINE_COUNT" : "{0} Lines",
/**
* Command Name Constants
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 65f1ef1e09c..43d67484ccf 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -71,7 +71,6 @@ body {
}
}
-
a, img {
-webkit-user-drag: none;
}
@@ -136,36 +135,50 @@ a, img {
font-size: 1.4em;
}
-#status-indent div {
+#status-indent > * {
display: inline-block;
}
-#indent-type, #indent-width, #indent-decrement {
+#status-indent > *.hidden {
+ display: none;
+}
+
+#indent-type, #indent-width-label {
margin-right: 2px;
}
-#indent-type, #indent-decrement, #indent-increment {
+#indent-type, #indent-width-label {
cursor: pointer;
}
-#indent-type:hover {
+#indent-type:hover, #indent-width-label:hover {
text-decoration: underline;
}
-#indent-decrement, #indent-increment {
- width: 4px;
- height: 8px;
- cursor: pointer;
- padding-left: 1px;
+#indent-width-input {
+ font-size: 1em;
+ height: 12px;
+ line-height: 1;
+ vertical-align: -2px;
+ border: 1px solid darken(@background-color-3, @bc-color-step-size / 2);
+ color: @bc-black;
+ margin: 0;
+ padding: 0;
+ width: 14px;
+ position: relative;
+ left: -1px;
+ top: -2px;
+ -webkit-border-radius: 0;
}
-
-#indent-decrement {
- background: url("images/stepper-arrow-sprites.svg") no-repeat top left;
+
+#indent-width-input:focus {
+ border: 1px solid rgba(9,64,253,0.84);
+ outline: none;
}
-#indent-increment {
- background: url("images/stepper-arrow-sprites.svg") no-repeat top right;
- margin-right: 0px;
+#indent-width-input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
}
#editor-holder {
diff --git a/src/widgets/StatusBar.html b/src/widgets/StatusBar.html
index 71c90b228b8..2c8c7998973 100644
--- a/src/widgets/StatusBar.html
+++ b/src/widgets/StatusBar.html
@@ -8,9 +8,8 @@
◷