From 7be0ec6face3a9f3d7671bccaba67b55c60b2d97 Mon Sep 17 00:00:00 2001 From: Martin Rodalgaard Date: Sat, 24 Oct 2015 16:21:21 +0200 Subject: [PATCH 1/2] Show wrap around icon when searching --- lib/find-view.coffee | 10 ++++++++++ spec/find-view-spec.coffee | 14 ++++++++++++++ styles/find-and-replace.less | 19 +++++++++++++++++++ 3 files changed, 43 insertions(+) diff --git a/lib/find-view.coffee b/lib/find-view.coffee index fff4b529..f10975ec 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-arrow-up') 0 selectFirstMarkerBeforeCursor: => @@ -378,6 +382,7 @@ class FindView extends View markerEndPosition = marker.bufferMarker.getEndPosition() return index if markerEndPosition.isLessThan(start) + @showWrapIcon('icon-arrow-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..9aad5588 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-arrow-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-arrow-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..4be93bba 100644 --- a/styles/find-and-replace.less +++ b/styles/find-and-replace.less @@ -166,6 +166,25 @@ atom-workspace.find-visible { margin-right: @component-padding; } } + + .wrap-icon { + @wrap-size: 96px; + + 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: 10px; + text-align: center; + pointer-events: none; + &:before { + font-size: @wrap-size; + height: @wrap-size; + width: @wrap-size; + } + } } // Project find and replace From 386cbcb7ccf93fae9d4d25513d5f368baa00a211 Mon Sep 17 00:00:00 2001 From: Martin Rodalgaard Date: Sun, 15 Nov 2015 17:36:55 +0100 Subject: [PATCH 2/2] Better wrap icons and relative sizing --- lib/find-view.coffee | 4 ++-- spec/find-view-spec.coffee | 4 ++-- styles/find-and-replace.less | 8 +++++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/lib/find-view.coffee b/lib/find-view.coffee index f10975ec..01d6b364 100644 --- a/lib/find-view.coffee +++ b/lib/find-view.coffee @@ -363,7 +363,7 @@ class FindView extends View return index if markerStartPosition.isEqual(start) and indexIncluded return index if markerStartPosition.isGreaterThan(start) - @showWrapIcon('icon-arrow-up') + @showWrapIcon('icon-move-up') 0 selectFirstMarkerBeforeCursor: => @@ -382,7 +382,7 @@ class FindView extends View markerEndPosition = marker.bufferMarker.getEndPosition() return index if markerEndPosition.isLessThan(start) - @showWrapIcon('icon-arrow-down') + @showWrapIcon('icon-move-down') @markers.length - 1 selectAllMarkers: => diff --git a/spec/find-view-spec.coffee b/spec/find-view-spec.coffee index 9aad5588..117472b3 100644 --- a/spec/find-view-spec.coffee +++ b/spec/find-view-spec.coffee @@ -581,12 +581,12 @@ describe 'FindView', -> 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-arrow-down' + 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-arrow-up' + 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", -> diff --git a/styles/find-and-replace.less b/styles/find-and-replace.less index 4be93bba..149a2688 100644 --- a/styles/find-and-replace.less +++ b/styles/find-and-replace.less @@ -168,7 +168,7 @@ atom-workspace.find-visible { } .wrap-icon { - @wrap-size: 96px; + @wrap-size: @font-size * 10; display: none; position: absolute; @@ -176,11 +176,13 @@ atom-workspace.find-visible { top: @wrap-size * -1.5; margin-left: @wrap-size * -0.5; background: rgba(136,136,136, 0.2); - border-radius: 10px; + border-radius: @component-border-radius * 5; text-align: center; pointer-events: none; &:before { - font-size: @wrap-size; + // 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; }