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

Implement statusbar UI and indentation controls #1766

Merged
merged 7 commits into from
Oct 4, 2012
Merged

Implement statusbar UI and indentation controls #1766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
691ed98
Refactor StatusBar. Implement Garth's UI
jasonsanjose Oct 4, 2012
f7581c2
Implement statusbar indentation controls
jasonsanjose Oct 4, 2012
9480d70
fix styles on statusbar indent, add tooltip
jasonsanjose Oct 4, 2012
75e4e90
fix indent size impl
jasonsanjose Oct 4, 2012
c5f005e
UI review comments
jasonsanjose Oct 4, 2012
6a9046b
Merge remote-tracking branch 'origin/master' into jasonsanjose/statusbar
jasonsanjose Oct 4, 2012
31b2d38
use tabSize instead of indentUnit
jasonsanjose Oct 4, 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
104 changes: 101 additions & 3 deletions src/editor/EditorManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ define(function (require, exports, module) {
"use strict";

// Load dependent modules
var FileUtils = require("file/FileUtils"),
var AppInit = require("utils/AppInit"),
FileUtils = require("file/FileUtils"),
Commands = require("command/Commands"),
CommandManager = require("command/CommandManager"),
DocumentManager = require("document/DocumentManager"),
Expand All @@ -51,7 +52,9 @@ define(function (require, exports, module) {
InlineTextEditor = require("editor/InlineTextEditor").InlineTextEditor,
EditorUtils = require("editor/EditorUtils"),
ViewUtils = require("utils/ViewUtils"),
Strings = require("strings");
StatusBar = require("widgets/StatusBar"),
Strings = require("strings"),
StringUtils = require("utils/StringUtils");

/** @type {jQueryObject} DOM node that contains all editors (visible and hidden alike) */
var _editorHolder = null;
Expand All @@ -70,6 +73,14 @@ define(function (require, exports, module) {
*/
var _inlineEditProviders = [];

/* StatusBar indicators */
var $modeInfo,
$cursorInfo,
$fileInfo,
$indentType,
$indentWidth,
$indentDecrement,
$indentIncrement;

/**
* Adds keyboard command handlers to an Editor instance.
Expand Down Expand Up @@ -400,7 +411,6 @@ define(function (require, exports, module) {
if (_currentEditor) {
_destroyEditorIfUnneeded(_currentEditorsDocument);
_doFocusedEditorChanged(null, _currentEditor);

_currentEditorsDocument = null;

$("#not-editor").css("display", "");
Expand Down Expand Up @@ -569,7 +579,75 @@ define(function (require, exports, module) {

return result.promise();
}

function _updateModeInfo(editor) {
$modeInfo.text(editor.getModeForSelection());
}

function _updateFileInfo(editor) {
$fileInfo.text(StringUtils.format(Strings.STATUSBAR_LINE_COUNT, editor.lineCount()));
}

function _updateIndentInfo(editor) {
var indentWithTabs = editor._codeMirror.getOption("indentWithTabs");
$indentType.text(indentWithTabs ? Strings.STATUSBAR_TAB_SIZE : Strings.STATUSBAR_SPACES);
$indentType.attr("title", indentWithTabs ? Strings.STATUSBAR_INDENT_TOOLTIP_SPACES : Strings.STATUSBAR_INDENT_TOOLTIP_TABS);

$indentWidth.text(editor._codeMirror.getOption("tabSize"));
}

function _toggleIndentType() {
var editor = getFocusedEditor(),
indentWithTabs = editor._codeMirror.getOption("indentWithTabs");

editor._codeMirror.setOption("indentWithTabs", !indentWithTabs);

_updateIndentInfo(editor);
}

function _updateIndentSize(inc) {
var editor = getFocusedEditor(),
size = editor._codeMirror.getOption("tabSize");

editor._codeMirror.setOption("tabSize", size + inc);

_updateIndentInfo(editor);
}

function _updateCursorInfo(event, editor) {
var cursor = editor.getCursorPos(),
cursorInfo = StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, (cursor.line + 1), (cursor.ch + 1));

$cursorInfo.text(cursorInfo);
}

function _onFocusedEditorChange(event, current, previous) {
if (previous) {
$(previous).off("cursorActivity", _updateCursorInfo);
}

if (!current) {
StatusBar.hide();
resizeEditor();
} else {
// Check if the statusbar is not visible to show it
StatusBar.show();
resizeEditor();

$(current).on("cursorActivity", _updateCursorInfo);
$(current).on("change", function () {
// async update to keep typing speed smooth
window.setTimeout(function () { _updateFileInfo(current); }, 0);
});

_updateCursorInfo(null, current);
_updateModeInfo(current);
_updateFileInfo(current);
_updateIndentInfo(current);
}
}

// Initialize: command handlers
CommandManager.register(Strings.CMD_TOGGLE_QUICK_EDIT, Commands.TOGGLE_QUICK_EDIT, _toggleQuickEdit);

// Initialize: register listeners
Expand All @@ -581,6 +659,26 @@ define(function (require, exports, module) {
// refresh on resize.
window.addEventListener("resize", _updateEditorSize, true);

// Initialize: status bar focused listener
$(exports).on("focusedEditorChange", _onFocusedEditorChange);
AppInit.htmlReady(function () {
$modeInfo = $("#status-mode");
$cursorInfo = $("#status-cursor");
$fileInfo = $("#status-file");
$indentType = $("#indent-type");
$indentWidth = $("#indent-width");
$indentDecrement = $("#indent-decrement");
$indentIncrement = $("#indent-increment");

// indentation event handlers
$indentType.on("click", _toggleIndentType);
$indentDecrement.on("click", function () { _updateIndentSize(-1); });
$indentIncrement.on("click", function () { _updateIndentSize(1); });

StatusBar.hide();
_onFocusedEditorChange(null, getFocusedEditor(), null);
});

// For unit tests and internal use only
exports._openInlineWidget = _openInlineWidget;
exports._doFocusedEditorChanged = _doFocusedEditorChanged;
Expand Down
28 changes: 15 additions & 13 deletions src/htmlContent/main-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,6 @@
<span class="experimental-label">{{EXPERIMENTAL_BUILD}}</span>

<a href="#" id="toolbar-go-live"></a> <!-- tooltip for this is set in JS -->

<span id="gold-star" title="{{JSLINT_NO_ERRORS}}">
&#9733;
</span>
</div>

<!-- Filename label -->
Expand Down Expand Up @@ -110,15 +106,21 @@
</div>

<div id="status-bar" class="statusbar">
<ul id="status-info" class="info" >
<span id="status-cursor"></span>
<span id="status-file"></span>
<span id="status-mode"></span>
<span id="status-tab"></span>
</ul>
<div id="busy-indicator">&#9719;</div>
<ul id="status-indicators" class="indicators">
</ul>
<div id="status-info" class="info" >
<div id="status-cursor"></div>
</div>
<div id="status-indicators" class="indicators">
<div id="gold-star" title="{{JSLINT_NO_ERRORS}}">&#9733;</div>
<div id="status-file"></div>
<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>
<div id="busy-indicator">&#9719;</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

It bugs me that all of the info in the status bar is flowed into a line of text because every time and data changes, all info to the right (or left depending on which side) of whatever changed shifts a few pixels left or right. I would like to see the text layout using fixed width blocks so nothing ever ever shifts.

We could also try using Source Code Pro (monospace) font, but we'd have to pad leading spaces (i.e. so "1", "10", "100" all use same horizontal space).

Copy link
Member Author

Choose a reason for hiding this comment

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

Filed #1772

</div>
</div>

Expand Down
9 changes: 6 additions & 3 deletions src/nls/root/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,12 @@ define({
/**
* StatusBar strings
*/
"STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
"STATUSBAR_TAB_SIZE" : "Tab Size {0}",
"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_SPACES" : "Spaces",
"STATUSBAR_TAB_SIZE" : "Tab Size",
"STATUSBAR_LINE_COUNT" : "{0} Lines",

/**
* Command Name Constants
Expand Down
85 changes: 56 additions & 29 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,45 +98,72 @@ a, img {
cursor: wait !important;
}

.statusbar {
height: 19px;
#status-bar {
background-color: @background-color-3;
border-top: 1px solid darken(@background-color-3, @bc-color-step-size / 2);
box-sizing: border-box;
color: @bc-grey;
font-family: @fontstack-sans-serif;
font-size: 0.9em;
Copy link
Contributor

Choose a reason for hiding this comment

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

What do you think about making text a px or 2 smaller? Seems a bit too big to me.

Copy link
Member Author

Choose a reason for hiding this comment

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

I like it at the current size. It's the same size that Sublime uses except they have an text shadow 1px top.

Copy link
Contributor

Choose a reason for hiding this comment

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

Is Sublime's statusbar the same height as ours? Text just seems a little tight.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, same height.

line-height: 1;

height: 20px;
overflow: hidden;
background-color: lighten(@bc-grey, @bc-color-step-size*4);
padding: 3px 20px 3px 10px;
}

.info {
float: left;
margin-left: 8px;
margin-top: 3px;

span {
color: @bc-grey;
padding-right: 15px;
vertical-align: middle;
}
#status-info {
float: left;

div {
display: inline;
padding-right: 20px;
}
}

.indicators {
overflow: hidden;
display: block;
float:right;
position: absolute;
right: 24px;
margin: 1px 0px 1px 0px;

.indicator {
margin-right: 2px;
margin-left: 2px;
color: @bc-grey;
}
#status-indicators {
float: right;

&>div {
display: inline;
padding-left: 20px;
}
}

#busy-indicator {
color: @bc-grey;
font-size: 1.4em;
}

#status-indent div {
display: inline-block;
float: right;
margin: 0px 8px 0px 0px;
}

#indent-type, #indent-width, #indent-decrement {
margin-right: 2px;
}

#indent-type, #indent-decrement, #indent-increment {
cursor: pointer;
}

#indent-type:hover {
text-decoration: underline;
}

#indent-decrement, #indent-increment {
width: 4px;
height: 8px;
cursor: pointer;
padding-left: 1px;
}

#indent-decrement {
background: url("images/stepper-arrow-sprites.svg") no-repeat top left;
}

#indent-increment {
background: url("images/stepper-arrow-sprites.svg") no-repeat top right;
margin-right: 0px;
}

#editor-holder {
Expand Down
4 changes: 4 additions & 0 deletions src/styles/images/stepper-arrow-sprites.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading