Adding react scrollbar to the RHS thread (#2693)

* Adding scrollbar to the RHS thread

* Fixing the RHS thread scrolling issue

6 files changed, 83 insertions, 52 deletions

diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 177f282d3..a91c03d58 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -203,7 +203,7 @@ class CreateComment extends React.Component {
         draft.message = messageText;
         PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
+        $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight);
         this.setState({messageText: messageText});
     }
     handleKeyDown(e) {
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index bbd9f8b28..499e0e7c3 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -13,9 +13,26 @@ import RootPost from './rhs_root_post.jsx';
 import Comment from './rhs_comment.jsx';
 import Constants from 'utils/constants.jsx';
 import FileUploadOverlay from './file_upload_overlay.jsx';
+import Scrollbars from 'react-custom-scrollbars';
 
 import React from 'react';
 
+export function renderThumbHorizontal(props) {
+    return (
+        <div
+            {...props}
+            className='scrollbar--horizontal'
+        />);
+}
+
+export function renderThumbVertical(props) {
+    return (
+        <div
+            {...props}
+            className='scrollbar--vertical'
+        />);
+}
+
 export default class RhsThread extends React.Component {
     constructor(props) {
         super(props);
@@ -46,15 +63,11 @@ export default class RhsThread extends React.Component {
         window.addEventListener('resize', this.handleResize);
 
         this.mounted = true;
-        if (!Utils.isMobile()) {
-            $('.sidebar--right .post-right__scroll').perfectScrollbar();
-        }
     }
     componentDidUpdate() {
         if ($('.post-right__scroll')[0]) {
-            $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
+            $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight);
         }
-        $('.sidebar--right .post-right__scroll').perfectScrollbar('update');
         this.resize();
     }
     componentWillUnmount() {
@@ -109,7 +122,7 @@ export default class RhsThread extends React.Component {
         this.setState({profiles});
     }
     resize() {
-        $('.post-right__scroll').scrollTop(100000);
+        $('.post-right__scroll').parent().scrollTop(100000);
     }
     render() {
         const posts = this.state.posts;
@@ -180,40 +193,48 @@ export default class RhsThread extends React.Component {
                         fromSearch={this.props.fromSearch}
                         isMentionSearch={this.props.isMentionSearch}
                     />
-                    <div className='post-right__scroll'>
-                        <RootPost
-                            ref={selected.id}
-                            post={selected}
-                            commentCount={postsArray.length}
-                            user={profile}
-                            currentUser={this.props.currentUser}
-                        />
-                        <div className='post-right-comments-container'>
-                            {postsArray.map((comPost) => {
-                                let p;
-                                if (UserStore.getCurrentId() === comPost.user_id) {
-                                    p = UserStore.getCurrentUser();
-                                } else {
-                                    p = profiles[comPost.user_id];
-                                }
-                                return (
-                                    <Comment
-                                        ref={comPost.id}
-                                        key={comPost.id + 'commentKey'}
-                                        post={comPost}
-                                        user={p}
-                                        currentUser={this.props.currentUser}
-                                    />
-                                );
-                            })}
-                        </div>
-                        <div className='post-create__container'>
-                            <CreateComment
-                                channelId={selected.channel_id}
-                                rootId={selected.id}
+                    <Scrollbars
+                        autoHide={true}
+                        autoHideTimeout={500}
+                        autoHideDuration={500}
+                        renderThumbHorizontal={renderThumbHorizontal}
+                        renderThumbVertical={renderThumbVertical}
+                    >
+                        <div className='post-right__scroll'>
+                            <RootPost
+                                ref={selected.id}
+                                post={selected}
+                                commentCount={postsArray.length}
+                                user={profile}
+                                currentUser={this.props.currentUser}
                             />
+                            <div className='post-right-comments-container'>
+                                {postsArray.map((comPost) => {
+                                    let p;
+                                    if (UserStore.getCurrentId() === comPost.user_id) {
+                                        p = UserStore.getCurrentUser();
+                                    } else {
+                                        p = profiles[comPost.user_id];
+                                    }
+                                    return (
+                                        <Comment
+                                            ref={comPost.id}
+                                            key={comPost.id + 'commentKey'}
+                                            post={comPost}
+                                            user={p}
+                                            currentUser={this.props.currentUser}
+                                        />
+                                    );
+                                })}
+                            </div>
+                            <div className='post-create__container'>
+                                <CreateComment
+                                    channelId={selected.channel_id}
+                                    rootId={selected.id}
+                                />
+                            </div>
                         </div>
-                    </div>
+                    </Scrollbars>
                 </div>
             </div>
         );
diff --git a/webapp/package.json b/webapp/package.json
index 01674ba1c..6d3f05421 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -22,6 +22,7 @@
     "perfect-scrollbar": "0.6.10",
     "react": "0.14.7",
     "react-bootstrap": "0.28.3",
+    "react-custom-scrollbars": "^4.0.0-beta.1",
     "react-dom": "0.14.7",
     "react-intl": "2.0.0-rc-1",
     "react-router": "2.0.1",
diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss
index cda7d25bd..cf940b59a 100644
--- a/webapp/sass/components/_error-bar.scss
+++ b/webapp/sass/components/_error-bar.scss
@@ -10,20 +10,22 @@
     width: 100%;
     z-index: 9999;
 
-    &__close {
-        color: $white;
-        font-family: 'Open Sans', sans-serif;
-        font-size: 20px;
-        font-weight: 600;
-        padding: 0 10px;
-        position: absolute;
-        right: 0;
-        text-decoration: none;
-        top: 0;
-
-        &:hover {
+    a {
+        &.error-bar__close {
             color: $white;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 20px;
+            font-weight: 600;
+            padding: 0 10px;
+            position: absolute;
+            right: 0;
             text-decoration: none;
+            top: 0;
+
+            &:hover {
+                color: $white;
+                text-decoration: none;
+            }
         }
     }
 }
diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss
index 0bb0e7e21..b6ec4f22f 100644
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -22,4 +22,10 @@ body {
     scrollbar-highlight-color: #7D7E94;
     scrollbar-shadow-color: #2D2C4D;
     scrollbar-track-color: rgba(0, 0, 0, .1);
-}
\ No newline at end of file
+}
+
+.scrollbar--horizontal,
+.scrollbar--vertical {
+    @include border-radius(2px);
+    @include alpha-property(background-color, $black, .5);
+}
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index ac373d638..27885c376 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -729,6 +729,7 @@ export function applyTheme(theme) {
         changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1);
         changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4);
         changeCss('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2);
     }
 
     if (theme.newMessageSeparator) {