Re-add bouncing/callout animation to action buttons

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() {

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}

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}

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}

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>;
             }