add icons for context lines before / after buttons
MODIFY
lib/find-view.js
lib/find-view.js
@@ -138,6 +138,22 @@ class FindView {
<path d="M4,10.5 L4,12.5 L4,13 L5,13 L5,12.5 L5,10.5 L5,10 L4,10 L4,10.5 L4,10.5 Z"></path>
<path d="M15,10.5 L15,12.5 L15,13 L16,13 L16,12.5 L16,10.5 L16,10 L15,10 L15,10.5 L15,10.5 Z"></path>
</symbol>
+
+ <symbol id="find-and-replace-context-lines-before" viewBox="0 0 20 16" stroke="none" fill-rule="evenodd">
+ <rect opacity="0.6" x="3" y="12" width="14" height="2"></rect>
+ <rect x="3" y="3" width="8" height="2"></rect>
+ <rect x="3" y="6" width="8" height="2"></rect>
+ <rect x="3" y="9" width="8" height="2"></rect>
+ <path d="M12,3 L15,3 L15,11 L12,11 L12,10 L14,10 L14,4 L12,4 Z"></path>
+ </svg>
+
+ <symbol id="find-and-replace-context-lines-after" viewBox="0 0 20 16" stroke="none" fill-rule="evenodd">
+ <rect opacity="0.6" x="3" y="3" width="14" height="2"></rect>
+ <rect x="3" y="6" width="8" height="2"></rect>
+ <rect x="3" y="9" width="8" height="2"></rect>
+ <rect x="3" y="12" width="8" height="2"></rect>
+ <path d="M12,6 L15,6 L15,14 L12,14 L12,13 L14,13 L14,7 L12,7 Z"></path>
+ </svg>
`})
)
);

MODIFY
lib/project/results-pane.js
lib/project/results-pane.js
@@ -108,7 +108,14 @@ class ResultsPaneView {
{
ref: 'toggleLeadingContextLines',
className: 'btn'
- }, this.model.getFindOptions().leadingContextLineCount + ' before'),
+ },
+ $.svg(
+ {
+ className: 'icon',
+ innerHTML: '<use xlink:href="#find-and-replace-context-lines-before" />'
+ }
+ )
+ ),
$.button(
{
ref: 'incrementLeadingContextLines',
@@ -127,7 +134,14 @@ class ResultsPaneView {
{
ref: 'toggleTrailingContextLines',
className: 'btn'
- }, this.model.getFindOptions().trailingContextLineCount + ' after'),
+ },
+ $.svg(
+ {
+ className: 'icon',
+ innerHTML: '<use xlink:href="#find-and-replace-context-lines-after" />'
+ }
+ )
+ ),
$.button(
{
ref: 'incrementTrailingContextLines',

MODIFY
styles/find-and-replace.less
styles/find-and-replace.less
@@ -35,6 +35,7 @@ atom-workspace.find-visible {
// Both project and buffer FNR styles
.find-and-replace,
+.preview-pane,
.project-find {
@min-width: 200px; // min width before it starts scrolling

add icons for context lines before / after buttons