fix styles on statusbar indent, add tooltip

adobe · Oct 4, 2012 · 9480d70 · 9480d70
1 parent f7581c2
commit 9480d70
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 38 deletions.
diff --git a/src/editor/EditorManager.js b/src/editor/EditorManager.js
@@ -76,7 +76,8 @@ define(function (require, exports, module) {
     var $modeInfo,
         $cursorInfo,
         $fileInfo,
-        $indentInfo,
+        $indentType,
+        $indentWidth,
         $indentDecrement,
         $indentIncrement;
 
@@ -554,11 +555,10 @@ define(function (require, exports, module) {
     }
 
     function _updateIndentInfo(editor) {
-        $indentInfo.text(StringUtils.format(
-            Strings.STATUSBAR_INDENT,
-            editor._codeMirror.getOption("indentWithTabs") ? Strings.STATUSBAR_TAB_SIZE : Strings.STATUSBAR_SPACES,
-            editor._codeMirror.getOption("tabSize")
-        ));
+        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() {
@@ -625,12 +625,13 @@ define(function (require, exports, module) {
         $modeInfo           = $("#status-mode");
         $cursorInfo         = $("#status-cursor");
         $fileInfo           = $("#status-file");
-        $indentInfo         = $("#tab-width-label");
-        $indentDecrement    = $("#status-indent .decrement");
-        $indentIncrement    = $("#status-indent .increment");
+        $indentType         = $("#indent-type");
+        $indentWidth        = $("#indent-width");
+        $indentDecrement    = $("#indent-decrement");
+        $indentIncrement    = $("#indent-increment");
 
         // indentation event handlers
-        $indentInfo.on("click", _toggleIndentType);
+        $indentType.on("click", _toggleIndentType);
         $indentDecrement.on("click", function () { _updateIndentSize(-1); });
         $indentIncrement.on("click", function () { _updateIndentSize(1); });
 

diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
@@ -114,9 +114,10 @@
                     <div id="status-file"></div>
                     <div id="status-mode"></div>
                     <div id="status-indent">
-                        <label id="tab-width-label">4</label>
-                        <div class="decrement"></div>
-                        <div class="increment"></div>
+                        <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>

diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -139,11 +139,12 @@ define({
     /**
      * StatusBar strings
      */
-    "STATUSBAR_CURSOR_POSITION" : "Line {0}, Column {1}",
-    "STATUSBAR_INDENT"          : "{0} {1}",
-    "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 to spaces",
+    "STATUSBAR_INDENT_TOOLTIP_TABS"     : "Click to switch to tabs",
+    "STATUSBAR_SPACES"                  : "Spaces",
+    "STATUSBAR_TAB_SIZE"                : "Tab Size",
+    "STATUSBAR_LINE_COUNT"              : "{0} Lines",
 
     /**
      * Command Name Constants

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -134,36 +134,35 @@ a, img {
     font-size: 1.4em;
 }
 
-#tab-width-label {
-    /* override default label styles */
-    color: @bc-grey;
-    float: none;
-    font-size: 1em;
-    line-height: 1;
-    padding: 0;
-    width: auto;
+#status-indent div {
+    display: inline-block;
+}
+
+#indent-type, #indent-width, #indent-decrement {
+    margin-right: 2px;
+}
+
+#indent-type, #indent-decrement, #indent-increment {
     cursor: pointer;
 }
 
-#tab-width-label:hover {
+#indent-type:hover {
     text-decoration: underline;
 }
 
-#status-indent div {
-    display: inline-block;
+#indent-decrement, #indent-increment {
     width: 4px;
     height: 8px;
-    padding: 0;
     cursor: pointer;
+}
 
-    &.decrement {
-        background: url("images/stepper-arrow-sprites.svg") no-repeat top left;
-        margin-right: 2px;
-    }
-
-    &.increment {
-        background: url("images/stepper-arrow-sprites.svg") no-repeat top right;
-    }
+#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 {