Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Show all read avatars on click

Browse Source
This commit is contained in:
David Baker 2015-11-18 17:12:17 +00:00
parent 025b9e2fc8
commit f0df3f29b9
2 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Velociraptor.js
View File

@ -37,7 +37,16 @@ module.exports = React.createClass({
var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
if (oldNode.style.left != c.props.style.left) {
Velocity(oldNode, { left: c.props.style.left }, self.props.transition);
Velocity(oldNode, { left: c.props.style.left }, self.props.transition).then(function() {
// special case visibility because it's nonsensical to animate an invisible element
// so we always hidden->visible pre-transition and visible->hidden after
if (oldNode.style.visibility == 'visible' && c.props.style.visibility == 'hidden') {
oldNode.style.visibility = c.props.style.visibility;
}
});
if (oldNode.style.visibility == 'hidden' && c.props.style.visibility == 'visible') {
oldNode.style.visibility = c.props.style.visibility;
}
//console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
}
self.children[c.key] = old;

38
src/skins/vector/views/molecules/EventTile.js
View File

@ -58,7 +58,7 @@ module.exports = React.createClass({
},
getInitialState: function() {
return {menu: false};
return {menu: false, allReadAvatars: false};
},
componentDidUpdate: function() {
@ -82,6 +82,12 @@ module.exports = React.createClass({
this.setState({menu: true});
},
toggleAllReadAvatars: function() {
this.setState({
allReadAvatars: !this.state.allReadAvatars
});
},
getReadAvatars: function() {
var avatars = [];
@ -136,25 +142,39 @@ module.exports = React.createClass({
});
}
var style = {
left: left+'px',
top: '0px',
visibility: i < MAX_READ_AVATARS || this.state.allReadAvatars ? 'visible' : 'hidden'
};
// add to the start so the most recent is on the end (ie. ends up rightmost)
avatars.unshift(
<MemberAvatar key={member.userId} member={member}
width={14} height={14} resizeMethod="crop"
style={ { left: left+'px', top: '0px' } }
style={style}
startStyle={startStyles}
enterTransitionOpts={enterTransitionOpts}
id={'mx_readAvatar'+member.userId}
onClick={this.toggleAllReadAvatars}
/>
);
left -= 15;
if (i + 1 >= MAX_READ_AVATARS) {
break;
// TODO: we keep the extra read avatars in the dom to make animation simpler
// we could optimise this to reduce the dom size.
if (i < MAX_READ_AVATARS - 1 || this.state.allReadAvatars) {
left -= 15;
}
}
var remainder = receipts.length - MAX_READ_AVATARS;
var remText;
if (remainder > 0) {
remText = <span className="mx_EventTile_readAvatarRemainder" style={ {left: left} }>+{ remainder }</span>;
if (!this.state.allReadAvatars) {
var remainder = receipts.length - MAX_READ_AVATARS;
var remText;
left -= 15;
if (remainder > 0) {
remText = <span className="mx_EventTile_readAvatarRemainder"
onClick={this.toggleAllReadAvatars}
style={ {left: left} }>+{ remainder }
</span>;
}
}
return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}>