diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 4dab5062..b8ee15cd 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -17,31 +17,69 @@ 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'); module.exports = React.createClass({ displayName: 'BottomLeftMenu', + propTypes: { + collapsed: React.PropTypes.bool.isRequired, + }, + + getInitialState: function() { + return({ + roomsHover : false, + peopleHover : false, + settingsHover : false, + }); + }, + + // Room events + onRoomsClick: function() { + dis.dispatch({action: 'view_create_room'}); + }, + + onRoomsMouseEnter: function() { + this.setState({ roomsHover: true }); + }, + + onRoomsMouseLeave: function() { + this.setState({ roomsHover: false }); + }, + + // People events + onPeopleClick: function() { + dis.dispatch({action: 'view_one_to_one_chat'}); + }, + + onPeopleMouseEnter: function() { + this.setState({ peopleHover: true }); + }, + + onPeopleMouseLeave: function() { + this.setState({ peopleHover: false }); + }, + + // Settings events onSettingsClick: function() { dis.dispatch({action: 'view_user_settings'}); }, - onOneToOneChatClick: function() { - dis.dispatch({action: 'view_one_to_one_chat'}); + onSettingsMouseEnter: function() { + this.setState({ settingsHover: true }); }, - onCreateRoomClick: function() { - dis.dispatch({action: 'view_create_room'}); + onSettingsMouseLeave: function() { + this.setState({ settingsHover: false }); }, - getLabel: function(name) { - if (!this.props.collapsed) { - return
{name}
- } - else if (this.state.hover) { + // Get the label/tooltip to show + getLabel: function(label, parent, show) { + if (true) { var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); - return ; + return ; } }, @@ -50,14 +88,17 @@ module.exports = React.createClass({ return (
-
- +
this._rooms = ref} > + + { this.getLabel("Rooms", this._rooms, this.state.roomsHover) }
-
- +
this._people = ref} > + + { this.getLabel("New direct message", this._people, this.state.peopleHover) }
-
- +
this._settings = ref} > + + { this.getLabel("Settings", this._settings, this.state.settingsHover) }
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index 8de89d64..bd98ac08 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -17,7 +17,7 @@ limitations under the License. .mx_RoomTooltip_chevron { position: absolute; left: -9px; - top: 7px; + top: 4px; pointer-events: none; } @@ -25,12 +25,13 @@ limitations under the License. display: none; position: fixed; border: 1px solid #a4a4a4; - border-radius: 8px; + border-radius: 5px; background-color: #fff; z-index: 2000; - padding: 6px; + padding: 5px; pointer-events: none; - line-height: 18px; + line-height: 14px; + font-size: 13px; } mx_RoomToolTip_placeholder {