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

Commit

Permalink
Merge pull request #1766 from adobe/jasonsanjose/statusbar
Browse files Browse the repository at this point in the history 
Implement statusbar UI and indentation controls
  • Loading branch information
@redmunds
redmunds committed Oct 4, 2012
2 parents d2cbe88 + 31b2d38 commit f1147ac
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 136 deletions.
104 changes: 101 additions & 3 deletions src/editor/EditorManager.js
View file
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
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>
</div>
</div>

Expand Down
9 changes: 6 additions & 3 deletions src/nls/root/strings.js
View file
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
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;
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit f1147ac

Please sign in to comment.