tooltipize BottomLeftMenu too for consistency

kegan/timestamp-hover
Matthew Hodgson 2015-10-11 15:00:43 +01:00
parent ae506b5b1f
commit b05f3343e2
7 changed files with 98 additions and 31 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -35,6 +35,7 @@ skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp');
skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar'); skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar');
skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed'); skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed');
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu'); skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile');
skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar'); skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
skin['molecules.ChangeDisplayName'] = require('./views/molecules/ChangeDisplayName'); skin['molecules.ChangeDisplayName'] = require('./views/molecules/ChangeDisplayName');
skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword'); skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword');

View File

@ -17,7 +17,7 @@ limitations under the License.
'use strict'; 'use strict';
var React = require('react'); var React = require('react');
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({
@ -35,28 +35,24 @@ module.exports = React.createClass({
dis.dispatch({action: 'view_create_room'}); dis.dispatch({action: 'view_create_room'});
}, },
getLabel: function(name) {
if (!this.props.collapsed) {
return <div className="mx_RoomTile_name">{name}</div>
}
else if (this.state.hover) {
var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
return <RoomTooltip name={name}/>;
}
},
render: function() { render: function() {
var BottomLeftMenuTile = sdk.getComponent('molecules.BottomLeftMenuTile');
return ( return (
<div className="mx_BottomLeftMenu"> <div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options"> <div className="mx_BottomLeftMenu_options">
<div className="mx_RoomTile" onClick={this.onCreateRoomClick}> <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.png" label="Create new room" onClick={ this.onCreateRoomClick }/>
<div className="mx_RoomTile_avatar"> <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.png" label="Directory" onClick={ this.onRoomDirectoryClick }/>
<img src="img/create-big.png" alt="Create new room" title="Create new room" width="36" height="36"/> <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.png" label="Settings" onClick={ this.onSettingsClick }/>
</div>
<div className="mx_RoomTile_name">Create new room</div>
</div>
<div className="mx_RoomTile" onClick={this.onRoomDirectoryClick}>
<div className="mx_RoomTile_avatar">
<img src="img/directory-big.png" alt="Directory" title="Directory" width="36" height="36"/>
</div>
<div className="mx_RoomTile_name">Directory</div>
</div>
<div className="mx_RoomTile" onClick={this.onSettingsClick}>
<div className="mx_RoomTile_avatar">
<img src="img/settings-big.png" alt="Settings" title="Settings" width="36" height="36"/>
</div>
<div className="mx_RoomTile_name">Settings</div>
</div>
</div> </div>
</div> </div>
); );

View File

@ -0,0 +1,60 @@
/*
Copyright 2015 OpenMarket 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.
*/
'use strict';
var React = require('react');
var classNames = require('classnames');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'BottomLeftMenuTile',
getInitialState: function() {
return( { hover : false });
},
onMouseEnter: function() {
this.setState( { hover : true });
},
onMouseLeave: function() {
this.setState( { hover : false });
},
render: function() {
var label;
if (!this.props.collapsed) {
label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
}
else if (this.state.hover) {
var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
}
return (
<div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
<div className="mx_RoomTile_avatar">
<img src={ this.props.img } width="36" height="36"/>
</div>
{ label }
</div>
);
}
});

View File

@ -77,7 +77,7 @@ module.exports = React.createClass({
} }
else if (this.state.hover) { else if (this.state.hover) {
var RoomTooltip = sdk.getComponent("molecules.RoomTooltip"); var RoomTooltip = sdk.getComponent("molecules.RoomTooltip");
label = <RoomTooltip room={this.props.room} ref="roomTooltip"/>; label = <RoomTooltip room={this.props.room}/>;
} }
var RoomAvatar = sdk.getComponent('atoms.RoomAvatar'); var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');

View File

@ -28,25 +28,35 @@ module.exports = React.createClass({
displayName: 'RoomTooltip', displayName: 'RoomTooltip',
componentDidMount: function() { componentDidMount: function() {
// tell the roomlist about us if (!this.props.bottom) {
dis.dispatch({ // tell the roomlist about us so it can position us
action: 'view_tooltip', dis.dispatch({
tooltip: this.getDOMNode(), action: 'view_tooltip',
}); tooltip: this.getDOMNode(),
});
}
else {
var tooltip = this.getDOMNode();
tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px";
tooltip.style.display = "block";
}
}, },
componentDidUnmount: function() { componentDidUnmount: function() {
dis.dispatch({ if (!this.props.bottom) {
action: 'view_tooltip', dis.dispatch({
tooltip: null, action: 'view_tooltip',
}); tooltip: null,
});
}
}, },
render: function() { render: function() {
var label = this.props.room ? this.props.room.name : this.props.label;
return ( return (
<div className="mx_RoomTooltip"> <div className="mx_RoomTooltip">
<img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/> <img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
{ this.props.room.name } { label }
</div> </div>
); );
} }

View File

@ -48,7 +48,7 @@ module.exports = React.createClass({
{ collapseButton } { collapseButton }
<IncomingCallBox /> <IncomingCallBox />
<RoomList selectedRoom={this.props.selectedRoom} collapsed={this.props.collapsed}/> <RoomList selectedRoom={this.props.selectedRoom} collapsed={this.props.collapsed}/>
<BottomLeftMenu /> <BottomLeftMenu collapsed={this.props.collapsed}/>
</aside> </aside>
); );
} }