From e8c02c7c1d1d94d362a37c14e2c1a77508906e94 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Fri, 7 Jul 2017 19:27:13 -0400 Subject: Only show unreads below indicator after first load is complete (#6874) --- webapp/components/post_view/post_list.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webapp/components/post_view/post_list.jsx') diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx index 13cc28da3..20d1ce0ff 100644 --- a/webapp/components/post_view/post_list.jsx +++ b/webapp/components/post_view/post_list.jsx @@ -152,7 +152,7 @@ export default class PostList extends React.PureComponent { return; } - if (!this.wasAtBottom() && this.props.posts !== nextProps.posts) { + if (!this.wasAtBottom() && this.props.posts !== nextProps.posts && this.hasScrolledToNewMessageSeparator) { const unViewedCount = nextProps.posts.reduce((count, post) => { if (post.create_at > this.state.lastViewed && post.user_id !== nextProps.currentUserId && -- cgit v1.2.3-1-g7c22 From 45e7ad0c3428b4a050fedb354048f8a66aedf2a0 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Mon, 10 Jul 2017 13:58:01 -0400 Subject: Fix out of order posts for admins plus two minor fixes (#6886) --- webapp/components/post_view/post_list.jsx | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) (limited to 'webapp/components/post_view/post_list.jsx') diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx index 20d1ce0ff..a57a20677 100644 --- a/webapp/components/post_view/post_list.jsx +++ b/webapp/components/post_view/post_list.jsx @@ -104,6 +104,7 @@ export default class PostList extends React.PureComponent { this.previousScrollTop = Number.MAX_SAFE_INTEGER; this.previousScrollHeight = 0; this.previousClientHeight = 0; + this.atBottom = false; this.state = { atEnd: false, @@ -144,6 +145,7 @@ export default class PostList extends React.PureComponent { this.hasScrolled = false; this.hasScrolledToFocusedPost = false; this.hasScrolledToNewMessageSeparator = false; + this.atBottom = false; this.setState({atEnd: false}); if (nextChannel.id) { @@ -152,7 +154,7 @@ export default class PostList extends React.PureComponent { return; } - if (!this.wasAtBottom() && this.props.posts !== nextProps.posts && this.hasScrolledToNewMessageSeparator) { + if (!this.atBottom && this.props.posts !== nextProps.posts && this.hasScrolledToNewMessageSeparator) { const unViewedCount = nextProps.posts.reduce((count, post) => { if (post.create_at > this.state.lastViewed && post.user_id !== nextProps.currentUserId && @@ -206,6 +208,7 @@ export default class PostList extends React.PureComponent { return; } else if (postList && !this.hasScrolledToNewMessageSeparator) { postList.scrollTop = postList.scrollHeight; + this.atBottom = true; return; } @@ -218,7 +221,7 @@ export default class PostList extends React.PureComponent { const pendingPostId = posts[0].pending_post_id; if (postId !== prevPostId && pendingPostId !== prevPostId) { // If already scrolled to bottom - if (this.wasAtBottom()) { + if (this.atBottom) { doScrollToBottom = true; } @@ -229,6 +232,7 @@ export default class PostList extends React.PureComponent { } if (doScrollToBottom) { + this.atBottom = true; postList.scrollTop = postList.scrollHeight; return; } @@ -246,13 +250,13 @@ export default class PostList extends React.PureComponent { }); } - wasAtBottom = () => { - return this.previousClientHeight + this.previousScrollTop >= this.previousScrollHeight - CLOSE_TO_BOTTOM_SCROLL_MARGIN; + checkBottom = () => { + return this.refs.postlist.clientHeight + this.refs.postlist.scrollTop >= this.refs.postlist.scrollHeight - CLOSE_TO_BOTTOM_SCROLL_MARGIN; } handleResize = (forceScrollToBottom) => { const postList = this.refs.postlist; - const doScrollToBottom = this.wasAtBottom() || forceScrollToBottom; + const doScrollToBottom = this.atBottom || forceScrollToBottom; if (postList && doScrollToBottom) { postList.scrollTop = postList.scrollHeight; @@ -298,6 +302,9 @@ export default class PostList extends React.PureComponent { handleScroll = () => { this.hasScrolled = true; this.previousScrollTop = this.refs.postlist.scrollTop; + if (this.refs.postlist.scrollHeight === this.previousScrollHeight) { + this.atBottom = this.checkBottom(); + } this.updateFloatingTimestamp(); @@ -307,7 +314,7 @@ export default class PostList extends React.PureComponent { }); } - if (this.wasAtBottom()) { + if (this.atBottom) { this.setState({ lastViewed: new Date().getTime(), unViewedCount: 0, @@ -509,7 +516,7 @@ export default class PostList extends React.PureComponent { /> Date: Wed, 12 Jul 2017 09:48:06 -0400 Subject: Properly handle scroll when new message indicator is visible (#6908) --- webapp/components/post_view/post_list.jsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'webapp/components/post_view/post_list.jsx') diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx index a57a20677..ba20622f9 100644 --- a/webapp/components/post_view/post_list.jsx +++ b/webapp/components/post_view/post_list.jsx @@ -256,14 +256,22 @@ export default class PostList extends React.PureComponent { handleResize = (forceScrollToBottom) => { const postList = this.refs.postlist; + const messageSeparator = this.refs.newMessageSeparator; const doScrollToBottom = this.atBottom || forceScrollToBottom; - if (postList && doScrollToBottom) { - postList.scrollTop = postList.scrollHeight; + if (postList) { + if (doScrollToBottom) { + postList.scrollTop = postList.scrollHeight; + } else if (!this.hasScrolled && messageSeparator) { + const element = ReactDOM.findDOMNode(messageSeparator); + element.scrollIntoView(); + } this.previousScrollHeight = postList.scrollHeight; this.previousScrollTop = postList.scrollTop; this.previousClientHeight = postList.clientHeight; + + this.atBottom = this.checkBottom(); } } @@ -300,7 +308,8 @@ export default class PostList extends React.PureComponent { } handleScroll = () => { - this.hasScrolled = true; + // Only count as user scroll if we've already performed our first load scroll + this.hasScrolled = this.hasScrolledToNewMessageSeparator || this.hasScrolledToFocusedPost; this.previousScrollTop = this.refs.postlist.scrollTop; if (this.refs.postlist.scrollHeight === this.previousScrollHeight) { this.atBottom = this.checkBottom(); -- cgit v1.2.3-1-g7c22 From df3290c4cf93101b5104e7395d9a0af208eff513 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Wed, 12 Jul 2017 17:36:45 -0400 Subject: PLT-7093/PLT-7096 Updates to new message below indicator (#6912) * Updates to new message below indicator * Fixes per feedback --- webapp/components/post_view/post_list.jsx | 47 ++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 14 deletions(-) (limited to 'webapp/components/post_view/post_list.jsx') diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx index ba20622f9..c42c62377 100644 --- a/webapp/components/post_view/post_list.jsx +++ b/webapp/components/post_view/post_list.jsx @@ -110,7 +110,7 @@ export default class PostList extends React.PureComponent { atEnd: false, unViewedCount: 0, isScrolling: false, - lastViewed: Number.MAX_SAFE_INTEGER + lastViewed: props.lastViewedAt }; } @@ -146,24 +146,19 @@ export default class PostList extends React.PureComponent { this.hasScrolledToFocusedPost = false; this.hasScrolledToNewMessageSeparator = false; this.atBottom = false; - this.setState({atEnd: false}); + this.setState({atEnd: false, lastViewed: nextProps.lastViewedAt}); if (nextChannel.id) { this.loadPosts(nextChannel.id); } - return; } - if (!this.atBottom && this.props.posts !== nextProps.posts && this.hasScrolledToNewMessageSeparator) { - const unViewedCount = nextProps.posts.reduce((count, post) => { - if (post.create_at > this.state.lastViewed && - post.user_id !== nextProps.currentUserId && - post.state !== Constants.POST_DELETED) { - return count + 1; - } - return count; - }, 0); - this.setState({unViewedCount}); + const nextPosts = nextProps.posts || []; + const posts = this.props.posts || []; + const hasNewPosts = (posts.length === 0 && nextPosts.length > 0) || (posts.length > 0 && nextPosts.length > 0 && posts[0].id !== nextPosts[0].id); + + if (!this.checkBottom() && hasNewPosts) { + this.setUnreadsBelow(nextPosts, nextProps.currentUserId); } } } @@ -205,6 +200,9 @@ export default class PostList extends React.PureComponent { if (messageSeparator && !this.hasScrolledToNewMessageSeparator) { const element = ReactDOM.findDOMNode(messageSeparator); element.scrollIntoView(); + if (!this.checkBottom()) { + this.setUnreadsBelow(posts, this.props.currentUserId); + } return; } else if (postList && !this.hasScrolledToNewMessageSeparator) { postList.scrollTop = postList.scrollHeight; @@ -244,6 +242,18 @@ export default class PostList extends React.PureComponent { } } + setUnreadsBelow = (posts, currentUserId) => { + const unViewedCount = posts.reduce((count, post) => { + if (post.create_at > this.state.lastViewed && + post.user_id !== currentUserId && + post.state !== Constants.POST_DELETED) { + return count + 1; + } + return count; + }, 0); + this.setState({unViewedCount}); + } + handleScrollStop = () => { this.setState({ isScrolling: false @@ -251,6 +261,15 @@ export default class PostList extends React.PureComponent { } checkBottom = () => { + if (!this.refs.postlist) { + return false; + } + + // No scroll bar so we're at the bottom + if (this.refs.postlist.scrollHeight <= this.refs.postlist.clientHeight) { + return true; + } + return this.refs.postlist.clientHeight + this.refs.postlist.scrollTop >= this.refs.postlist.scrollHeight - CLOSE_TO_BOTTOM_SCROLL_MARGIN; } @@ -323,7 +342,7 @@ export default class PostList extends React.PureComponent { }); } - if (this.atBottom) { + if (this.checkBottom()) { this.setState({ lastViewed: new Date().getTime(), unViewedCount: 0, -- cgit v1.2.3-1-g7c22 From 764ff4cb64eb86c87a28a076eed28d8778f194d6 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Thu, 13 Jul 2017 19:55:45 -0400 Subject: PLT-7116/PLT-7126 Some final release fixes (#6933) * Some final release fixes * Fix team switching with image in channel bug --- webapp/components/post_view/post_list.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'webapp/components/post_view/post_list.jsx') diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx index c42c62377..d8a56fe83 100644 --- a/webapp/components/post_view/post_list.jsx +++ b/webapp/components/post_view/post_list.jsx @@ -181,6 +181,10 @@ export default class PostList extends React.PureComponent { const posts = this.props.posts; const postList = this.refs.postlist; + if (!postList) { + return; + } + // Scroll to focused post on first load const focusedPost = this.refs[this.props.focusedPostId]; if (focusedPost && this.props.posts) { @@ -262,7 +266,7 @@ export default class PostList extends React.PureComponent { checkBottom = () => { if (!this.refs.postlist) { - return false; + return true; } // No scroll bar so we're at the bottom @@ -329,7 +333,12 @@ export default class PostList extends React.PureComponent { handleScroll = () => { // Only count as user scroll if we've already performed our first load scroll this.hasScrolled = this.hasScrolledToNewMessageSeparator || this.hasScrolledToFocusedPost; + if (!this.refs.postlist) { + return; + } + this.previousScrollTop = this.refs.postlist.scrollTop; + if (this.refs.postlist.scrollHeight === this.previousScrollHeight) { this.atBottom = this.checkBottom(); } -- cgit v1.2.3-1-g7c22