Matrix/element-web
Matrix/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-09-19 19:45:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix up MemberInfo behaviour

Browse source
This commit is contained in:
Matthew Hodgson 2015-07-20 08:24:38 -07:00
parent 05d9afc040
commit bb06484732
5 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
skins/base/css/molecules/MemberInfo.css
View file

@ -22,7 +22,7 @@ limitations under the License.
position: absolute;
width: 200px;
margin-left: -295px;
margin-top: -12px;
margin-top: 0px;
z-index: 1000;
padding: 6px;
}
@ -34,6 +34,17 @@ limitations under the License.
top: 0px;
}
/*
* a hacky shim to extend the hitmask of the overlay to overlap
* better with the main menu itself
*/
.mx_MemberInfo_shim {
position: absolute;
left: 212px;
width: 40px;
height: 100%;
}
.mx_MemberInfo_avatar {
padding: 6px;
}
@ -44,7 +55,6 @@ limitations under the License.
.mx_MemberInfo_field {
padding: 6px;
font-weight: bold;
}
.mx_MemberInfo_button {

11
skins/base/views/molecules/MemberInfo.js
View file

@ -25,6 +25,16 @@ module.exports = React.createClass({
displayName: 'MemberInfo',
mixins: [MemberInfoController],
componentDidMount: function() {
var self = this;
var memberInfo = this.getDOMNode();
var memberListScroll = document.getElementsByClassName("mx_MemberList_border")[0];
if (memberListScroll) {
memberInfo.style.top = (memberInfo.parentElement.offsetTop - memberListScroll.scrollTop) + "px";
}
},
getDuration: function(time) {
if (!time) return;
var t = parseInt(time / 1000);
@ -61,6 +71,7 @@ module.exports = React.createClass({
return (
<div className="mx_MemberInfo">
<img className="mx_MemberInfo_chevron" src="img/chevron-right.png" width="9" height="16" />
<div className="mx_MemberInfo_shim"></div>
<div className="mx_MemberInfo_avatar">
<img className="mx_MemberInfo_avatarImg"
src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 128, 128, "crop") : null }

14
skins/base/views/organisms/MemberList.js
View file

@ -30,6 +30,18 @@ module.exports = React.createClass({
displayName: 'MemberList',
mixins: [MemberListController],
// FIXME: combine this more nicely with the MemberInfo positioning stuff...
onMemberListScroll: function(ev) {
if (this.refs.memberListScroll) {
var memberListScroll = this.refs.memberListScroll.getDOMNode();
// offset the current MemberInfo bubble
var memberInfo = document.getElementsByClassName("mx_MemberInfo")[0];
if (memberInfo) {
memberInfo.style.top = (memberInfo.parentElement.offsetTop - memberListScroll.scrollTop) + "px";
}
}
},
makeMemberTiles: function() {
var self = this;
return Object.keys(self.state.memberDict).map(function(userId) {
@ -71,7 +83,7 @@ module.exports = React.createClass({
<div className="mx_MemberList_chevron">
<img src="img/chevron.png" width="24" height="13"/>
</div>
<div className="mx_MemberList_border">
<div className="mx_MemberList_border" ref="memberListScroll" onScroll={ this.onMemberListScroll }>
<h2>Members</h2>
<div className="mx_MemberList_wrapper">
{this.makeMemberTiles()}