diff --git a/lib/find-view.coffee b/lib/find-view.coffee index fff4b529..01d6b364 100644 --- a/lib/find-view.coffee +++ b/lib/find-view.coffee @@ -24,6 +24,8 @@ class FindView extends View placeholderText: 'Replace in current buffer' @div tabIndex: -1, class: 'find-and-replace', => + @div outlet: 'wrapIcon', class: 'wrap-icon' + @header class: 'header', => @span outlet: 'descriptionLabel', class: 'header-item description', 'Find in Current Buffer' @span class: 'header-item options-label pull-right', => @@ -360,6 +362,8 @@ class FindView extends View markerStartPosition = marker.bufferMarker.getStartPosition() return index if markerStartPosition.isEqual(start) and indexIncluded return index if markerStartPosition.isGreaterThan(start) + + @showWrapIcon('icon-move-up') 0 selectFirstMarkerBeforeCursor: => @@ -378,6 +382,7 @@ class FindView extends View markerEndPosition = marker.bufferMarker.getEndPosition() return index if markerEndPosition.isLessThan(start) + @showWrapIcon('icon-move-down') @markers.length - 1 selectAllMarkers: => @@ -490,3 +495,8 @@ class FindView extends View title: "Replace Next [when there are results]" @replaceTooltipSubscriptions.add atom.tooltips.add @replaceAllButton, title: "Replace All [when there are results]" + + showWrapIcon: (icon) -> + @wrapIcon.attr('class', "wrap-icon #{icon}").fadeIn() + clearTimeout(@wrapTimeout) + @wrapTimeout = setTimeout (=> @wrapIcon.fadeOut()), 1000 diff --git a/spec/find-view-spec.coffee b/spec/find-view-spec.coffee index ade4e895..117472b3 100644 --- a/spec/find-view-spec.coffee +++ b/spec/find-view-spec.coffee @@ -574,6 +574,20 @@ describe 'FindView', -> editor.setSelectedBufferRange([[2, 34], [2, 39]]) expect(findView.resultCounter.text()).toEqual('3 of 6') + it "shows an icon when search wraps around", -> + atom.commands.dispatch editorView, 'find-and-replace:find-previous' + expect(findView.wrapIcon).not.toBeVisible() + + atom.commands.dispatch editorView, 'find-and-replace:find-previous' + expect(findView.resultCounter.text()).toEqual('6 of 6') + expect(findView.wrapIcon).toBeVisible() + expect(findView.wrapIcon).toHaveClass 'icon-move-down' + + atom.commands.dispatch editorView, 'find-and-replace:find-next' + expect(findView.resultCounter.text()).toEqual('1 of 6') + expect(findView.wrapIcon).toBeVisible() + expect(findView.wrapIcon).toHaveClass 'icon-move-up' + describe "when find-and-replace:use-selection-as-find-pattern is triggered", -> it "places the selected text into the find editor", -> editor.setSelectedBufferRange([[1, 6], [1, 10]]) diff --git a/styles/find-and-replace.less b/styles/find-and-replace.less index 705a522c..149a2688 100644 --- a/styles/find-and-replace.less +++ b/styles/find-and-replace.less @@ -166,6 +166,27 @@ atom-workspace.find-visible { margin-right: @component-padding; } } + + .wrap-icon { + @wrap-size: @font-size * 10; + + display: none; + position: absolute; + left: 50%; + top: @wrap-size * -1.5; + margin-left: @wrap-size * -0.5; + background: rgba(136,136,136, 0.2); + border-radius: @component-border-radius * 5; + text-align: center; + pointer-events: none; + &:before { + // Octicons look best in sizes that are multiples of 16px + font-size: @wrap-size - mod(@wrap-size, 16px) - 16px; + line-height: @wrap-size; + height: @wrap-size; + width: @wrap-size; + } + } } // Project find and replace