forked from matrix/element-web
Restyled tooltip to better match the design
This commit is contained in:
parent
80e6cd6d7c
commit
ab9f48cd47
|
@ -17,31 +17,69 @@ limitations under the License.
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
|
var ReactDOM = require('react-dom');
|
||||||
var sdk = require('matrix-react-sdk')
|
var sdk = require('matrix-react-sdk')
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'BottomLeftMenu',
|
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() {
|
onSettingsClick: function() {
|
||||||
dis.dispatch({action: 'view_user_settings'});
|
dis.dispatch({action: 'view_user_settings'});
|
||||||
},
|
},
|
||||||
|
|
||||||
onOneToOneChatClick: function() {
|
onSettingsMouseEnter: function() {
|
||||||
dis.dispatch({action: 'view_one_to_one_chat'});
|
this.setState({ settingsHover: true });
|
||||||
},
|
},
|
||||||
|
|
||||||
onCreateRoomClick: function() {
|
onSettingsMouseLeave: function() {
|
||||||
dis.dispatch({action: 'view_create_room'});
|
this.setState({ settingsHover: false });
|
||||||
},
|
},
|
||||||
|
|
||||||
getLabel: function(name) {
|
// Get the label/tooltip to show
|
||||||
if (!this.props.collapsed) {
|
getLabel: function(label, parent, show) {
|
||||||
return <div className="mx_RoomTile_name">{name}</div>
|
if (true) {
|
||||||
}
|
|
||||||
else if (this.state.hover) {
|
|
||||||
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
|
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
|
||||||
return <RoomTooltip name={name} component={this} />;
|
return <RoomTooltip label={label} parent={parent} left={6} top={this.props.collapsed ? 3 : null} />;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -50,14 +88,17 @@ 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_createRoom" title="Rooms" onClick={ this.onCreateRoomClick }>
|
<div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } ref={(ref) => this._rooms = ref} >
|
||||||
<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._rooms, this.state.roomsHover) }
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_BottomLeftMenu_people" title="People" onClick={ this.onOneToOneChatClick }>
|
<div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } ref={(ref) => this._people = ref} >
|
||||||
<TintableSvg src="img/icons-people.svg" width="25" height="25"/>
|
<TintableSvg src="img/icons-people.svg" width="25" height="25" />
|
||||||
|
{ this.getLabel("New direct message", this._people, this.state.peopleHover) }
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
|
<div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } ref={(ref) => this._settings = ref} >
|
||||||
<TintableSvg src="img/icons-settings.svg" width="25" height="25"/>
|
<TintableSvg src="img/icons-settings.svg" width="25" height="25" />
|
||||||
|
{ this.getLabel("Settings", this._settings, this.state.settingsHover) }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
||||||
.mx_RoomTooltip_chevron {
|
.mx_RoomTooltip_chevron {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -9px;
|
left: -9px;
|
||||||
top: 7px;
|
top: 4px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,12 +25,13 @@ limitations under the License.
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
border: 1px solid #a4a4a4;
|
border: 1px solid #a4a4a4;
|
||||||
border-radius: 8px;
|
border-radius: 5px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
padding: 6px;
|
padding: 5px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
line-height: 18px;
|
line-height: 14px;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
mx_RoomToolTip_placeholder {
|
mx_RoomToolTip_placeholder {
|
||||||
|
|
Loading…
Reference in New Issue