Separate classes for the different buttons

Also rename RoleButton to ActionButton because it's not being
given a Role any more.

Conflicts:
	src/component-index.js

cherry-picking commit 4a5821e.

src/components/views/elements/ActionButton.js

@@ -24,8 +24,11 @@ export default React.createClass({
     displayName: 'RoleButton',
 
     propTypes: {
-        role: PropTypes.string.isRequired,
         size: PropTypes.string,
+        tooltip: PropTypes.bool,
+        action: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        iconPath: PropTypes.string.isRequired,
     },
 
     getDefaultProps: function() {
@@ -43,26 +46,7 @@ export default React.createClass({
 
     _onClick: function(ev) {
         ev.stopPropagation();
-
-        let action;
-        switch(this.props.role) {
-            case 'start_chat':
-                action = 'view_create_chat';
-                break;
-            case 'room_directory':
-                action = 'view_room_directory';
-                break;
-            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});
+        dis.dispatch({action: this.props.action});
     },
 
     _onMouseEnter: function() {
@@ -73,43 +57,13 @@ export default React.createClass({
         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':
-                return 'img/icons-people.svg';
-            case 'room_directory':
-                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()} />;
+            tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
         }
 
         return (
@@ -118,7 +72,7 @@ export default React.createClass({
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}
             >
-                <TintableSvg src={this._getIconPath()} width={this.props.size} height={this.props.size} />
+                <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
                 {tooltip}
             </AccessibleButton>
         );

src/components/views/elements/CreateRoomButton.js

@@ -0,0 +1,37 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const CreateRoomButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_create_chat"
+            label="Create new room"
+            iconPath="img/icons-create-room.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+CreateRoomButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default CreateRoomButton;

src/components/views/elements/HomeButton.js

@@ -0,0 +1,37 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const HomeButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_home_page"
+            label="Welcome page"
+            iconPath="img/icons-home.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+HomeButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default HomeButton;

src/components/views/elements/RoomDirectoryButton.js

@@ -0,0 +1,37 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const RoomDirectoryButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_room_directory"
+            label="Room directory"
+            iconPath="img/icons-directory.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+RoomDirectoryButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default RoomDirectoryButton;

src/components/views/elements/SettingsButton.js

@@ -0,0 +1,37 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const SettingsButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_user_settings"
+            label="Settings"
+            iconPath="img/icons-settings.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+SettingsButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default SettingsButton;

src/components/views/elements/StartChatButton.js

@@ -0,0 +1,37 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const StartChatButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="start_chat"
+            label="Start chat"
+            iconPath="img/icons-people.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+StartChatButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default StartChatButton;

src/components/views/rooms/RoomList.js

@@ -517,22 +517,24 @@ module.exports = React.createClass({
             return <RoomDropTarget label="" />;
         }
 
-        const RoleButton = sdk.getComponent('elements.RoleButton');
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
         if (this.state.totalRoomCount === 0) {
             const TintableSvg = sdk.getComponent('elements.TintableSvg');
             switch (section) {
                 case 'im.vector.fake.direct':
                     return <div className="mx_RoomList_emptySubListTip">
                         Press
-                        <RoleButton role='start_chat' size="16" />
+                        <StartChatButton size="16" />
                         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
-                        <RoleButton role='create_room' size="16" />
+                        <CreateRoomButton size="16" />
                         to make a room or
-                        <RoleButton role='room_directory' size="16" />
+                        <RoomDirectoryButton size="16" />
                         to browse the directory
                     </div>;
             }
@@ -544,16 +546,18 @@ module.exports = React.createClass({
     },
 
     _getHeaderItems: function(section) {
-        const RoleButton = sdk.getComponent('elements.RoleButton');
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
         switch (section) {
             case 'im.vector.fake.direct':
                 return <span className="mx_RoomList_headerButtons">
-                    <RoleButton role='start_chat' size="16" />
+                    <StartChatButton role='start_chat' size="16" />
                 </span>;
             case 'im.vector.fake.recent':
                 return <span className="mx_RoomList_headerButtons">
-                    <RoleButton role='room_directory' size="16" />
-                    <RoleButton role='create_room' size="16" />
+                    <RoomDirectoryButton role='room_directory' size="16" />
+                    <CreateRoomButton role='create_room' size="16" />
                 </span>;
         }
     },