From 872f001fbbebe93ae7fc4b92a6d17a378e0d50d5 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 14:56:40 -0500 Subject: Added floating post timestamp --- web/react/components/posts_view.jsx | 92 +++++++++++++++++++++++---- web/sass-files/sass/partials/_post.scss | 32 +++++++++- web/sass-files/sass/partials/_responsive.scss | 5 +- 3 files changed, 111 insertions(+), 18 deletions(-) (limited to 'web') diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index e116fdeea..83e580307 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -26,7 +26,11 @@ export default class PostsView extends React.Component { this.wasAtBottom = true; this.scrollHeight = 0; - this.state = {displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')}; + this.state = { + displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), + isScrolling: true, // TODO change this once we start detecting scrolling + topPostId: null + }; } static get SCROLL_TYPE_FREE() { return 1; @@ -69,6 +73,37 @@ export default class PostsView extends React.Component { this.props.postViewScrolled(this.isAtBottom()); this.prevScrollHeight = this.refs.postlist.scrollHeight; this.prevOffsetTop = this.jumpToPostNode.offsetTop; + + this.updateFloatingTimestamp(); + } + updateFloatingTimestamp() { + if (this.props.postList) { + // iterate through posts starting at the bottom since users are more likely to be viewing newer posts + for (let i = 0; i < this.props.postList.order.length; i++) { + const id = this.props.postList.order[i]; + const element = ReactDOM.findDOMNode(this.refs[id]); + + if (!element || element.offsetTop + element.clientHeight <= this.refs.postlist.scrollTop) { + // this post is off the top of the screen so the last one is at the top of the screen + let topPostId; + + if (i > 0) { + topPostId = this.props.postList.order[i - 1]; + } else { + // the first post we look at should always be on the screen, but handle that case anyway + topPostId = id; + } + + if (topPostId !== this.state.topPostId) { + this.setState({ + topPostId + }); + } + + break; + } + } + } } loadMorePostsTop() { this.props.loadMorePostsTopClicked(); @@ -322,6 +357,12 @@ export default class PostsView extends React.Component { if (nextState.displayNameType !== this.state.displayNameType) { return true; } + if (this.state.topPostId !== nextState.topPostId) { + return true; + } + if (this.state.isScrolling !== nextState.isScrolling) { + return true; + } return false; } @@ -377,20 +418,43 @@ export default class PostsView extends React.Component { } } + let floatingTimestamp = null; + if (this.state.topPostId) { + const topPost = this.props.postList.posts[this.state.topPostId]; + const dateString = Utils.getDateForUnixTicks(topPost.create_at).toDateString(); + + let timestampClass = 'post-list__timestamp'; + if (this.state.isScrolling) { + timestampClass += ' scrolling'; + } + + floatingTimestamp = ( +
+ {dateString} +
+ ); + } + return ( -
-
-
- {moreMessagesTop} - {postElements} - {moreMessagesBottom} +
+ {floatingTimestamp} +
+
+
+ {moreMessagesTop} + {postElements} + {moreMessagesBottom} +
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index fbebb4e98..4e5968254 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -211,6 +211,10 @@ body.ios { overflow-y: hidden; height: 100%; + .inactive { + display: none; + } + .post-list-holder-by-time { background: #fff; overflow-y: scroll; @@ -222,9 +226,6 @@ body.ios { &::-webkit-scrollbar { width: 0px !important; } - &.inactive { - display: none; - } &.active { display: inline; } @@ -247,6 +248,31 @@ body.ios { } } +.post-list__timestamp { + position: absolute; + top: 8px; + left: 50%; + z-index: 50; + width: 120px; + text-align: center; + background: $primary-color; + color: #fff; + @include border-radius(3px); + font-size: 12px; + line-height: 25px; + margin-left: -60px; + -webkit-font-smoothing: initial; + @include single-transition(all, 0.3s, ease, 1.0s); + @include translateY(-45px); + @include opacity(0); + + &.scrolling { + @include single-transition(all, 0.3s, ease); + @include translateY(0); + @include opacity(0.8); + } +} + .post-create__container { form { width: 100%; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 2aa130fa9..c493c6aeb 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -241,6 +241,9 @@ } } } + .post-list__timestamp { + display: block; + } .signup-team__container { padding: 30px 0; margin-bottom: 30px; @@ -795,4 +798,4 @@ font-size: 2em; } } -} \ No newline at end of file +} -- cgit v1.2.3-1-g7c22 From 07638f7e7dd6718155eb650562d71063e7756de5 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 15:55:52 -0500 Subject: Added DelayedAction class to use to handle stopping scrolling --- web/react/components/posts_view.jsx | 19 ++++++++++++++++++- web/react/utils/delayed_action.jsx | 27 +++++++++++++++++++++++++++ web/sass-files/sass/partials/_post.scss | 2 +- 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 web/react/utils/delayed_action.jsx (limited to 'web') diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 83e580307..187cf2a71 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -7,6 +7,7 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import * as Utils from '../utils/utils.jsx'; import Post from './post.jsx'; import Constants from '../utils/constants.jsx'; +import DelayedAction from '../utils/delayed_action.jsx'; const Preferences = Constants.Preferences; export default class PostsView extends React.Component { @@ -15,6 +16,7 @@ export default class PostsView extends React.Component { this.updateState = this.updateState.bind(this); this.handleScroll = this.handleScroll.bind(this); + this.handleScrollStop = this.handleScrollStop.bind(this); this.isAtBottom = this.isAtBottom.bind(this); this.loadMorePostsTop = this.loadMorePostsTop.bind(this); this.loadMorePostsBottom = this.loadMorePostsBottom.bind(this); @@ -26,9 +28,11 @@ export default class PostsView extends React.Component { this.wasAtBottom = true; this.scrollHeight = 0; + this.scrollStopAction = new DelayedAction(this.handleScrollStop); + this.state = { displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), - isScrolling: true, // TODO change this once we start detecting scrolling + isScrolling: false, topPostId: null }; } @@ -75,6 +79,19 @@ export default class PostsView extends React.Component { this.prevOffsetTop = this.jumpToPostNode.offsetTop; this.updateFloatingTimestamp(); + + if (!this.state.isScrolling) { + this.setState({ + isScrolling: true + }); + } + + this.scrollStopAction.fireAfter(1000); + } + handleScrollStop() { + this.setState({ + isScrolling: false + }); } updateFloatingTimestamp() { if (this.props.postList) { diff --git a/web/react/utils/delayed_action.jsx b/web/react/utils/delayed_action.jsx new file mode 100644 index 000000000..4f6239ad0 --- /dev/null +++ b/web/react/utils/delayed_action.jsx @@ -0,0 +1,27 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class DelayedAction { + constructor(action) { + this.action = action; + + this.timer = -1; + + // bind fire since it doesn't get passed the correct this value with setTimeout + this.fire = this.fire.bind(this); + } + + fire() { + this.action(); + + this.timer = -1; + } + + fireAfter(timeout) { + if (this.timer >= 0) { + window.clearTimeout(this.timer); + } + + this.timer = window.setTimeout(this.fire, timeout); + } +} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 4e5968254..9acac9532 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -262,7 +262,7 @@ body.ios { line-height: 25px; margin-left: -60px; -webkit-font-smoothing: initial; - @include single-transition(all, 0.3s, ease, 1.0s); + @include single-transition(all, 0.3s, ease); @include translateY(-45px); @include opacity(0); -- cgit v1.2.3-1-g7c22 From c7fb1f7fe94cd018daa7de2b85a2246eaff9f111 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 15 Dec 2015 16:31:07 -0500 Subject: Hid floating timestamp header on non-mobile --- web/react/components/posts_view.jsx | 5 +++++ web/sass-files/sass/partials/_post.scss | 1 + 2 files changed, 6 insertions(+) (limited to 'web') diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 187cf2a71..a4dd51e19 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -94,6 +94,11 @@ export default class PostsView extends React.Component { }); } updateFloatingTimestamp() { + // skip this in non-mobile view since that's when the timestamp is visible + if ($(window).width() > 768) { + return; + } + if (this.props.postList) { // iterate through posts starting at the bottom since users are more likely to be viewing newer posts for (let i = 0; i < this.props.postList.order.length; i++) { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 9acac9532..88842c973 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -265,6 +265,7 @@ body.ios { @include single-transition(all, 0.3s, ease); @include translateY(-45px); @include opacity(0); + display: none; &.scrolling { @include single-transition(all, 0.3s, ease); -- cgit v1.2.3-1-g7c22 From b4eb83d66ff3304653bfc80a1b2f4982351eae73 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 16 Dec 2015 09:30:46 -0500 Subject: Added scroll to bottom arrows for mobile --- web/react/components/posts_view.jsx | 27 ++++++++++++++++++++++++--- web/sass-files/sass/partials/_post.scss | 18 ++++++++++++++++++ web/static/images/postArrows.png | Bin 0 -> 5684 bytes 3 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 web/static/images/postArrows.png (limited to 'web') diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index a4dd51e19..aedf431af 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -23,6 +23,7 @@ export default class PostsView extends React.Component { this.createPosts = this.createPosts.bind(this); this.updateScrolling = this.updateScrolling.bind(this); this.handleResize = this.handleResize.bind(this); + this.scrollToBottom = this.scrollToBottom.bind(this); this.jumpToPostNode = null; this.wasAtBottom = true; @@ -283,9 +284,7 @@ export default class PostsView extends React.Component { } updateScrolling() { if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) { - window.requestAnimationFrame(() => { - this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; - }); + this.scrollToBottom(); } else if (this.props.scrollType === PostsView.SCROLL_TYPE_NEW_MESSAGE) { window.requestAnimationFrame(() => { // If separator exists scroll to it. Otherwise scroll to bottom. @@ -335,6 +334,11 @@ export default class PostsView extends React.Component { handleResize() { this.updateScrolling(); } + scrollToBottom() { + window.requestAnimationFrame(() => { + this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; + }); + } componentDidMount() { if (this.props.postList != null) { this.updateScrolling(); @@ -460,9 +464,26 @@ export default class PostsView extends React.Component { ); } + let scrollToBottomArrows = null; + if ($(window).width() <= 768) { + let scrollToBottomArrowsClass = 'post-list__arrows'; + if (this.state.isScrolling && !this.wasAtBottom) { + scrollToBottomArrowsClass += ' scrolling'; + } + + scrollToBottomArrows = ( +
+ ); + } + return (
{floatingTimestamp} + {scrollToBottomArrows}
Date: Wed, 16 Dec 2015 09:39:26 -0500 Subject: Cleaned up floating post components --- web/react/components/posts_view.jsx | 89 ++++++++++++++++++++++--------------- 1 file changed, 54 insertions(+), 35 deletions(-) (limited to 'web') diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index aedf431af..a28efbd04 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -444,46 +444,22 @@ export default class PostsView extends React.Component { } } - let floatingTimestamp = null; + let topPost = null; if (this.state.topPostId) { - const topPost = this.props.postList.posts[this.state.topPostId]; - const dateString = Utils.getDateForUnixTicks(topPost.create_at).toDateString(); - - let timestampClass = 'post-list__timestamp'; - if (this.state.isScrolling) { - timestampClass += ' scrolling'; - } - - floatingTimestamp = ( -
- {dateString} -
- ); - } - - let scrollToBottomArrows = null; - if ($(window).width() <= 768) { - let scrollToBottomArrowsClass = 'post-list__arrows'; - if (this.state.isScrolling && !this.wasAtBottom) { - scrollToBottomArrowsClass += ' scrolling'; - } - - scrollToBottomArrows = ( -
- ); + topPost = this.props.postList.posts[this.state.topPostId]; } return (
- {floatingTimestamp} - {scrollToBottomArrows} + +
768) { + return