diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-12-16 09:30:46 -0500 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-12-16 09:55:00 -0500 |
commit | b4eb83d66ff3304653bfc80a1b2f4982351eae73 (patch) | |
tree | 13bc0da13f3acd3f388812ef044cf4f50d9d01da | |
parent | c7fb1f7fe94cd018daa7de2b85a2246eaff9f111 (diff) | |
download | chat-b4eb83d66ff3304653bfc80a1b2f4982351eae73.tar.gz chat-b4eb83d66ff3304653bfc80a1b2f4982351eae73.tar.bz2 chat-b4eb83d66ff3304653bfc80a1b2f4982351eae73.zip |
Added scroll to bottom arrows for mobile
-rw-r--r-- | web/react/components/posts_view.jsx | 27 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 18 | ||||
-rw-r--r-- | web/static/images/postArrows.png | bin | 0 -> 5684 bytes |
3 files changed, 42 insertions, 3 deletions
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 = ( + <div + ref='postArrows' + className={scrollToBottomArrowsClass} + onClick={this.scrollToBottom} + /> + ); + } + return ( <div className={activeClass}> {floatingTimestamp} + {scrollToBottomArrows} <div ref='postlist' className='post-list-holder-by-time' diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 88842c973..2f6540a4e 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -274,6 +274,24 @@ body.ios { } } +.post-list__arrows { + background: url('../images/postArrows.png') center; + @include background-size(28px 28px); + background-repeat: no-repeat; + width: 40px; + height: 40px; + position: absolute; + bottom: 50px; + right: 5px; + z-index: 50; + @include opacity(0); + @include single-transition(all, 0.3s); + + &.scrolling { + @include opacity(1); + } +} + .post-create__container { form { width: 100%; diff --git a/web/static/images/postArrows.png b/web/static/images/postArrows.png Binary files differnew file mode 100644 index 000000000..7b5919fc3 --- /dev/null +++ b/web/static/images/postArrows.png |