From 51549cc0b261bb113f73976adcadd50048f54233 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 13 Apr 2016 17:33:42 +0500 Subject: Adding react scrollbar to the RHS thread (#2693) * Adding scrollbar to the RHS thread * Fixing the RHS thread scrolling issue --- webapp/components/create_comment.jsx | 2 +- webapp/components/rhs_thread.jsx | 97 +++++++++++++++++++++------------- webapp/package.json | 1 + webapp/sass/components/_error-bar.scss | 26 ++++----- webapp/sass/components/_scrollbar.scss | 8 ++- webapp/utils/utils.jsx | 1 + 6 files changed, 83 insertions(+), 52 deletions(-) (limited to 'webapp') 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 ( +
); +} + +export function renderThumbVertical(props) { + return ( +
); +} + 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} /> -
- -
- {postsArray.map((comPost) => { - let p; - if (UserStore.getCurrentId() === comPost.user_id) { - p = UserStore.getCurrentUser(); - } else { - p = profiles[comPost.user_id]; - } - return ( - - ); - })} -
-
- +
+ +
+ {postsArray.map((comPost) => { + let p; + if (UserStore.getCurrentId() === comPost.user_id) { + p = UserStore.getCurrentUser(); + } else { + p = profiles[comPost.user_id]; + } + return ( + + ); + })} +
+
+ +
-
+
); 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) { -- cgit v1.2.3-1-g7c22