From fea3fed460e7e04f3b3110c2b7286b814c3cd936 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 11 Dec 2015 02:24:58 +0000
Subject: [PATCH] animate the search button whilst searching

---
 src/components/views/rooms/RoomDNDView.js    |  1 -
 src/components/views/rooms/SearchBar.js      | 11 ++++++++---
 src/skins/vector/css/molecules/SearchBar.css | 14 ++++++++++++++
 src/skins/vector/img/search-button.svg       |  9 ++++-----
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/views/rooms/RoomDNDView.js b/src/components/views/rooms/RoomDNDView.js
index 9642c561..9b01629d 100644
--- a/src/components/views/rooms/RoomDNDView.js
+++ b/src/components/views/rooms/RoomDNDView.js
@@ -19,7 +19,6 @@ limitations under the License.
 var React = require('react');
 var DragSource = require('react-dnd').DragSource;
 var DropTarget = require('react-dnd').DropTarget;
-var classNames = require('classnames');
 
 var dis = require("matrix-react-sdk/lib/dispatcher");
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js
index 08cd340c..aaa03ee8 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk');
+var classNames = require('classnames');
 
 module.exports = React.createClass({
     displayName: 'SearchBar',
@@ -48,12 +49,16 @@ module.exports = React.createClass({
     },
     
     render: function() {
+        var searchButtonClasses = classNames({ mx_SearchBar_searchButton : true, mx_SearchBar_searching: this.props.searchInProgress || true });
+        var thisRoomClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'Room' });
+        var allRoomsClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'All' });
+
         return (
             <div className="mx_SearchBar">
                 <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder="Search..." onKeyDown={this.onSearchChange}/>
-                <img className="mx_SearchBar_searchButton" src="img/search-button.svg" width="37" height="37" onClick={this.onSearch}/>
-                <div className={"mx_SearchBar_button" + (this.state.scope !== 'Room' ? " mx_SearchBar_unselected" : "")} onClick={this.onThisRoomClick}>This Room</div>
-                <div className={"mx_SearchBar_button" + (this.state.scope !== 'All' ? " mx_SearchBar_unselected" : "")} onClick={this.onAllRoomsClick}>All Rooms</div>
+                <div className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt="Search"/></div>
+                <div className={ thisRoomClasses } onClick={this.onThisRoomClick}>This Room</div>
+                <div className={ allRoomsClasses } onClick={this.onAllRoomsClick}>All Rooms</div>
                 <img className="mx_SearchBar_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.props.onCancelClick} />
             </div>
         );
diff --git a/src/skins/vector/css/molecules/SearchBar.css b/src/skins/vector/css/molecules/SearchBar.css
index ba1de56c..3698c852 100644
--- a/src/skins/vector/css/molecules/SearchBar.css
+++ b/src/skins/vector/css/molecules/SearchBar.css
@@ -35,7 +35,21 @@ limitations under the License.
 .mx_SearchBar_searchButton {
     cursor: pointer;
     margin-right: 10px;
+    width: 37px;
+    height: 37px;
     border-radius: 0px 3px 3px 0px;
+    background-color: #76CFA6;
+}
+
+@keyframes pulsate {
+    0% { opacity: 1.0; }
+    50% { opacity: 0.25; }
+    100% { opacity: 1.0; }
+}
+
+.mx_SearchBar_searching img {
+    animation: pulsate 0.75s ease-out;
+    animation-iteration-count: infinite; 
 }
 
 .mx_SearchBar_button {
diff --git a/src/skins/vector/img/search-button.svg b/src/skins/vector/img/search-button.svg
index d92d0b8d..f4808842 100644
--- a/src/skins/vector/img/search-button.svg
+++ b/src/skins/vector/img/search-button.svg
@@ -1,14 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="37px" height="37px" viewBox="0 0 37 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="21px" height="19px" viewBox="-8 -8 37 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
     <title>icon_search</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="icon_search" sketch:type="MSLayerGroup">
-            <rect id="Rectangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" x="0" y="0" width="37" height="37"></rect>
-            <path d="M21.328421,19.3333333 L27.5542961,24.7357275 C27.9574623,25.085568 28.0116667,25.70516 27.6700827,26.1261351 L27.6700827,26.1261351 C27.3308636,26.5441955 26.72562,26.5965299 26.3258751,26.2496583 L20.1,20.8472641" id="Rectangle-9" stroke="#FFFFFF" sketch:type="MSShapeGroup"></path>
-            <g id="search" transform="translate(15.617851, 15.853553) rotate(-45.000000) translate(-15.617851, -15.853553) translate(8.117851, 7.853553)" stroke="#FFFFFF" sketch:type="MSShapeGroup">
+        <g id="icon_search" sketch:type="MSLayerGroup" transform="translate(-8.000000, -8.000000)" stroke="#FFFFFF">
+            <path d="M21.328421,19.3333333 L27.5542961,24.7357275 C27.9574623,25.085568 28.0116667,25.70516 27.6700827,26.1261351 L27.6700827,26.1261351 C27.3308636,26.5441955 26.72562,26.5965299 26.3258751,26.2496583 L20.1,20.8472641" id="Rectangle-9" sketch:type="MSShapeGroup"></path>
+            <g id="search" transform="translate(15.617851, 15.853553) rotate(-45.000000) translate(-15.617851, -15.853553) translate(8.117851, 7.853553)" sketch:type="MSShapeGroup">
                 <ellipse id="Search" cx="7.64433504" cy="7.90518519" rx="7.1665641" ry="7.41111111"></ellipse>
             </g>
         </g>