IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Adding react scrollbar to the RHS thread (#2693)

Browse Source 
* Adding scrollbar to the RHS thread

* Fixing the RHS thread scrolling issue
This commit is contained in:
Asaad Mahmood
2016-04-13 17:33:42 +05:00
committed by Christopher Speller
parent 76c4bebf9f
commit 51549cc0b2
6 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/create_comment.jsx
View File

@@ -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) {

97
webapp/components/rhs_thread.jsx
View File

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

1
webapp/package.json
View File

@@ -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",

26
webapp/sass/components/_error-bar.scss
View File

@@ -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;
}
}
}
}

8
webapp/sass/components/_scrollbar.scss
View File

@@ -22,4 +22,10 @@ body {
scrollbar-highlight-color: #7D7E94;
scrollbar-shadow-color: #2D2C4D;
scrollbar-track-color: rgba(0, 0, 0, .1);
}
}
.scrollbar--horizontal,
.scrollbar--vertical {
@include border-radius(2px);
@include alpha-property(background-color, $black, .5);
}

1
webapp/utils/utils.jsx
View File

@@ -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) {