add button to toggle visibility of context lines
MODIFY
lib/project/match-view.js
lib/project/match-view.js
@@ -5,24 +5,26 @@ const $ = etch.dom;
module.exports =
class MatchView {
- constructor({match, regex, replacePattern, isSelected, previewStyle, top}) {
+ constructor({match, regex, replacePattern, isSelected, previewStyle, top, showContextLines}) {
this.match = match;
this.regex = regex;
this.replacePattern = replacePattern;
this.previewStyle = previewStyle;
this.isSelected = isSelected;
this.top = top;
+ this.showContextLines = showContextLines;
etch.initialize(this);
}
- update({match, regex, replacePattern, previewStyle, isSelected, top}) {
+ update({match, regex, replacePattern, previewStyle, isSelected, top, showContextLines}) {
const changed =
match !== this.match ||
regex !== this.regex ||
replacePattern !== this.replacePattern ||
previewStyle !== this.previewStyle ||
isSelected !== this.isSelected ||
- top !== this.top;
+ top !== this.top ||
+ showContextLines !== this.showContextLines;
if (changed) {
this.match = match;
@@ -31,6 +33,7 @@ class MatchView {
this.previewStyle = previewStyle;
this.isSelected = isSelected;
this.top = top;
+ this.showContextLines = showContextLines;
etch.update(this);
}
}
@@ -65,7 +68,7 @@ class MatchView {
},
$.ul({className: 'list-tree'},
- leadingContextLines ? leadingContextLines.map((line, index) =>
+ leadingContextLines && this.showContextLines ? leadingContextLines.map((line, index) =>
$.li({className: 'list-item'},
$.span({className: 'line-number text-subtle'}, range.start.row + 1 - leadingContextLines.length + index),
$.span({className: 'preview'}, $.span({}, line.trimLeft()))
@@ -89,7 +92,7 @@ class MatchView {
)
),
- trailingContextLines ? trailingContextLines.map((line, index) =>
+ trailingContextLines && this.showContextLines ? trailingContextLines.map((line, index) =>
$.li({className: 'list-item'},
$.span({className: 'line-number text-subtle'}, range.end.row + 1 + index + 1),
$.span({className: 'preview'}, $.span({}, line.trimLeft()))

MODIFY
lib/project/result-view.js
lib/project/result-view.js
@@ -9,7 +9,8 @@ class ResultView {
constructor({item, top, bottom} = {}) {
const {
filePath, matches, isSelected, selectedMatchIndex, isExpanded, regex,
- replacePattern, previewStyle, pathDetailsHeight, matchHeight, contextLineHeight
+ replacePattern, previewStyle, pathDetailsHeight, matchHeight, contextLineHeight,
+ showContextLines
} = item;
this.top = top;
@@ -17,6 +18,7 @@ class ResultView {
this.pathDetailsHeight = pathDetailsHeight;
this.matchHeight = matchHeight;
this.contextLineHeight = contextLineHeight;
+ this.showContextLines = showContextLines;
this.filePath = filePath
this.matches = matches
@@ -32,7 +34,8 @@ class ResultView {
update({item, top, bottom} = {}) {
const {
filePath, matches, isSelected, selectedMatchIndex, isExpanded, regex,
- replacePattern, previewStyle, pathDetailsHeight, matchHeight, contextLineHeight
+ replacePattern, previewStyle, pathDetailsHeight, matchHeight, contextLineHeight,
+ showContextLines
} = item;
const changed =
@@ -47,6 +50,7 @@ class ResultView {
bottom !== this.bottom ||
pathDetailsHeight !== this.pathDetailsHeight ||
contextLineHeight !== this.contextLineHeight ||
+ showContextLines !== this.showContextLines ||
matchHeight !== this.matchHeight;
if (changed) {
@@ -63,6 +67,7 @@ class ResultView {
this.pathDetailsHeight = pathDetailsHeight;
this.matchHeight = matchHeight;
this.contextLineHeight = contextLineHeight;
+ this.showContextLines = showContextLines;
etch.update(this);
}
}
@@ -129,8 +134,8 @@ class ResultView {
for (; i < this.matches.length; i++) {
const match = this.matches[i];
let itemBottomPosition = itemTopPosition + this.matchHeight;
- if (match.leadingContextLines) itemBottomPosition += match.leadingContextLines.length * this.contextLineHeight;
- if (match.trailingContextLines) itemBottomPosition += match.trailingContextLines.length * this.contextLineHeight;
+ if (match.leadingContextLines && this.showContextLines) itemBottomPosition += match.leadingContextLines.length * this.contextLineHeight;
+ if (match.trailingContextLines && this.showContextLines) itemBottomPosition += match.trailingContextLines.length * this.contextLineHeight;
if (itemBottomPosition > top) break;
itemTopPosition = itemBottomPosition;
@@ -139,8 +144,8 @@ class ResultView {
for (; i < this.matches.length; i++) {
const match = this.matches[i];
let itemBottomPosition = itemTopPosition + this.matchHeight;
- if (match.leadingContextLines) itemBottomPosition += match.leadingContextLines.length * this.contextLineHeight;
- if (match.trailingContextLines) itemBottomPosition += match.trailingContextLines.length * this.contextLineHeight;
+ if (match.leadingContextLines && this.showContextLines) itemBottomPosition += match.leadingContextLines.length * this.contextLineHeight;
+ if (match.trailingContextLines && this.showContextLines) itemBottomPosition += match.trailingContextLines.length * this.contextLineHeight;
children.push(
etch.dom(MatchView, {
@@ -150,7 +155,8 @@ class ResultView {
replacePattern: this.replacePattern,
isSelected: (i === this.selectedMatchIndex),
previewStyle: this.previewStyle,
- top: itemTopPosition
+ top: itemTopPosition,
+ showContextLines: this.showContextLines
})
);

MODIFY
lib/project/results-pane.js
lib/project/results-pane.js
@@ -28,6 +28,9 @@ class ResultsPaneView {
case this.refs.expandAll:
this.expandAllResults();
break;
+ case this.refs.toggleContext:
+ this.toggleContextLines();
+ break;
}
})
@@ -51,6 +54,10 @@ class ResultsPaneView {
render() {
const matchCount = this.searchResults && this.searchResults.matchCount;
+ const leadingContextLineCount = atom.config.get('find-and-replace.searchContextLineCountBefore');
+ const trailingContextLineCount = atom.config.get('find-and-replace.searchContextLineCountAfter');
+ const hasContext = leadingContextLineCount > 0 || trailingContextLineCount > 0;
+
return (
$.div(
{
@@ -76,7 +83,8 @@ class ResultsPaneView {
$.div({className: 'btn-group'},
$.button({ref: 'collapseAll', className: 'btn'}, 'Collapse All'),
- $.button({ref: 'expandAll', className: 'btn'}, 'Expand All')
+ $.button({ref: 'expandAll', className: 'btn'}, 'Expand All'),
+ hasContext ? $.button({ref: 'toggleContext', className: 'btn'}, 'Context Lines') : null
)
),
@@ -207,6 +215,16 @@ class ResultsPaneView {
this.refs.resultsView.expandAllResults();
this.refs.resultsView.element.focus();
}
+
+ toggleContextLines() {
+ this.refs.resultsView.toggleContextLines();
+ if (this.refs.resultsView.showContextLines) {
+ this.refs.toggleContext.classList.add('selected');
+ } else {
+ this.refs.toggleContext.classList.remove('selected');
+ }
+ this.refs.resultsView.element.focus();
+ }
}
module.exports.URI = "atom://find-and-replace/project-results";

MODIFY
lib/project/results-view.js
lib/project/results-view.js
@@ -20,6 +20,7 @@ class ResultsView {
this.selectedResultIndex = 0;
this.selectedMatchIndex = -1;
this.collapsedResultIndices = [];
+ this.showContextLines = true;
this.heightForSearchResult = this.heightForSearchResult.bind(this);
this.resolveHeightInvalidationPromise = null
@@ -125,7 +126,8 @@ class ResultsView {
previewStyle: this.previewStyle,
pathDetailsHeight: this.pathDetailsHeight,
matchHeight: this.matchHeight,
- contextLineHeight: this.contextLineHeight
+ contextLineHeight: this.contextLineHeight,
+ showContextLines: this.showContextLines
}, this.model.results[filePath]);
}),
})
@@ -138,8 +140,8 @@ class ResultsView {
for (let i = 0, n = searchResult.matches.length; i < n; i++) {
const match = searchResult.matches[i];
result += this.matchHeight;
- if (match.leadingContextLines) result += this.contextLineHeight * match.leadingContextLines.length;
- if (match.trailingContextLines) result += this.contextLineHeight * match.trailingContextLines.length;
+ if (match.leadingContextLines && this.showContextLines) result += this.contextLineHeight * match.leadingContextLines.length;
+ if (match.trailingContextLines && this.showContextLines) result += this.contextLineHeight * match.trailingContextLines.length;
}
}
return result;
@@ -440,6 +442,11 @@ class ResultsView {
etch.update(this);
}
+ toggleContextLines() {
+ this.showContextLines = !this.showContextLines;
+ return etch.update(this);
+ }
+
scrollToSelectedMatch() {
if (this.refs.listView) {
const top = this.positionOfSelectedResult();

add button to toggle visibility of context lines