Added back the Directory listing button, with new tootlip

This commit is contained in:
wmwragg 2016-09-09 12:23:50 +01:00
parent 8376f0d75a
commit 09ce3a79ec
2 changed files with 33 additions and 6 deletions

View File

@ -30,6 +30,7 @@ module.exports = React.createClass({
getInitialState: function() { getInitialState: function() {
return({ return({
directoryHover : false,
roomsHover : false, roomsHover : false,
peopleHover : false, peopleHover : false,
settingsHover : false, settingsHover : false,
@ -37,8 +38,20 @@ module.exports = React.createClass({
}, },
// Room events // Room events
onDirectoryClick: function() {
dis.dispatch({ action: 'view_room_directory' });
},
onDirectoryMouseEnter: function() {
this.setState({ directoryHover: true });
},
onDirectoryMouseLeave: function() {
this.setState({ directoryHover: false });
},
onRoomsClick: function() { onRoomsClick: function() {
dis.dispatch({action: 'view_create_room'}); dis.dispatch({ action: 'view_create_room' });
}, },
onRoomsMouseEnter: function() { onRoomsMouseEnter: function() {
@ -51,7 +64,7 @@ module.exports = React.createClass({
// People events // People events
onPeopleClick: function() { onPeopleClick: function() {
dis.dispatch({action: 'view_create_chat'}); dis.dispatch({ action: 'view_create_chat' });
}, },
onPeopleMouseEnter: function() { onPeopleMouseEnter: function() {
@ -64,7 +77,7 @@ module.exports = React.createClass({
// Settings events // Settings events
onSettingsClick: function() { onSettingsClick: function() {
dis.dispatch({action: 'view_user_settings'}); dis.dispatch({ action: 'view_user_settings' });
}, },
onSettingsMouseEnter: function() { onSettingsMouseEnter: function() {
@ -88,9 +101,13 @@ module.exports = React.createClass({
return ( return (
<div className="mx_BottomLeftMenu"> <div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options"> <div className="mx_BottomLeftMenu_options">
<div 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) }
</div>
<div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } > <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
<TintableSvg src="img/icons-create-room.svg" width="25" height="25" /> <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
{ this.getLabel("Rooms", this.state.roomsHover) } { this.getLabel("Create new room", this.state.roomsHover) }
</div> </div>
<div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } > <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
<TintableSvg src="img/icons-people.svg" width="25" height="25" /> <TintableSvg src="img/icons-people.svg" width="25" height="25" />

View File

@ -53,7 +53,7 @@ limitations under the License.
} }
.mx_LeftPanel.collapsed .mx_BottomLeftMenu { .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
flex: 0 0 120px; flex: 0 0 160px;
} }
.mx_LeftPanel .mx_BottomLeftMenu { .mx_LeftPanel .mx_BottomLeftMenu {
@ -79,6 +79,7 @@ limitations under the License.
pointer-events: none; pointer-events: none;
} }
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_createRoom, .mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_people, .mx_LeftPanel .mx_BottomLeftMenu_people,
.mx_LeftPanel .mx_BottomLeftMenu_settings { .mx_LeftPanel .mx_BottomLeftMenu_settings {
@ -86,6 +87,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.collapsed .mx_BottomLeftMenu_directory,
.collapsed .mx_BottomLeftMenu_createRoom, .collapsed .mx_BottomLeftMenu_createRoom,
.collapsed .mx_BottomLeftMenu_people, .collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings { .collapsed .mx_BottomLeftMenu_settings {
@ -94,8 +96,16 @@ limitations under the License.
padding-bottom: 3px ! important; padding-bottom: 3px ! important;
} }
.mx_LeftPanel .mx_BottomLeftMenu_directory {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_people { .mx_LeftPanel .mx_BottomLeftMenu_people {
margin-left: 10px; margin-right: 10px;
} }
.mx_LeftPanel .mx_BottomLeftMenu_settings { .mx_LeftPanel .mx_BottomLeftMenu_settings {