Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Show wrap around icon when searching (close #401) #572

Merged
benogle merged 2 commits into from
Dec 3, 2015
Merged

Show wrap around icon when searching (close #401) #572

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
7be0ec6
Show wrap around icon when searching
mrodalgaard Oct 24, 2015
386cbcb
Better wrap icons and relative sizing
mrodalgaard Nov 15, 2015
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
10 changes: 10 additions & 0 deletions lib/find-view.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', =>
Expand Down Expand Up @@ -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: =>
Expand All @@ -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: =>
Expand Down Expand Up @@ -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
14 changes: 14 additions & 0 deletions spec/find-view-spec.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]])
Expand Down
21 changes: 21 additions & 0 deletions styles/find-and-replace.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

@benogle benogle Nov 10, 2015

Choose a reason for hiding this comment

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

Any reason why this is toward the bottom of the window? I'd prefer it in the center of the window.

Copy link
Contributor Author

@mrodalgaard mrodalgaard Nov 15, 2015

Choose a reason for hiding this comment

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

I just prefer it to be closer to the find view and not directly in the users face. Since search results (at least when they are isolated) are often shown in the middle of the editor the icon view would block the user from seeing the actual result when wrapping, and thereby having to wait for the icon view to fade out.

I guess it's a matter of taste :)

Copy link
Contributor

@benogle benogle Nov 23, 2015

Choose a reason for hiding this comment

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

Can we move this to the center of the UI?

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
Expand Down