imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5697 from matrix-org/travis/fix-tetris

Browse source 
Fix tetris effect (holes) in read receipts
This commit is contained in:
Travis Ralston 2021-03-02 07:35:04 -07:00 • committed by GitHub
commit 303ea16492
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/rooms/ReadReceiptMarker.js
View file

@ -32,7 +32,7 @@ try {
} catch (e) {
}
export default class ReadReceiptMarker extends React.Component {
export default class ReadReceiptMarker extends React.PureComponent {
static propTypes = {
// the RoomMember to show the RR for
member: PropTypes.object,
@ -155,7 +155,15 @@ export default class ReadReceiptMarker extends React.Component {
// then shift to the rightmost column,
// and then it will drop down to its resting position
startStyles.push({ top: startTopOffset+'px', left: '0px' });
//
// XXX: We use a fractional left value to trick velocity-animate into actually animating.
// This is a very annoying bug where if it thinks there's no change to `left` then it'll
// skip applying it, thus making our read receipt at +14px instead of +0px like it
// should be. This does cause a tiny amount of drift for read receipts, however with a
// value so small it's not perceived by a user.
// Note: Any smaller values (or trying to interchange units) might cause read receipts to
// fail to fall down or cause gaps.
startStyles.push({ top: startTopOffset+'px', left: '0.001px' });
enterTransitionOpts.push({
duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
easing: bounce ? 'easeOutBounce' : 'easeOutCubic',