Merge pull request #6777 from WebsiteDeveloper/overwrite

Overwrite mode improvements

Author: redmunds

src/editor/Editor.js

@@ -400,7 +400,8 @@ define(function (require, exports, module) {
                 whenOpening: true,
                 whenClosing: true,
                 indentTags: []
-            }
+            },
+            cursorScrollMargin: 3
         });
 
         // Can't get CodeMirror's focused state without searching for
@@ -710,6 +711,9 @@ define(function (require, exports, module) {
         this._codeMirror.on("update", function (instance) {
             $(self).triggerHandler("update", [self]);
         });
+        this._codeMirror.on("overwriteToggle", function (instance, newstate) {
+            $(self).triggerHandler("overwriteToggle", [self, newstate]);
+        });
     };
 
     /**
@@ -920,6 +924,15 @@ define(function (require, exports, module) {
         }
     };
 
+    /**
+     * Sets the editors overwrite mode state. If null is passed, the state is toggled.
+     *
+     * @param {?boolean} start
+     */
+    Editor.prototype.toggleOverwrite = function (state) {
+        this._codeMirror.toggleOverwrite(state);
+    };
+
     /**
      * Selects word that the given pos lies within or adjacent to. If pos isn't touching a word
      * (e.g. within a token like "//"), moves the cursor to pos without selecting a range.

src/editor/EditorStatusBar.js

@@ -33,6 +33,7 @@ define(function (require, exports, module) {
 
     // Load dependent modules
     var AppInit             = require("utils/AppInit"),
+        AnimationUtils      = require("utils/AnimationUtils"),
         EditorManager       = require("editor/EditorManager"),
         Editor              = require("editor/Editor").Editor,
         KeyEvent            = require("utils/KeyEvent"),
@@ -46,7 +47,8 @@ define(function (require, exports, module) {
         $fileInfo,
         $indentType,
         $indentWidthLabel,
-        $indentWidthInput;
+        $indentWidthInput,
+        $statusOverwrite;
 
 
     function _formatCountable(number, singularStr, pluralStr) {
@@ -141,6 +143,22 @@ define(function (require, exports, module) {
         _updateCursorInfo();
     }
 
+    function _updateOverwriteLabel(event, editor, newstate) {
+        $statusOverwrite.text(newstate ? Strings.STATUSBAR_OVERWRITE : Strings.STATUSBAR_INSERT);
+        
+        AnimationUtils.animateUsingClass($statusOverwrite[0], "flash");
+    }
+    
+    function _updateEditorOverwriteMode() {
+        var editor = EditorManager.getActiveEditor();
+        
+        editor.toggleOverwrite(null);
+    }
+    
+    function _initOverwriteMode(currentEditor) {
+        currentEditor.toggleOverwrite($statusOverwrite.text() === Strings.STATUSBAR_OVERWRITE);
+    }
+    
     function _onActiveEditorChange(event, current, previous) {
         if (previous) {
             $(previous).off(".statusbar");
@@ -162,13 +180,15 @@ define(function (require, exports, module) {
                 // async update to keep typing speed smooth
                 window.setTimeout(function () { _updateFileInfo(current); }, 0);
             });
+            $(current).on("overwriteToggle.statusbar", _updateOverwriteLabel);
 
             current.document.addRef();
             $(current.document).on("languageChanged.statusbar", function () { _updateLanguageInfo(current); });
 
             _updateCursorInfo(null, current);
             _updateLanguageInfo(current);
             _updateFileInfo(current);
+            _initOverwriteMode(current);
             _updateIndentType();
             _updateIndentSize();
         }
@@ -181,6 +201,7 @@ define(function (require, exports, module) {
         $indentType         = $("#indent-type");
         $indentWidthLabel   = $("#indent-width-label");
         $indentWidthInput   = $("#indent-width-input");
+        $statusOverwrite    = $("#status-overwrite");
 
         // indentation event handlers
         $indentType.on("click", _toggleIndentType);
@@ -208,6 +229,8 @@ define(function (require, exports, module) {
 
         $indentWidthInput.focus(function () { $indentWidthInput.select(); });
 
+        $statusOverwrite.on("click", _updateEditorOverwriteMode);
+        
         _onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
     }
 

src/nls/root/strings.js

@@ -198,6 +198,8 @@ define({
     "STATUSBAR_LINE_COUNT_SINGULAR"         : "\u2014 {0} Line",
     "STATUSBAR_LINE_COUNT_PLURAL"           : "\u2014 {0} Lines",
     "STATUSBAR_USER_EXTENSIONS_DISABLED"    : "Extensions Disabled",
+    "STATUSBAR_INSERT"                      : "INS",
+    "STATUSBAR_OVERWRITE"                   : "OVR",
 
     // CodeInspection: errors/warnings
     "ERRORS_PANEL_TITLE_MULTIPLE"           : "{0} Problems",

src/styles/brackets.less

@@ -224,6 +224,19 @@ a, img {
     margin: 0;
 }
 
+#status-overwrite {
+    transition: background-color 3s;
+    background-color: rgba(120, 178, 242, 0);
+    color: rgb(69, 69, 69);
+    cursor: pointer;
+}
+
+#status-overwrite.flash {
+    transition: background-color 1s;
+    background-color: rgb(120, 178, 242);
+}
+
+
 #editor-holder {
     position: relative;
 
@@ -257,15 +270,15 @@ a, img {
             font-weight: @font-weight-semibold;
         }
     }
-    
+
     #image-holder:before {
         content: '';
         display: inline-block;
         height: 100%;
         margin-right: -0.25em; /* Adjusts for spacing */
         vertical-align: middle;
     }
