Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-09-22 00:55:44 +00: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]); var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
if (oldNode.style.left != c.props.style.left) { 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); //console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
} }
self.children[c.key] = old; self.children[c.key] = old;

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

@ -58,7 +58,7 @@ module.exports = React.createClass({
}, },
getInitialState: function() { getInitialState: function() {
return {menu: false}; return {menu: false, allReadAvatars: false};
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
@ -82,6 +82,12 @@ module.exports = React.createClass({
this.setState({menu: true}); this.setState({menu: true});
}, },
toggleAllReadAvatars: function() {
this.setState({
allReadAvatars: !this.state.allReadAvatars
});
},
getReadAvatars: function() { getReadAvatars: function() {
var avatars = []; 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) // add to the start so the most recent is on the end (ie. ends up rightmost)
avatars.unshift( avatars.unshift(
<MemberAvatar key={member.userId} member={member} <MemberAvatar key={member.userId} member={member}
width={14} height={14} resizeMethod="crop" width={14} height={14} resizeMethod="crop"
style={ { left: left+'px', top: '0px' } } style={style}
startStyle={startStyles} startStyle={startStyles}
enterTransitionOpts={enterTransitionOpts} enterTransitionOpts={enterTransitionOpts}
id={'mx_readAvatar'+member.userId} id={'mx_readAvatar'+member.userId}
onClick={this.toggleAllReadAvatars}
/> />
); );
// 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; left -= 15;
if (i + 1 >= MAX_READ_AVATARS) {
break;
} }
} }
if (!this.state.allReadAvatars) {
var remainder = receipts.length - MAX_READ_AVATARS; var remainder = receipts.length - MAX_READ_AVATARS;
var remText; var remText;
left -= 15;
if (remainder > 0) { if (remainder > 0) {
remText = <span className="mx_EventTile_readAvatarRemainder" style={ {left: left} }>+{ remainder }</span>; remText = <span className="mx_EventTile_readAvatarRemainder"
onClick={this.toggleAllReadAvatars}
style={ {left: left} }>+{ remainder }
</span>;
}
} }
return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}> return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}>