Merge pull request #1717 from jbalsas/statusbar

Statusbar for Brackets

Author: gruehle

src/brackets.js

@@ -90,7 +90,8 @@ define(function (require, exports, module) {
         UpdateNotification      = require("utils/UpdateNotification"),
         UrlParams               = require("utils/UrlParams").UrlParams,
         NativeFileSystem        = require("file/NativeFileSystem").NativeFileSystem,
-        PreferencesManager      = require("preferences/PreferencesManager");
+        PreferencesManager      = require("preferences/PreferencesManager"),
+        StatusBar               = require("widgets/Statusbar");
 
     // Local variables
     var params                  = new UrlParams(),

src/htmlContent/main-view.html

@@ -108,6 +108,18 @@
                 </div>
                 <div class="table-container"></div>
             </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>
         </div>
 
         <!-- Hack to ensure that the code editor's web font is loaded early. -->

src/language/JSLintUtils.js

@@ -44,7 +44,10 @@ define(function (require, exports, module) {
         EditorManager           = require("editor/EditorManager"),
         PreferencesManager      = require("preferences/PreferencesManager"),
         PerfUtils               = require("utils/PerfUtils"),
-        Strings                 = require("strings");
+        Strings                 = require("strings"),
+        StringUtils             = require("utils/StringUtils"),
+        AppInit                 = require("utils/AppInit"),
+        StatusBar               = require("widgets/StatusBar");
 
     /**
      * @private
@@ -136,9 +139,15 @@ define(function (require, exports, module) {
                     .append($errorTable);
                 $lintResults.show();
                 $goldStar.hide();
+                if (JSLINT.errors.length === 1) {
+                    StatusBar.updateIndicator(module.id, true, "jslint-errors", Strings.JSLINT_ERROR_INFORMATION);
+                } else {
+                    StatusBar.updateIndicator(module.id, true, "jslint-errors", StringUtils.format(Strings.JSLINT_ERRORS_INFORMATION, JSLINT.errors.length));
+                }
             } else {
                 $lintResults.hide();
                 $goldStar.show();
+                StatusBar.updateIndicator(module.id, true, "jslint-valid", Strings.JSLINT_NO_ERRORS);
             }
 
             PerfUtils.addMeasurement(perfTimerDOM);
@@ -148,6 +157,7 @@ define(function (require, exports, module) {
             // both the results and the gold star
             $lintResults.hide();
             $goldStar.hide();
+            StatusBar.updateIndicator(module.id, true, "jslint-disabled", Strings.JSLINT_DISABLED);
         }
 
         EditorManager.resizeEditor();
@@ -208,6 +218,12 @@ define(function (require, exports, module) {
     _prefs = PreferencesManager.getPreferenceStorage(module.id, { enabled: !!brackets.config.enable_jslint });
     _setEnabled(_prefs.getValue("enabled"));
 
+    // Init StatusBar indicator
+    AppInit.htmlReady(function () {
+        StatusBar.addIndicator(module.id, $("#gold-star"), false);
+    });
+    
+    
     // Define public API
     exports.run = run;
     exports.getEnabled = getEnabled;

src/nls/root/strings.js

@@ -132,6 +132,13 @@ define({
     "KEYBOARD_CTRL"   : "Ctrl",
     "KEYBOARD_SHIFT"  : "Shift",
     "KEYBOARD_SPACE"  : "Space",
+    
+    /**
+     * StatusBar strings
+     */
+    "STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
+    "STATUSBAR_TAB_SIZE"        : "Tab Size {0}",
+    "STATUSBAR_LINE_COUNT"      : "{0} Lines",
 
     /**
      * Command Name Constants
@@ -209,7 +216,10 @@ define({
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "Experimental Build",
     "JSLINT_ERRORS"                        : "JSLint Errors",
+    "JSLINT_ERROR_INFORMATION"             : "1 JSLint Error",
+    "JSLINT_ERRORS_INFORMATION"            : "{0} JSLint Errors",
     "JSLINT_NO_ERRORS"                     : "No JSLint errors - good job!",
+    "JSLINT_DISABLED"                      : "JSLint disabled or not working for the current file",
     "SEARCH_RESULTS"                       : "Search Results",
     "OK"                                   : "OK",
     "DONT_SAVE"                            : "Don't Save",

src/search/FindInFiles.js

@@ -50,7 +50,8 @@ define(function (require, exports, module) {
         DocumentManager     = require("document/DocumentManager"),
         EditorManager       = require("editor/EditorManager"),
         FileIndexManager    = require("project/FileIndexManager"),
-        KeyEvent            = require("utils/KeyEvent");
+        KeyEvent            = require("utils/KeyEvent"),
+        StatusBar           = require("widgets/StatusBar");
 
 
     var FIND_IN_FILES_MAX = 100;
@@ -297,6 +298,7 @@ define(function (require, exports, module) {
         dialog.showDialog(initialString)
             .done(function (query) {
                 if (query) {
+                    StatusBar.showBusyIndicator(true);
                     var queryExpr = _getQueryRegExp(query);
                     FileIndexManager.getFileInfoList("all")
                         .done(function (fileListResult) {
@@ -325,9 +327,11 @@ define(function (require, exports, module) {
                             })
                                 .done(function () {
                                     _showSearchResults(searchResults, query);
+                                    StatusBar.hideBusyIndicator();
                                 })
                                 .fail(function () {
                                     console.log("find in files failed.");
+                                    StatusBar.hideBusyIndicator();
                                 });
                         });
                 }

src/styles/brackets.less

@@ -94,6 +94,51 @@ a, img {
     z-index: @z-index-brackets-toolbar;
 }
 
+.busyCursor {
+    cursor: wait !important;
+}
+
+.statusbar {
+    height: 19px;
+    overflow: hidden;
+    background-color: lighten(@bc-grey, @bc-color-step-size*4);
+    
+    .info {
+        float: left;
+        margin-left: 8px;
+        margin-top: 3px;
+        
+        span {
+            color: @bc-grey;
+            padding-right: 15px;
+            vertical-align: middle;
+        }
+    }
+    
+    .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;
+        }
+    }
+}
+
+#busy-indicator {
+    color: @bc-grey;
+    font-size: 1.4em;
+    display: inline-block;
+    float: right;
+    margin: 0px 8px 0px 0px;
+}
+
 #editor-holder {
     .vbox;
     .box-flex(1);
@@ -161,10 +206,19 @@ a, img {
     display:none;
 }
 
-#gold-star {
-    display: none;
-    font-size: 1.2em;
-    color: #ffe13b;
+.jslint-disabled {
+    font-size: 1em;
+    color: @bc-grey;
+}
+
+.jslint-errors {
+    font-size: 1em;
+    color: @bc-red;
+}
+
+.jslint-valid {
+    font-size: 1em;
+    color: lighten(@bc-yellow, @bc-color-step-size*2);
 }
 
 #toolbar-go-live {