-    
+
     #img-preview {
         background: url(images/preview_bg.png);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
@@ -278,25 +291,25 @@ a, img {
         height: 38px;
         margin-bottom: 15px;
     }
-    
+
     #img-data,
     #img-path {
         text-align: left;
         .user-select(text);
         white-space: nowrap;
         text-overflow: ellipsis;
-        overflow: hidden;        
+        overflow: hidden;
     }
-    
+
     #img-data::selection,
     #img-path::selection {
         background: @selection-color-focused;
     }
-    
+
     #img {
         position: relative;
     }
-    
+
     .img-guide,
     #img-preview {
         cursor: none;
@@ -314,7 +327,7 @@ a, img {
         border-radius: 3px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
     }
-    
+
     #img-tip {
         display: block;
         position: absolute;
@@ -329,16 +342,16 @@ a, img {
         border-radius: 3px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
     }
-    
+
     #x-value,
     #y-value {
         text-align: right;
     }
-    
+
     .tip-container {
         border: 0;
     }
-    
+
     #horiz-guide {
         background-image: url("images/horizontal-dash.svg");
         background-repeat: repeat-x;
@@ -352,7 +365,7 @@ a, img {
         width: 1px;
         height: 8px;
     }
-    
+
     #horiz-guide,
     #vert-guide {
         position: absolute;
@@ -736,7 +749,7 @@ a, img {
     background-color: @tc-lighter-gray;
     min-width: 250px;
     cursor: default;
-    
+
     &.animating {
         // Make the animation use the GPU--especially important for retina.
         -webkit-transform: translateZ(0);
@@ -780,7 +793,7 @@ a, img {
             }
         }
     }
-    
+
     .shadow {
         display: block;
         height: 4px;
@@ -830,7 +843,7 @@ a, img {
     max-width: 50%;
     overflow: hidden;
     background: @inline-background-color-2;
-    
+
     // Without this, the "New Rule" button shows on top of the rule list if you resize
     // the window narrow enough. No idea why, since there's no z-index on the button, and
     // the other items in the header go behind the rule list.
@@ -887,7 +900,7 @@ a, img {
             padding: 2px 0px 2px 15px;
             text-overflow: ellipsis;
             white-space: nowrap;
-            
+
             .related-file {
                 color: @tc-input-placeholder-text;
             }
@@ -1018,20 +1031,20 @@ a, img {
         // Separator line between us and the HTML menu/titlebar above
         border-top: 1px solid darken(@background-color-3, @bc-color-step-size);
     }
-    
+
     &.popout {
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
     }
-    
+
     &.offscreen {
         -webkit-transform: translate(0, -44px);
         transform: translate(0, -44px);
         transition: -webkit-transform 266ms cubic-bezier(0, 0.56, 0, 1);
         transition: transform 266ms cubic-bezier(0, 0.56, 0, 1);
-    
+
         body:not(.has-appshell-menus) & {
             top: 37px;
         }
@@ -1049,29 +1062,29 @@ a, img {
             box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(255, 0, 120, 0.5);
         }
     }
-    
+
     #find-what, #replace-with {
         width: 295px;
     }
 
     .search-input-container {
         position: relative;
         display: inline;
-        
+
         .error {  // "popup" that hangs below search field
             position: absolute;
             left: 5px;
             top: 24px;
             min-width: 291px + 2px;  // to align with search field above it
-            
+
             background-color: #f74687;
             color: @bc-white;
             font-size: 12px;
             padding: 3px 8px;
             border-radius: 0 0 3px 3px;
             box-shadow: @tc-small-shadow-bottom;
         }
-        
+
         #find-what {
             padding-right: 62px;  // room for #find-counter overlay
             width: 295px - (62px - 6px);  // maintain width, accounting for differing padding
@@ -1084,16 +1097,16 @@ a, img {
             font-size: 12px;
         }
     }
-    
+
     #find-group, #replace-group {
         display: inline-block;
         white-space: nowrap;
     }
-    
+
     .message, .no-results-message {
         display: inline-block;
     }
-    
+
     #find-case-sensitive, #find-regexp {
         padding: 1px 5px;
     }
@@ -1125,7 +1138,7 @@ a, img {
         border-bottom-right-radius: 0;
         margin-left: 5px;
     }
-    
+
     // Make button pairs snug
     #find-prev, #replace-yes, #find-case-sensitive {
         border-right: none;
@@ -1136,7 +1149,7 @@ a, img {
         border-bottom-left-radius: 0;
         margin-left: 0;
     }
-    
+
     // Make find field snug with options buttons
     //    & replace snug with replace commands
     #find-what, #replace-with {
@@ -1191,11 +1204,10 @@ a, img {
     width: 12px;
     z-index: @z-index-cm-max;
     pointer-events: none;
-    
+
     .tickmark {
         position: absolute;
         width: 12px;
-        
         height: 1px;
         background-color: #eddd23;
         border-top: 1px solid #e0d123;
@@ -1250,11 +1262,11 @@ a, img {
         list-style: none;
         cursor: default;
         padding: 6px 10px;
-        
+
         &:nth-child(odd) {
             background-color: @tc-lighter-gray;
         }
-        
+
         &:hover {
             background-color: @tc-hover-highlight;
         }

src/styles/brackets_codemirror_override.less

@@ -177,6 +177,12 @@
     other than a vanilla .CodeMirror)
  */
 .CodeMirror {
+    div.CodeMirror-cursor.CodeMirror-overwrite {
+        border-left: none !important;
+        border-bottom: 1px solid black !important;
+        width: 1.2ex;
+    }
+    
     .CodeMirror {
         background: transparent;
     }