OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

unbreak history scrolling for pills & emoji

pull/21833/head
Matthew Hodgson 2018-05-13 00:54:01 +01:00
parent 33eaa84bdf
commit 877a6195ae
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/views/rooms/MessageComposerInput.js
View File

@ -912,12 +912,17 @@ export default class MessageComposerInput extends React.Component {
const editorNode = ReactDOM.findDOMNode(this.refs.editor); const editorNode = ReactDOM.findDOMNode(this.refs.editor);
const editorRect = editorNode.getBoundingClientRect(); const editorRect = editorNode.getBoundingClientRect();
// heuristic to handle tall emoji, pills, etc pushing the cursor away from the top
// or bottom of the page.
// XXX: is this going to break on large inline images or top-to-bottom scripts?
const EDGE_THRESHOLD = 8;
let navigateHistory = false; let navigateHistory = false;
if (up) { if (up) {
const scrollCorrection = editorNode.scrollTop; const scrollCorrection = editorNode.scrollTop;
const distanceFromTop = cursorRect.top - editorRect.top + scrollCorrection; const distanceFromTop = cursorRect.top - editorRect.top + scrollCorrection;
//console.log(`Cursor distance from editor top is ${distanceFromTop}`); console.log(`Cursor distance from editor top is ${distanceFromTop}`);
if (distanceFromTop == 0) { if (distanceFromTop < EDGE_THRESHOLD) {
navigateHistory = true; navigateHistory = true;
} }
} }
@ -925,8 +930,8 @@ export default class MessageComposerInput extends React.Component {
const scrollCorrection = const scrollCorrection =
editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop; editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
const distanceFromBottom = cursorRect.bottom - editorRect.bottom + scrollCorrection; const distanceFromBottom = cursorRect.bottom - editorRect.bottom + scrollCorrection;
//console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`); console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
if (distanceFromBottom == 0) { if (distanceFromBottom < EDGE_THRESHOLD) {
navigateHistory = true; navigateHistory = true;
} }
} }