Re-add bouncing/callout animation to action buttons

This commit is contained in:
Luke Barnard 2017-05-25 13:54:59 +01:00
parent 548f319816
commit 3185d3ed41
5 changed files with 11 additions and 4 deletions

View file

@ -27,6 +27,7 @@ export default React.createClass({
size: PropTypes.string, size: PropTypes.string,
tooltip: PropTypes.bool, tooltip: PropTypes.bool,
action: PropTypes.string.isRequired, action: PropTypes.string.isRequired,
mouseOverAction: PropTypes.string,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
iconPath: PropTypes.string.isRequired, iconPath: PropTypes.string.isRequired,
}, },
@ -51,6 +52,9 @@ export default React.createClass({
_onMouseEnter: function() { _onMouseEnter: function() {
if (this.props.tooltip) this.setState({showTooltip: true}); if (this.props.tooltip) this.setState({showTooltip: true});
if (this.props.mouseOverAction) {
dis.dispatch({action: this.props.mouseOverAction});
}
}, },
_onMouseLeave: function() { _onMouseLeave: function() {

View file

@ -22,6 +22,7 @@ const CreateRoomButton = function(props) {
const ActionButton = sdk.getComponent('elements.ActionButton'); const ActionButton = sdk.getComponent('elements.ActionButton');
return ( return (
<ActionButton action="view_create_chat" <ActionButton action="view_create_chat"
mouseOverAction={props.callout ? "callout_create_room" : null}
label="Create new room" label="Create new room"
iconPath="img/icons-create-room.svg" iconPath="img/icons-create-room.svg"
size={props.size} size={props.size}

View file

@ -22,6 +22,7 @@ const RoomDirectoryButton = function(props) {
const ActionButton = sdk.getComponent('elements.ActionButton'); const ActionButton = sdk.getComponent('elements.ActionButton');
return ( return (
<ActionButton action="view_room_directory" <ActionButton action="view_room_directory"
mouseOverAction={props.callout ? "callout_room_directory" : null}
label="Room directory" label="Room directory"
iconPath="img/icons-directory.svg" iconPath="img/icons-directory.svg"
size={props.size} size={props.size}

View file

@ -21,7 +21,8 @@ import PropTypes from 'prop-types';
const StartChatButton = function(props) { const StartChatButton = function(props) {
const ActionButton = sdk.getComponent('elements.ActionButton'); const ActionButton = sdk.getComponent('elements.ActionButton');
return ( return (
<ActionButton action="start_chat" <ActionButton action="view_create_chat"
mouseOverAction={props.callout ? "callout_start_chat" : null}
label="Start chat" label="Start chat"
iconPath="img/icons-people.svg" iconPath="img/icons-people.svg"
size={props.size} size={props.size}

View file

@ -526,15 +526,15 @@ module.exports = React.createClass({
case 'im.vector.fake.direct': case 'im.vector.fake.direct':
return <div className="mx_RoomList_emptySubListTip"> return <div className="mx_RoomList_emptySubListTip">
Press Press
<StartChatButton size="16" /> <StartChatButton size="16" callout={true}/>
to start a chat with someone to start a chat with someone
</div>; </div>;
case 'im.vector.fake.recent': case 'im.vector.fake.recent':
return <div className="mx_RoomList_emptySubListTip"> return <div className="mx_RoomList_emptySubListTip">
You're not in any rooms yet! Press You're not in any rooms yet! Press
<CreateRoomButton size="16" /> <CreateRoomButton size="16" callout={true}/>
to make a room or to make a room or
<RoomDirectoryButton size="16" /> <RoomDirectoryButton size="16" callout={true}/>
to browse the directory to browse the directory
</div>; </div>;
} }