From 6a1d0fbab54d10d6c06d5172f2e7d4d20e138b0f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 4 May 2017 15:38:09 +0100
Subject: [PATCH] Make bottom left menu buttons use RoleButton too

---
 src/components/views/elements/RoleButton.js | 53 ++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/RoleButton.js b/src/components/views/elements/RoleButton.js
index f20b4c6b88..60f227a067 100644
--- a/src/components/views/elements/RoleButton.js
+++ b/src/components/views/elements/RoleButton.js
@@ -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>
         );
     }