diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 4402745e1b..5a4e8abaf9 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -12,7 +12,7 @@ const UserStore = require('../stores/user_store.jsx'); const SocketStore = require('../stores/socket_store.jsx'); const PreferenceStore = require('../stores/preference_store.jsx'); -const utils = require('../utils/utils.jsx'); +const Utils = require('../utils/utils.jsx'); const Client = require('../utils/client.jsx'); const Constants = require('../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; @@ -40,11 +40,13 @@ export default class PostList extends React.Component { this.loadFirstPosts = this.loadFirstPosts.bind(this); this.activate = this.activate.bind(this); this.deactivate = this.deactivate.bind(this); - this.resize = this.resize.bind(this); + this.handleResize = this.handleResize.bind(this); + this.resizePostList = this.resizePostList.bind(this); const state = this.getStateFromStores(props.channelId); state.numToDisplay = Constants.POST_CHUNK_SIZE; state.isFirstLoadComplete = false; + state.windowHeight = Utils.windowHeight(); this.state = state; } @@ -115,12 +117,7 @@ export default class PostList extends React.Component { const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); - $(window).resize(() => { - this.resize(); - if (!this.scrolled) { - this.scrollToBottom(); - } - }); + window.addEventListener('resize', this.handleResize); postHolder.on('scroll', () => { const position = postHolder.scrollTop() + postHolder.height() + 14; @@ -154,7 +151,7 @@ export default class PostList extends React.Component { this.loadFirstPosts(this.props.channelId); } - this.resize(); + this.handleResize(); this.onChange(); this.scrollToBottom(); } @@ -164,7 +161,9 @@ export default class PostList extends React.Component { SocketStore.removeChangeListener(this.onSocketChange); PreferenceStore.removeChangeListener(this.onTimeChange); $('body').off('click.userpopover'); - $(window).off('resize'); + + window.removeEventListener('resize', this.handleResize); + var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); postHolder.off('scroll'); } @@ -202,7 +201,7 @@ export default class PostList extends React.Component { // it's by the user and not a comment } else if (isNewPost && userId === firstPost.user_id && - !utils.isComment(firstPost)) { + !Utils.isComment(firstPost)) { this.scrollToBottom(true); // the user clicked 'load more messages' @@ -219,6 +218,10 @@ export default class PostList extends React.Component { } else { this.scrollTo(this.prevScrollTop); } + + if (prevState.windowHeight !== this.state.windowHeight) { + this.handleResize(); + } } componentWillUpdate() { var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); @@ -231,10 +234,20 @@ export default class PostList extends React.Component { this.deactivate(); } } - resize() { + handleResize() { + this.setState({ + windowHeight: Utils.windowHeight() + }); + + this.resizePostList(); + if (!this.scrolled) { + this.scrollToBottom(); + } + } + resizePostList() { const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); if ($('#create_post').length > 0) { - const height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50; + const height = this.state.windowHeight - $('#create_post').height() - $('#error_bar').outerHeight() - 50; postHolder.css('height', height + 'px'); } } @@ -280,7 +293,7 @@ export default class PostList extends React.Component { onChange() { var newState = this.getStateFromStores(this.props.channelId); - if (!utils.areStatesEqual(newState.postList, this.state.postList)) { + if (!Utils.areStatesEqual(newState.postList, this.state.postList)) { this.setState(newState); } } @@ -310,7 +323,7 @@ export default class PostList extends React.Component { } } createDMIntroMessage(channel) { - var teammate = utils.getDirectTeammate(channel.id); + var teammate = Utils.getDirectTeammate(channel.id); if (teammate) { var teammateName = teammate.username; @@ -370,13 +383,13 @@ export default class PostList extends React.Component { createDefaultIntroMessage(channel) { return (
- Welcome to {channel.display_name}!
+ {'Welcome to ' + channel.display_name + '!'}
- This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.
+ {'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
- To create a new channel or join an existing one, go to the Left Sidebar under “Channels” and click “More…”.
+ {'To create a new channel or join an existing one, go to the Left Sidebar under “Channels” and click “More…”.'}
{'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
@@ -399,7 +412,7 @@ export default class PostList extends React.Component {
data-title={channel.display_name}
data-channelid={channel.id}
>
- Set a description
+ {'Set a description'}
- Invite others to this channel
+ {'Invite others to this channel'}
{createMessage} {memberMessage} @@ -465,7 +478,7 @@ export default class PostList extends React.Component { data-title={channel.display_name} data-channelid={channel.id} > - Set a description + {'Set a description'} - Invite others to this {uiType} + {'Invite others to this ' + uiType}
Beginning of Channel
; + var moreMessages ={'Beginning of Channel'}
; if (channel != null) { if (order.length >= this.state.numToDisplay) { moreMessages = ( @@ -648,7 +661,7 @@ export default class PostList extends React.Component { href='#' onClick={this.loadMorePosts} > - Load more messages + {'Load more messages'} ); } else {