Separate classes for the different buttons

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

src/component-index.js

@@ -103,10 +103,14 @@ import views$dialogs$UnknownDeviceDialog from './components/views/dialogs/Unknow
 views$dialogs$UnknownDeviceDialog && (module.exports.components['views.dialogs.UnknownDeviceDialog'] = views$dialogs$UnknownDeviceDialog);
 import views$elements$AccessibleButton from './components/views/elements/AccessibleButton';
 views$elements$AccessibleButton && (module.exports.components['views.elements.AccessibleButton'] = views$elements$AccessibleButton);
+import views$elements$ActionButton from './components/views/elements/ActionButton';
+views$elements$ActionButton && (module.exports.components['views.elements.ActionButton'] = views$elements$ActionButton);
 import views$elements$AddressSelector from './components/views/elements/AddressSelector';
 views$elements$AddressSelector && (module.exports.components['views.elements.AddressSelector'] = views$elements$AddressSelector);
 import views$elements$AddressTile from './components/views/elements/AddressTile';
 views$elements$AddressTile && (module.exports.components['views.elements.AddressTile'] = views$elements$AddressTile);
+import views$elements$CreateRoomButton from './components/views/elements/CreateRoomButton';
+views$elements$CreateRoomButton && (module.exports.components['views.elements.CreateRoomButton'] = views$elements$CreateRoomButton);
 import views$elements$DeviceVerifyButtons from './components/views/elements/DeviceVerifyButtons';
 views$elements$DeviceVerifyButtons && (module.exports.components['views.elements.DeviceVerifyButtons'] = views$elements$DeviceVerifyButtons);
 import views$elements$DirectorySearchBox from './components/views/elements/DirectorySearchBox';
@@ -119,14 +123,20 @@ import views$elements$EditableTextContainer from './components/views/elements/Ed
 views$elements$EditableTextContainer && (module.exports.components['views.elements.EditableTextContainer'] = views$elements$EditableTextContainer);
 import views$elements$EmojiText from './components/views/elements/EmojiText';
 views$elements$EmojiText && (module.exports.components['views.elements.EmojiText'] = views$elements$EmojiText);
+import views$elements$HomeButton from './components/views/elements/HomeButton';
+views$elements$HomeButton && (module.exports.components['views.elements.HomeButton'] = views$elements$HomeButton);
 import views$elements$MemberEventListSummary from './components/views/elements/MemberEventListSummary';
 views$elements$MemberEventListSummary && (module.exports.components['views.elements.MemberEventListSummary'] = views$elements$MemberEventListSummary);
 import views$elements$PowerSelector from './components/views/elements/PowerSelector';
 views$elements$PowerSelector && (module.exports.components['views.elements.PowerSelector'] = views$elements$PowerSelector);
 import views$elements$ProgressBar from './components/views/elements/ProgressBar';
 views$elements$ProgressBar && (module.exports.components['views.elements.ProgressBar'] = views$elements$ProgressBar);
-import views$elements$RoleButton from './components/views/elements/RoleButton';
-views$elements$RoleButton && (module.exports.components['views.elements.RoleButton'] = views$elements$RoleButton);
+import views$elements$RoomDirectoryButton from './components/views/elements/RoomDirectoryButton';
+views$elements$RoomDirectoryButton && (module.exports.components['views.elements.RoomDirectoryButton'] = views$elements$RoomDirectoryButton);
+import views$elements$SettingsButton from './components/views/elements/SettingsButton';
+views$elements$SettingsButton && (module.exports.components['views.elements.SettingsButton'] = views$elements$SettingsButton);
+import views$elements$StartChatButton from './components/views/elements/StartChatButton';
+views$elements$StartChatButton && (module.exports.components['views.elements.StartChatButton'] = views$elements$StartChatButton);
 import views$elements$TintableSvg from './components/views/elements/TintableSvg';
 views$elements$TintableSvg && (module.exports.components['views.elements.TintableSvg'] = views$elements$TintableSvg);
 import views$elements$TruncatedList from './components/views/elements/TruncatedList';

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

@@ -584,22 +584,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>;
             }
@@ -611,16 +613,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>;
         }
     },