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

Change indent width UI #1818

Merged
redmunds merged 4 commits into from
Oct 12, 2012
Merged

Change indent width UI #1818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5494e2
change indent width UI
jasonsanjose Oct 11, 2012
a464e44
fix indentation in brackets.less
jasonsanjose Oct 11, 2012
d0f214f
add tooltip to indent width
jasonsanjose Oct 11, 2012
7f10739
code review comments
jasonsanjose Oct 12, 2012
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
66 changes: 53 additions & 13 deletions src/editor/EditorManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand Down
14 changes: 8 additions & 6 deletions src/nls/root/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
45 changes: 29 additions & 16 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ body {
}
}


a, img {
-webkit-user-drag: none;
}
Expand Down Expand Up @@ -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 {
Expand Down
5 changes: 2 additions & 3 deletions src/widgets/StatusBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@
<div id="status-mode"></div>
<div id="status-indent">
<div id="indent-type"></div>
<div id="indent-width"></div>
<div id="indent-decrement" class="indent-step"></div>
<div id="indent-increment" class="indent-step"></div>
<div id="indent-width-label"></div>
<input id="indent-width-input" type="number" min="1" max="10" maxlength="2" size="2" class="hidden">
</div>
<div id="busy-indicator">&#9719;</div>
</div>
Expand Down