Style search preview according to editor.fontFamily setting
MODIFY
lib/project/result-view.js
lib/project/result-view.js
@@ -9,7 +9,7 @@ class ResultView {
constructor(params) {
const {
filePath, matches, isSelected, selectedMatchIndex, isExpanded,
- regex, replacePattern
+ regex, replacePattern, previewStyle
} = params;
this.filePath = filePath
@@ -19,13 +19,14 @@ class ResultView {
this.selectedMatchIndex = selectedMatchIndex;
this.regex = regex;
this.replacePattern = replacePattern;
+ this.previewStyle = previewStyle;
etch.initialize(this);
}
update(params) {
const {
filePath, matches, isSelected, selectedMatchIndex, isExpanded,
- regex, replacePattern
+ regex, replacePattern, previewStyle
} = params;
const changed =
@@ -34,7 +35,8 @@ class ResultView {
isSelected !== this.isSelected ||
selectedMatchIndex !== this.selectedMatchIndex ||
regex !== this.regex ||
- replacePattern !== this.replacePattern;
+ replacePattern !== this.replacePattern ||
+ previewStyle !== this.previewStyle;
if (changed) {
this.filePath = filePath;
@@ -44,6 +46,7 @@ class ResultView {
this.selectedMatchIndex = selectedMatchIndex;
this.regex = regex;
this.replacePattern = replacePattern;
+ this.previewStyle = previewStyle;
etch.update(this);
}
}
@@ -89,19 +92,21 @@ class ResultView {
)
),
- (this.matches && this.matches.length > 0) ?
$.ul({ref: 'matches', className: 'matches list-tree'},
- ...
+ ...(
+ (this.matches && this.matches.length > 0) ?
this.matches.map((match, i) =>
$(MatchView, {
match,
regex: this.regex,
replacePattern: this.replacePattern,
- isSelected: (i === this.selectedMatchIndex)
+ isSelected: (i === this.selectedMatchIndex),
+ previewStyle: this.previewStyle
})
- )
) :
- $.ul({ref: 'matches', className: 'matches list-tree'}, 'none')
+ ['none']
+ )
+ )
)
);
}

MODIFY
lib/project/results-view.js
lib/project/results-view.js
@@ -27,6 +27,7 @@ class ResultsView {
this.element.addEventListener('resize', () => this.renderResults())
this.subscriptions = new CompositeDisposable(
+ atom.config.observe('editor.fontFamily', this.fontFamilyChanged.bind(this)),
this.model.onDidAddResult(this.addResult.bind(this)),
this.model.onDidRemoveResult(this.removeResult.bind(this)),
this.model.onDidClearSearchState(this.clear.bind(this)),
@@ -84,7 +85,7 @@ class ResultsView {
return $(ResultView, {
filePath, matches, isSelected, isExpanded, selectedMatchIndex,
- regex, replacePattern
+ regex, replacePattern, previewStyle: this.previewStyle
});
})
)
@@ -435,4 +436,9 @@ class ResultsView {
const element = this.selectedElement()
if (element) return this.resultViewsByElement.get(element)
}
+
+ fontFamilyChanged(fontFamily) {
+ this.previewStyle = {fontFamily};
+ etch.update(this);
+ }
};

MODIFY
spec/results-view-spec.js
spec/results-view-spec.js
@@ -712,6 +712,23 @@ describe('ResultsView', () => {
});
});
+ describe("preview font", () => {
+ it('respects the editor.fontFamily setting', async () => {
+ atom.config.set('editor.fontFamily', 'Courier');
+
+ projectFindView.findEditor.setText('items');
+ atom.commands.dispatch(projectFindView.element, 'core:confirm');
+ await searchPromise;
+
+ resultsView = getResultsView();
+ const previewElement = resultsView.element.querySelector('.search-result .preview');
+ expect(previewElement.style.fontFamily).toBe('Courier');
+
+ atom.config.set('editor.fontFamily', 'Helvetica');
+ expect(previewElement.style.fontFamily).toBe('Helvetica');
+ })
+ });
+
describe("icon-service lifecycle", () => {
it('renders file icon classes based on the provided file-icons service', async () => {
const fileIconsDisposable = atom.packages.serviceHub.provide('atom.file-icons', '1.0.0', {
@@ -764,5 +781,4 @@ function buildMouseEvent(type, properties) {
function clickOn(element) {
element.dispatchEvent(buildMouseEvent('mousedown', { detail: 1 }));
- // element.dispatchEvent(buildMouseEvent('click', { detail: 1 }));
}

Style search preview according to editor.fontFamily setting