From 3185d3ed41d376d52d65583247a08a74a12f1983 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 25 May 2017 13:54:59 +0100
Subject: [PATCH] Re-add bouncing/callout animation to action buttons

---
 src/components/views/elements/ActionButton.js        | 4 ++++
 src/components/views/elements/CreateRoomButton.js    | 1 +
 src/components/views/elements/RoomDirectoryButton.js | 1 +
 src/components/views/elements/StartChatButton.js     | 3 ++-
 src/components/views/rooms/RoomList.js               | 6 +++---
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 267388daf6..08fb6faa1d 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -27,6 +27,7 @@ export default React.createClass({
         size: PropTypes.string,
         tooltip: PropTypes.bool,
         action: PropTypes.string.isRequired,
+        mouseOverAction: PropTypes.string,
         label: PropTypes.string.isRequired,
         iconPath: PropTypes.string.isRequired,
     },
@@ -51,6 +52,9 @@ export default React.createClass({
 
     _onMouseEnter: function() {
         if (this.props.tooltip) this.setState({showTooltip: true});
+        if (this.props.mouseOverAction) {
+            dis.dispatch({action: this.props.mouseOverAction});
+        }
     },
 
     _onMouseLeave: function() {
diff --git a/src/components/views/elements/CreateRoomButton.js b/src/components/views/elements/CreateRoomButton.js
index e7e526d36b..82643559b3 100644
--- a/src/components/views/elements/CreateRoomButton.js
+++ b/src/components/views/elements/CreateRoomButton.js
@@ -22,6 +22,7 @@ const CreateRoomButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_create_chat"
+            mouseOverAction={props.callout ? "callout_create_room" : null}
             label="Create new room"
             iconPath="img/icons-create-room.svg"
             size={props.size}
diff --git a/src/components/views/elements/RoomDirectoryButton.js b/src/components/views/elements/RoomDirectoryButton.js
index 5e68776a15..fc04a666df 100644
--- a/src/components/views/elements/RoomDirectoryButton.js
+++ b/src/components/views/elements/RoomDirectoryButton.js
@@ -22,6 +22,7 @@ const RoomDirectoryButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_room_directory"
+            mouseOverAction={props.callout ? "callout_room_directory" : null}
             label="Room directory"
             iconPath="img/icons-directory.svg"
             size={props.size}
diff --git a/src/components/views/elements/StartChatButton.js b/src/components/views/elements/StartChatButton.js
index 02d5677a7c..c13b51ee67 100644
--- a/src/components/views/elements/StartChatButton.js
+++ b/src/components/views/elements/StartChatButton.js
@@ -21,7 +21,8 @@ import PropTypes from 'prop-types';
 const StartChatButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
-        <ActionButton action="start_chat"
+        <ActionButton action="view_create_chat"
+            mouseOverAction={props.callout ? "callout_start_chat" : null}
             label="Start chat"
             iconPath="img/icons-people.svg"
             size={props.size}
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index cde2bec7da..98a5229d6a 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -526,15 +526,15 @@ module.exports = React.createClass({
                 case 'im.vector.fake.direct':
                     return <div className="mx_RoomList_emptySubListTip">
                         Press
-                        <StartChatButton size="16" />
+                        <StartChatButton size="16" callout={true}/>
                         to start a chat with someone
                     </div>;
                 case 'im.vector.fake.recent':
                     return <div className="mx_RoomList_emptySubListTip">
                         You're not in any rooms yet! Press
-                        <CreateRoomButton size="16" />
+                        <CreateRoomButton size="16" callout={true}/>
                         to make a room or
-                        <RoomDirectoryButton size="16" />
+                        <RoomDirectoryButton size="16" callout={true}/>
                         to browse the directory
                     </div>;
             }