PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Make bottom left menu buttons use RoleButton too

Browse source
This commit is contained in:
David Baker 2017-05-04 15:38:09 +01:00
parent 0998adb366
commit 6a1d0fbab5
1 changed files with 52 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/components/views/elements/RoleButton.js
View file

@ -31,6 +31,13 @@ export default React.createClass({
getDefaultProps: function() {
return {
size: 25,
tooltip: false,
};
},
getInitialState: function() {
return {
showTooltip: false,
};
},
@ -48,10 +55,39 @@ export default React.createClass({
case 'create_room':
action = 'view_create_room';
break;
case 'home_page':
action = 'view_home_page';
break;
case 'settings':
action = 'view_user_settings';
break;
}
if (action) dis.dispatch({action: action});
},
_onMouseEnter: function() {
if (this.props.tooltip) this.setState({showTooltip: true});
},
_onMouseLeave: function() {
this.setState({showTooltip: false});
},
_getLabel() {
switch(this.props.role) {
case 'start_chat':
return 'Start chat';
case 'room_directory':
return 'Room directory';
case 'create_room':
return 'Create new room';
case 'home_page':
return 'Welcome page';
case 'settings':
return 'Settings';
}
},
_getIconPath() {
switch(this.props.role) {
case 'start_chat':
@ -60,15 +96,30 @@ export default React.createClass({
return 'img/icons-directory.svg';
case 'create_room':
return 'img/icons-create-room.svg';
case 'home_page':
return 'img/icons-home.svg';
case 'settings':
return 'img/icons-settings.svg';
}
},
render: function() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
let tooltip;
if (this.state.showTooltip) {
const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this._getLabel()} />;
}
return (
<AccessibleButton className="mx_RoleButton" onClick={ this._onClick }>
<AccessibleButton className="mx_RoleButton"
onClick={this._onClick}
onMouseEnter={this._onMouseEnter}
onMouseLeave={this._onMouseLeave}
>
<TintableSvg src={this._getIconPath()} width={this.props.size} height={this.props.size} />
{tooltip}
</AccessibleButton>
);
}