mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-12 05:00:31 +03:00
Re-add bouncing/callout animation to action buttons
This commit is contained in:
parent
548f319816
commit
3185d3ed41
5 changed files with 11 additions and 4 deletions
|
@ -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() {
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue