diff options
Diffstat (limited to 'webapp/components/post_view')
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 9 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_list.jsx | 35 | ||||
-rw-r--r-- | webapp/components/post_view/post_view_controller.jsx | 14 |
3 files changed, 50 insertions, 8 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 21d335a51..ff443e355 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -10,6 +10,7 @@ const ActionTypes = Constants.ActionTypes; import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; import AppDispatcher from 'dispatcher/app_dispatcher.jsx'; +import * as PostActions from 'actions/post_actions.jsx'; import React from 'react'; @@ -20,6 +21,7 @@ export default class Post extends React.Component { this.handleCommentClick = this.handleCommentClick.bind(this); this.handleDropdownOpened = this.handleDropdownOpened.bind(this); this.forceUpdateInfo = this.forceUpdateInfo.bind(this); + this.handlePostClick = this.handlePostClick.bind(this); this.state = { dropdownOpened: false @@ -47,6 +49,12 @@ export default class Post extends React.Component { this.refs.info.forceUpdate(); this.refs.header.forceUpdate(); } + handlePostClick(e) { + if (e.altKey) { + e.preventDefault(); + PostActions.setUnreadPost(this.props.post.channel_id, this.props.post.id); + } + } shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; @@ -213,6 +221,7 @@ export default class Post extends React.Component { <div id={'post_' + post.id} className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls + ' ' + dropdownOpenedClass} + onClick={this.handlePostClick} > <div className={'post__content ' + centerClass}> {profilePicContainer} diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 17e29da2e..70107c838 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -15,14 +15,20 @@ import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; +import * as ChannelActions from 'actions/channel_actions.jsx'; + import Constants from 'utils/constants.jsx'; const ScrollTypes = Constants.ScrollTypes; +import PreferenceStore from 'stores/preference_store.jsx'; + import {FormattedDate, FormattedMessage} from 'react-intl'; import React from 'react'; import ReactDOM from 'react-dom'; +const Preferences = Constants.Preferences; + export default class PostList extends React.Component { constructor(props) { super(props); @@ -37,6 +43,7 @@ export default class PostList extends React.Component { this.handleResize = this.handleResize.bind(this); this.scrollToBottom = this.scrollToBottom.bind(this); this.scrollToBottomAnimated = this.scrollToBottomAnimated.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); this.jumpToPostNode = null; this.wasAtBottom = true; @@ -44,16 +51,24 @@ export default class PostList extends React.Component { this.scrollStopAction = new DelayedAction(this.handleScrollStop); + this.state = { + isScrolling: false, + fullWidthIntro: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, + topPostId: null + }; + if (props.channel) { - this.introText = createChannelIntroMessage(props.channel); + this.introText = createChannelIntroMessage(props.channel, this.state.fullWidthIntro); } else { this.introText = this.getArchivesIntroMessage(); } + } - this.state = { - isScrolling: false, - topPostId: null - }; + handleKeyDown(e) { + if (e.which === Constants.KeyCodes.ESCAPE && $('.popover.in,.modal.in').length === 0) { + e.preventDefault(); + ChannelActions.setChannelAsRead(); + } } isAtBottom() { @@ -292,7 +307,7 @@ export default class PostList extends React.Component { ); } - if (postUserId !== userId && + if ((postUserId !== userId || this.props.ownNewMessage) && this.props.lastViewed !== 0 && post.create_at > this.props.lastViewed && !renderedLastViewed) { @@ -395,7 +410,7 @@ export default class PostList extends React.Component { getArchivesIntroMessage() { return ( - <div className='channel-intro'> + <div className={'channel-intro'}> <h4 className='channel-intro__title'> <FormattedMessage id='post_focus_view.beginning' @@ -412,10 +427,12 @@ export default class PostList extends React.Component { } window.addEventListener('resize', this.handleResize); + window.addEventListener('keydown', this.handleKeyDown); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); + window.removeEventListener('keydown', this.handleKeyDown); this.scrollStopAction.cancel(); } @@ -510,7 +527,8 @@ export default class PostList extends React.Component { } PostList.defaultProps = { - lastViewed: 0 + lastViewed: 0, + ownNewMessage: false }; PostList.propTypes = { @@ -524,6 +542,7 @@ PostList.propTypes = { showMoreMessagesTop: React.PropTypes.bool, showMoreMessagesBottom: React.PropTypes.bool, lastViewed: React.PropTypes.number, + ownNewMessage: React.PropTypes.bool, postsToHighlight: React.PropTypes.object, displayNameType: React.PropTypes.string, displayPostsInCenter: React.PropTypes.bool, diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx index e5743e657..a7583fa38 100644 --- a/webapp/components/post_view/post_view_controller.jsx +++ b/webapp/components/post_view/post_view_controller.jsx @@ -27,6 +27,7 @@ export default class PostViewController extends React.Component { this.onPostsChange = this.onPostsChange.bind(this); this.onEmojisChange = this.onEmojisChange.bind(this); this.onPostsViewJumpRequest = this.onPostsViewJumpRequest.bind(this); + this.onSetNewMessageIndicator = this.onSetNewMessageIndicator.bind(this); this.onPostListScroll = this.onPostListScroll.bind(this); this.onActivate = this.onActivate.bind(this); this.onDeactivate = this.onDeactivate.bind(this); @@ -50,6 +51,7 @@ export default class PostViewController extends React.Component { profiles, atTop: PostStore.getVisibilityAtTop(channel.id), lastViewed, + ownNewMessage: false, scrollType: ScrollTypes.NEW_MESSAGE, displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, @@ -117,6 +119,7 @@ export default class PostViewController extends React.Component { PostStore.addChangeListener(this.onPostsChange); PostStore.addPostsViewJumpListener(this.onPostsViewJumpRequest); EmojiStore.addChangeListener(this.onEmojisChange); + ChannelStore.addLastViewedListener(this.onSetNewMessageIndicator); } onDeactivate() { @@ -125,6 +128,7 @@ export default class PostViewController extends React.Component { PostStore.removeChangeListener(this.onPostsChange); PostStore.removePostsViewJumpListener(this.onPostsViewJumpRequest); EmojiStore.removeChangeListener(this.onEmojisChange); + ChannelStore.removeLastViewedListener(this.onSetNewMessageIndicator); } componentWillReceiveProps(nextProps) { @@ -149,6 +153,7 @@ export default class PostViewController extends React.Component { this.setState({ channel, lastViewed, + ownNewMessage: false, profiles: JSON.parse(JSON.stringify(profiles)), postList: JSON.parse(JSON.stringify(PostStore.getVisiblePosts(channel.id))), displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), @@ -178,6 +183,10 @@ export default class PostViewController extends React.Component { } } + onSetNewMessageIndicator(lastViewed, ownNewMessage) { + this.setState({lastViewed, ownNewMessage}); + } + onPostListScroll(atBottom) { if (atBottom) { this.setState({scrollType: ScrollTypes.BOTTOM}); @@ -219,6 +228,10 @@ export default class PostViewController extends React.Component { return true; } + if (nextState.ownNewMessage !== this.state.ownNewMessage) { + return true; + } + if (nextState.showMoreMessagesTop !== this.state.showMoreMessagesTop) { return true; } @@ -281,6 +294,7 @@ export default class PostViewController extends React.Component { useMilitaryTime={this.state.useMilitaryTime} lastViewed={this.state.lastViewed} emojis={this.state.emojis} + ownNewMessage={this.state.ownNewMessage} /> ); } |