Use CSS transition for wrap icon
MODIFY
lib/find-view.js
lib/find-view.js
@@ -719,11 +719,8 @@ class FindView {
}
}
- // FIXME: The wrap icon should probably be its own view responding to events
- // when the search wraps.
createWrapIcon() {
this.wrapIcon = document.createElement('div');
- this.wrapIcon.classList.add('find-wrap-icon');
}
showWrapIcon(icon) {
@@ -733,15 +730,10 @@ class FindView {
let editorView = atom.views.getView(editor);
if (!editorView.parentNode) return;
-
- // Attach to the parent of the active editor, that way we can position it
- // correctly over the active editor.
editorView.parentNode.appendChild(this.wrapIcon);
- // FIXME: This animation should be in CSS
- this.wrapIcon.className = icon;
- this.wrapIcon.style.opacity = 1;
+ this.wrapIcon.className = `find-wrap-icon ${icon} visible`;
clearTimeout(this.wrapTimeout);
- this.wrapTimeout = setTimeout((() => this.wrapIcon.style.opacity = 0), 1000);
+ this.wrapTimeout = setTimeout((() => this.wrapIcon.classList.remove('visible')), 500);
}
};

MODIFY
styles/find-and-replace.less
styles/find-and-replace.less
@@ -168,7 +168,10 @@ atom-workspace.find-visible {
.find-wrap-icon {
@wrap-size: @font-size * 10;
- display: none;
+ opacity: 0;
+ transition: opacity 0.5s;
+ &.visible { opacity: 1; }
+
position: absolute;
// These are getting placed in the DOM as a pane item, so override the pane

Use CSS transition for wrap icon