chore: move line:col status to right to accomedate plugin statusbar tab panels

Author: abose

src/editor/EditorStatusBar.js

@@ -58,6 +58,7 @@ define(function (require, exports, module) {
         encodingSelect, // this is a DropdownButton instance
         tasksSelect, // this is a DropdownButton instance
         $cursorInfo,
+        $statusInfo,
         $fileInfo,
         $indentType,
         $indentAuto,
@@ -106,13 +107,17 @@ define(function (require, exports, module) {
         encodingSelect.$button.text(doc.file._encoding);
     }
 
+    function _getLineCountStr(editor) {
+        const lines = editor.lineCount();
+        return _formatCountable(lines, Strings.STATUSBAR_LINE_COUNT_SINGULAR, Strings.STATUSBAR_LINE_COUNT_PLURAL);
+    }
+
     /**
      * Update file information
      * @param {Editor} editor Current editor
      */
     function _updateFileInfo(editor) {
-        var lines = editor.lineCount();
-        $fileInfo.text(_formatCountable(lines, Strings.STATUSBAR_LINE_COUNT_SINGULAR, Strings.STATUSBAR_LINE_COUNT_PLURAL));
+        $fileInfo.text(_getLineCountStr(editor));
     }
 
     /**
@@ -185,12 +190,15 @@ define(function (require, exports, module) {
         editor = editor || EditorManager.getActiveEditor();
 
         // compute columns, account for tab size
-        var cursor = editor.getCursorPos(true);
+        const cursor = editor.getCursorPos(true);
 
-        var cursorStr = StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, cursor.line + 1, cursor.ch + 1);
+        let cursorStr = StringUtils.format(Strings.STATUSBAR_CURSOR_POSITION, cursor.line + 1, cursor.ch + 1);
+        let cursorStrShort = StringUtils.format(
+            Strings.STATUSBAR_CURSOR_POSITION_SHORT, cursor.line + 1, cursor.ch + 1);
 
-        var sels = editor.getSelections(),
-            selStr = "";
+        let sels = editor.getSelections(),
+            selStr = "",
+            shortSelStr = "";
 
         if (sels.length > 1) {
             //Send analytics data for multicursor use
@@ -200,20 +208,28 @@ define(function (require, exports, module) {
                 "usage"
             );
             selStr = StringUtils.format(Strings.STATUSBAR_SELECTION_MULTIPLE, sels.length);
+            shortSelStr = StringUtils.format(Strings.STATUSBAR_SELECTION_MULTIPLE_SHORT, sels.length);
         } else if (editor.hasSelection()) {
-            var sel = sels[0];
+            const sel = sels[0];
             if (sel.start.line !== sel.end.line) {
-                var lines = sel.end.line - sel.start.line + 1;
+                let lines = sel.end.line - sel.start.line + 1;
                 if (sel.end.ch === 0) {
                     lines--;  // end line is exclusive if ch is 0, inclusive otherwise
                 }
-                selStr = _formatCountable(lines, Strings.STATUSBAR_SELECTION_LINE_SINGULAR, Strings.STATUSBAR_SELECTION_LINE_PLURAL);
+                selStr = _formatCountable(lines, Strings.STATUSBAR_SELECTION_LINE_SINGULAR,
+                    Strings.STATUSBAR_SELECTION_LINE_PLURAL);
+                shortSelStr = StringUtils.format(Strings.STATUSBAR_SELECTION_SHORT, lines);
             } else {
-                var cols = editor.getColOffset(sel.end) - editor.getColOffset(sel.start);  // end ch is exclusive always
-                selStr = _formatCountable(cols, Strings.STATUSBAR_SELECTION_CH_SINGULAR, Strings.STATUSBAR_SELECTION_CH_PLURAL);
+                // end ch is exclusive always
+                const cols = editor.getColOffset(sel.end) - editor.getColOffset(sel.start);
+                selStr = _formatCountable(cols, Strings.STATUSBAR_SELECTION_CH_SINGULAR,
+                    Strings.STATUSBAR_SELECTION_CH_PLURAL);
+                shortSelStr = StringUtils.format(Strings.STATUSBAR_SELECTION_SHORT, cols);
             }
         }
-        $cursorInfo.text(cursorStr + selStr);
+        $cursorInfo.text(cursorStrShort + shortSelStr);
+        $statusInfo.attr("title", cursorStr + selStr + " " + _getLineCountStr(editor)+ "\n" +
+            Strings.STATUSBAR_CURSOR_GOTO);
     }
 
     /**
@@ -392,13 +408,20 @@ define(function (require, exports, module) {
     function _init() {
 
         $cursorInfo         = $("#status-cursor");
+        $statusInfo         = $("#status-info");
         $fileInfo           = $("#status-file");
         $indentType         = $("#indent-type");
         $indentAuto         = $("#indent-auto");
         $indentWidthLabel   = $("#indent-width-label");
         $indentWidthInput   = $("#indent-width-input");
         $statusOverwrite    = $("#status-overwrite");
 
+        $statusInfo.click((event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+            CommandManager.execute(Commands.NAVIGATE_GOTO_LINE);
+        });
+
         languageSelect      = new DropdownButton.DropdownButton("", [], function (item, index) {
             var document = EditorManager.getActiveEditor().document,
                 defaultLang = LanguageManager.getLanguageForPath(document.file.fullPath, true);

src/index.html

@@ -854,10 +854,6 @@
         <!-- View Panes are programatically created here -->
         </div>
         <div id="status-bar" class="statusbar no-focus">
-            <div id="status-info" class="info" >
-                <div id="status-cursor"></div>
-                <div id="status-file"></div>
-            </div>
             <div id="status-indicators" class="indicators">
                 <div id="status-indent">
                     <div id="indent-type"></div>
@@ -868,6 +864,10 @@
                 <div id="status-language"></div>
                 <div id="status-encoding"></div>
                 <div id="status-overwrite"></div>
+                <div id="status-info" class="info" >
+                    <div id="status-cursor"></div>
+                    <div id="status-file"></div>
+                </div>
                 <div id="status-tasks" class="forced-hidden global-indicator">
                     <div class="spinner spin"></div>
                 </div>

src/nls/root/strings.js

@@ -389,11 +389,15 @@ define({
      * StatusBar strings
      */
     "STATUSBAR_CURSOR_POSITION": "Line {0}, Column {1}",
+    "STATUSBAR_CURSOR_POSITION_SHORT": "{0} : {1}",
+    "STATUSBAR_CURSOR_GOTO": "Click to Go To another :Line",
+    "STATUSBAR_SELECTION_SHORT": " \u2014 Sel {0}",
     "STATUSBAR_SELECTION_CH_SINGULAR": " \u2014 Selected {0} column",
     "STATUSBAR_SELECTION_CH_PLURAL": " \u2014 Selected {0} columns",
     "STATUSBAR_SELECTION_LINE_SINGULAR": " \u2014 Selected {0} line",
     "STATUSBAR_SELECTION_LINE_PLURAL": " \u2014 Selected {0} lines",
-    "STATUSBAR_SELECTION_MULTIPLE": " \u2014 {0} selections",
+    "STATUSBAR_SELECTION_MULTIPLE": " \u2014 {0} Multi Cursor selections",
+    "STATUSBAR_SELECTION_MULTIPLE_SHORT": " \u2014 Mul {0}",
     "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",

src/styles/brackets.less

@@ -303,8 +303,6 @@ a, img {
 
 #status-info {
     color: @bc-text;
-    left: 10px;
-    position: absolute;
     white-space: nowrap;
 
     .dark & {