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

Overwrite mode improvements #6777

Merged
redmunds merged 2 commits into from
Feb 12, 2014
Merged

Overwrite mode improvements #6777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2df3e70
Add Overtype mode improvements
WebsiteDeveloper Dec 27, 2013
280864e
Add newline
WebsiteDeveloper Feb 12, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/editor/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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]);
});
};

/**
Expand Down Expand Up @@ -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.
Expand Down
25 changes: 24 additions & 1 deletion src/editor/EditorStatusBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -46,7 +47,8 @@ define(function (require, exports, module) {
$fileInfo,
$indentType,
$indentWidthLabel,
$indentWidthInput;
$indentWidthInput,
$statusOverwrite;


function _formatCountable(number, singularStr, pluralStr) {
Expand Down Expand Up @@ -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");
Expand All @@ -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();
}
Expand All @@ -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);
Expand Down Expand Up @@ -208,6 +229,8 @@ define(function (require, exports, module) {

$indentWidthInput.focus(function () { $indentWidthInput.select(); });

$statusOverwrite.on("click", _updateEditorOverwriteMode);

_onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
}

Expand Down
2 changes: 2 additions & 0 deletions src/nls/root/strings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
76 changes: 44 additions & 32 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);
Expand All @@ -278,25 +291,25 @@ a, img {
height: 38px;
margin-bottom: 15px;
}

Copy link
Contributor

@redmunds redmunds Feb 12, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do not remove whitespace on empty line that is at current indent level.

Copy link
Contributor Author

@WebsiteDeveloper WebsiteDeveloper Feb 12, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have since removed the extension that removed those whitespaces

#img-data,
#img-path {
text-align: left;
.user-select(text);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;
Copy link
Contributor

@redmunds redmunds Feb 12, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's OK to remove whitespace after text on a line.

}

#img-data::selection,
#img-path::selection {
background: @selection-color-focused;
}

#img {
position: relative;
}

.img-guide,
#img-preview {
cursor: none;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -352,7 +365,7 @@ a, img {
width: 1px;
height: 8px;
}

#horiz-guide,
#vert-guide {
position: absolute;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -780,7 +793,7 @@ a, img {
}
}
}

.shadow {
display: block;
height: 4px;
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -887,7 +900,7 @@ a, img {
padding: 2px 0px 2px 15px;
text-overflow: ellipsis;
white-space: nowrap;

.related-file {
color: @tc-input-placeholder-text;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
6 changes: 6 additions & 0 deletions src/styles/brackets_codemirror_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading