Added DelayedAction class to use to handle stopping scrolling

3 files changed, 46 insertions, 2 deletions

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);