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

Commit c54b102

Browse files
redmundsredmunds
committed
Merge pull request #1818 from adobe/jasonsanjose/statusbar
Change indent width UI
2 parents 73c850b + 7f10739 commit c54b102

File tree

4 files changed

+92
-38
lines changed

4 files changed

+92
-38
lines changed

‎src/editor/EditorManager.js‎

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ define(function (require, exports, module) {
5050
PerfUtils = require("utils/PerfUtils"),
5151
Editor = require("editor/Editor").Editor,
5252
InlineTextEditor = require("editor/InlineTextEditor").InlineTextEditor,
53+
KeyEvent = require("utils/KeyEvent"),
5354
EditorUtils = require("editor/EditorUtils"),
5455
ViewUtils = require("utils/ViewUtils"),
5556
StatusBar = require("widgets/StatusBar"),
@@ -78,9 +79,8 @@ define(function (require, exports, module) {
7879
$cursorInfo,
7980
$fileInfo,
8081
$indentType,
81-
$indentWidth,
82-
$indentDecrement,
83-
$indentIncrement;
82+
$indentWidthLabel,
83+
$indentWidthInput;
8484

8585
/**
8686
* Adds keyboard command handlers to an Editor instance.
@@ -587,10 +587,17 @@ define(function (require, exports, module) {
587587
var indentWithTabs = Editor.getUseTabChar();
588588
$indentType.text(indentWithTabs ? Strings.STATUSBAR_TAB_SIZE : Strings.STATUSBAR_SPACES);
589589
$indentType.attr("title", indentWithTabs ? Strings.STATUSBAR_INDENT_TOOLTIP_SPACES : Strings.STATUSBAR_INDENT_TOOLTIP_TABS);
590+
$indentWidthLabel.attr("title", indentWithTabs ? Strings.STATUSBAR_INDENT_SIZE_TOOLTIP_TABS : Strings.STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES);
591+
}
592+
593+
function _getIndentSize() {
594+
return Editor.getUseTabChar() ? Editor.getTabSize() : Editor.getIndentUnit();
590595
}
591596

592597
function _updateIndentSize() {
593-
$indentWidth.text(Editor.getUseTabChar() ? Editor.getTabSize() : Editor.getIndentUnit());
598+
var size = _getIndentSize();
599+
$indentWidthLabel.text(size);
600+
$indentWidthInput.val(size);
594601
}
595602

596603
function _toggleIndentType() {
@@ -620,18 +627,31 @@ define(function (require, exports, module) {
620627
$cursorInfo.text(StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, (cursor.line + 1), column + 1));
621628
}
622629

623-
function _changeIndentSize(inc) {
630+
function _changeIndentWidth(value) {
631+
$indentWidthLabel.removeClass("hidden");
632+
$indentWidthInput.addClass("hidden");
633+
634+
// remove all event handlers from the input field
635+
$indentWidthInput.off("blur keyup");
636+
637+
// restore focus to the editor
638+
focusEditor();
639+
640+
if (!value || isNaN(value)) {
641+
return;
642+
}
643+
624644
if (Editor.getUseTabChar()) {
625-
Editor.setTabSize(Math.max(Editor.getTabSize() + inc, 1));
645+
Editor.setTabSize(Math.max(Math.min(value, 10), 1));
626646
} else {
627-
Editor.setIndentUnit(Math.max(Editor.getIndentUnit() + inc, 1));
647+
Editor.setIndentUnit(Math.max(Math.min(value, 10), 1));
628648
}
629649

630650
// update indicator
631651
_updateIndentSize();
632652

633653
// column position may change when tab size changes
634-
_updateCursorInfo(null);
654+
_updateCursorInfo();
635655
}
636656

637657
function _onFocusedEditorChange(event, current, previous) {
@@ -669,14 +689,34 @@ define(function (require, exports, module) {
669689
$cursorInfo = $("#status-cursor");
670690
$fileInfo = $("#status-file");
671691
$indentType = $("#indent-type");
672-
$indentWidth = $("#indent-width");
673-
$indentDecrement = $("#indent-decrement");
674-
$indentIncrement = $("#indent-increment");
692+
$indentWidthLabel = $("#indent-width-label");
693+
$indentWidthInput = $("#indent-width-input");
675694

676695
// indentation event handlers
677696
$indentType.on("click", _toggleIndentType);
678-
$indentDecrement.on("click", function () { _changeIndentSize(-1); });
679-
$indentIncrement.on("click", function () { _changeIndentSize(1); });
697+
$indentWidthLabel
698+
.on("click", function () {
699+
// update the input value before displaying
700+
$indentWidthInput.val(_getIndentSize());
701+
702+
$indentWidthLabel.addClass("hidden");
703+
$indentWidthInput.removeClass("hidden");
704+
$indentWidthInput.focus();
705+
706+
$indentWidthInput
707+
.on("blur", function () {
708+
_changeIndentWidth($indentWidthInput.val());
709+
})
710+
.on("keyup", function (event) {
711+
if (event.keyCode === KeyEvent.DOM_VK_RETURN) {
712+
$indentWidthInput.blur();
713+
} else if (event.keyCode === KeyEvent.DOM_VK_ESCAPE) {
714+
_changeIndentWidth(false);
715+
}
716+
});
717+
});
718+
719+
$indentWidthInput.focus(function () { $indentWidthInput.select(); });
680720

681721
_onFocusedEditorChange(null, getFocusedEditor(), null);
682722
}

‎src/nls/root/strings.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,14 @@ define({
140140
/**
141141
* StatusBar strings
142142
*/
143-
"STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
144-
"STATUSBAR_INDENT_TOOLTIP_SPACES" : "Click to switch indentation to spaces",
145-
"STATUSBAR_INDENT_TOOLTIP_TABS" : "Click to switch indentation to tabs",
146-
"STATUSBAR_SPACES" : "Spaces",
147-
"STATUSBAR_TAB_SIZE" : "Tab Size",
148-
"STATUSBAR_LINE_COUNT" : "{0} Lines",
143+
"STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
144+
"STATUSBAR_INDENT_TOOLTIP_SPACES" : "Click to switch indentation to spaces",
145+
"STATUSBAR_INDENT_TOOLTIP_TABS" : "Click to switch indentation to tabs",
146+
"STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES" : "Click to change number of spaces used when indenting",
147+
"STATUSBAR_INDENT_SIZE_TOOLTIP_TABS" : "Click to change tab character width",
148+
"STATUSBAR_SPACES" : "Spaces",
149+
"STATUSBAR_TAB_SIZE" : "Tab Size",
150+
"STATUSBAR_LINE_COUNT" : "{0} Lines",
149151

150152
/**
151153
* Command Name Constants

‎src/styles/brackets.less‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ body {
7171
}
7272
}
7373

74-
7574
a, img {
7675
-webkit-user-drag: none;
7776
}
@@ -136,36 +135,50 @@ a, img {
136135
font-size: 1.4em;
137136
}
138137

139-
#status-indent div {
138+
#status-indent > * {
140139
display: inline-block;
141140
}
142141

143-
#indent-type, #indent-width, #indent-decrement {
142+
#status-indent > *.hidden {
143+
display: none;
144+
}
145+
146+
#indent-type, #indent-width-label {
144147
margin-right: 2px;
145148
}
146149

147-
#indent-type, #indent-decrement, #indent-increment {
150+
#indent-type, #indent-width-label {
148151
cursor: pointer;
149152
}
150153

151-
#indent-type:hover {
154+
#indent-type:hover, #indent-width-label:hover {
152155
text-decoration: underline;
153156
}
154157

155-
#indent-decrement, #indent-increment {
156-
width: 4px;
157-
height: 8px;
158-
cursor: pointer;
159-
padding-left: 1px;
158+
#indent-width-input {
159+
font-size: 1em;
160+
height: 12px;
161+
line-height: 1;
162+
vertical-align: -2px;
163+
border: 1px solid darken(@background-color-3, @bc-color-step-size / 2);
164+
color: @bc-black;
165+
margin: 0;
166+
padding: 0;
167+
width: 14px;
168+
position: relative;
169+
left: -1px;
170+
top: -2px;
171+
-webkit-border-radius: 0;
160172
}
161-
162-
#indent-decrement {
163-
background: url("images/stepper-arrow-sprites.svg") no-repeat top left;
173+
174+
#indent-width-input:focus {
175+
border: 1px solid rgba(9,64,253,0.84);
176+
outline: none;
164177
}
165178

166-
#indent-increment {
167-
background: url("images/stepper-arrow-sprites.svg") no-repeat top right;
168-
margin-right: 0px;
179+
#indent-width-input::-webkit-inner-spin-button {
180+
-webkit-appearance: none;
181+
margin: 0;
169182
}
170183

171184
#editor-holder {

‎src/widgets/StatusBar.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
<div id="status-mode"></div>
99
<div id="status-indent">
1010
<div id="indent-type"></div>
11-
<div id="indent-width"></div>
12-
<div id="indent-decrement" class="indent-step"></div>
13-
<div id="indent-increment" class="indent-step"></div>
11+
<div id="indent-width-label"></div>
12+
<input id="indent-width-input" type="number" min="1" max="10" maxlength="2" size="2" class="hidden">
1413
</div>
1514
<div id="busy-indicator">&#9719;</div>
1615
</div>

0 commit comments

Comments
 (0)