diff options
-rw-r--r-- | webapp/components/create_comment.jsx | 2 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 97 | ||||
-rw-r--r-- | webapp/package.json | 1 | ||||
-rw-r--r-- | webapp/sass/components/_error-bar.scss | 26 | ||||
-rw-r--r-- | webapp/sass/components/_scrollbar.scss | 8 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 1 |
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) { |