From 2bf007495331542c49ff6a9fc98002cee947dac6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 4 May 2017 15:38:53 +0100
Subject: [PATCH] Make bottom left menu buttons use RoleButton too
---
src/components/structures/BottomLeftMenu.js | 122 ++----------------
.../views/elements/_RoleButton.scss | 7 +
.../css/vector-web/structures/_LeftPanel.scss | 34 ++---
3 files changed, 25 insertions(+), 138 deletions(-)
diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index f378cac6..1195a6f3 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -14,13 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+import React from 'react';
+import sdk from 'matrix-react-sdk';
module.exports = React.createClass({
displayName: 'BottomLeftMenu',
@@ -30,121 +25,24 @@ module.exports = React.createClass({
teamToken: React.PropTypes.string,
},
- getInitialState: function() {
- return({
- directoryHover : false,
- roomsHover : false,
- homeHover: false,
- peopleHover : false,
- settingsHover : false,
- });
- },
-
- // Room events
- onDirectoryClick: function() {
- dis.dispatch({ action: 'view_room_directory' });
- },
-
- onDirectoryMouseEnter: function() {
- this.setState({ directoryHover: true });
- },
-
- onDirectoryMouseLeave: function() {
- this.setState({ directoryHover: false });
- },
-
- onRoomsClick: function() {
- dis.dispatch({ action: 'view_create_room' });
- },
-
- onRoomsMouseEnter: function() {
- this.setState({ roomsHover: true });
- },
-
- onRoomsMouseLeave: function() {
- this.setState({ roomsHover: false });
- },
-
- // Home button events
- onHomeClick: function() {
- dis.dispatch({ action: 'view_home_page' });
- },
-
- onHomeMouseEnter: function() {
- this.setState({ homeHover: true });
- },
-
- onHomeMouseLeave: function() {
- this.setState({ homeHover: false });
- },
-
- // People events
- onPeopleClick: function() {
- dis.dispatch({ action: 'view_create_chat' });
- },
-
- onPeopleMouseEnter: function() {
- this.setState({ peopleHover: true });
- },
-
- onPeopleMouseLeave: function() {
- this.setState({ peopleHover: false });
- },
-
- // Settings events
- onSettingsClick: function() {
- dis.dispatch({ action: 'view_user_settings' });
- },
-
- onSettingsMouseEnter: function() {
- this.setState({ settingsHover: true });
- },
-
- onSettingsMouseLeave: function() {
- this.setState({ settingsHover: false });
- },
-
- // Get the label/tooltip to show
- getLabel: function(label, show) {
- if (show) {
- var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
- return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
- }
- },
-
render: function() {
- var TintableSvg = sdk.getComponent('elements.TintableSvg');
+ const RoleButton = sdk.getComponent('elements.RoleButton');
var homeButton;
if (this.props.teamToken) {
- homeButton = (
- <AccessibleButton className="mx_BottomLeftMenu_homePage" onClick={ this.onHomeClick } onMouseEnter={ this.onHomeMouseEnter } onMouseLeave={ this.onHomeMouseLeave } >
- <TintableSvg src="img/icons-home.svg" width="25" height="25" />
- { this.getLabel("Welcome page", this.state.homeHover) }
- </AccessibleButton>
- );
+ homeButton = <RoleButton role='home_page' tooltip={true} />;
}
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
{ homeButton }
- <AccessibleButton className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
- <TintableSvg src="img/icons-people.svg" width="25" height="25" />
- { this.getLabel("Start chat", this.state.peopleHover) }
- </AccessibleButton>
- <AccessibleButton className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
- <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
- { this.getLabel("Room directory", this.state.directoryHover) }
- </AccessibleButton>
- <AccessibleButton className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
- <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
- { this.getLabel("Create new room", this.state.roomsHover) }
- </AccessibleButton>
- <AccessibleButton className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
- <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
- { this.getLabel("Settings", this.state.settingsHover) }
- </AccessibleButton>
+ <RoleButton role='start_chat' tooltip={true} />
+ <RoleButton role='room_directory' tooltip={true} />
+ <RoleButton role='create_room' tooltip={true} />
+ <span className="mx_BottomLeftMenu_settings">
+ <RoleButton role='settings' tooltip={true} />
+ </span>
</div>
</div>
);
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
index 04503346..094e0b9b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
@@ -24,3 +24,10 @@ limitations under the License.
.mx_RoleButton object {
pointer-events: none;
}
+
+.mx_RoleButton_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -25px;
+ left: 6px;
+}
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index d3bbce1b..f171591c 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -64,43 +64,25 @@ limitations under the License.
pointer-events: none;
}
-.mx_LeftPanel .mx_BottomLeftMenu_homePage,
-.mx_LeftPanel .mx_BottomLeftMenu_directory,
-.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
-.mx_LeftPanel .mx_BottomLeftMenu_people,
-.mx_LeftPanel .mx_BottomLeftMenu_settings {
- display: inline-block;
- cursor: pointer;
-}
-
-.collapsed .mx_BottomLeftMenu_homePage,
-.collapsed .mx_BottomLeftMenu_directory,
-.collapsed .mx_BottomLeftMenu_createRoom,
-.collapsed .mx_BottomLeftMenu_people,
-.collapsed .mx_BottomLeftMenu_settings {
+.collapsed .mx_RoleButton {
margin-right: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
-.mx_LeftPanel .mx_BottomLeftMenu_homePage,
-.mx_LeftPanel .mx_BottomLeftMenu_directory,
-.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
-.mx_LeftPanel .mx_BottomLeftMenu_people {
+.mx_BottomLeftMenu_options .mx_RoleButton {
+ margin-left: 0px;
margin-right: 10px;
}
-.mx_LeftPanel .mx_BottomLeftMenu_settings {
+.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
float: right;
}
+.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
+ margin-right: 0px;
+}
+
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
-
-.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
- display: inline-block;
- position: relative;
- top: -25px;
- left: 6px;
-}