diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-06-15 08:13:17 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2016-06-15 08:13:17 -0400 |
commit | ba77aefe02159325752cfa79210f5e4b5fcef77e (patch) | |
tree | 48d41a615a07e6867a36baaa78d227a87e422348 /webapp/components/post_view | |
parent | 3f4d38f58ae086c6570bea7082f25cbdbc52c85d (diff) | |
download | chat-ba77aefe02159325752cfa79210f5e4b5fcef77e.tar.gz chat-ba77aefe02159325752cfa79210f5e4b5fcef77e.tar.bz2 chat-ba77aefe02159325752cfa79210f5e4b5fcef77e.zip |
PLT-3202 Re-render timestamps when display settings switch between 12h and 24h (#3337)
* Made post timestamp switch from 12h to 24h without refreshing
* Made RHS post timestamps switch from 12h to 24h without refreshing
Diffstat (limited to 'webapp/components/post_view')
6 files changed, 79 insertions, 7 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index d30216180..c445ad9f3 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -76,6 +76,10 @@ export default class Post extends React.Component { return true; } + if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) { + return true; + } + if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { return true; } @@ -187,6 +191,7 @@ export default class Post extends React.Component { currentUser={this.props.currentUser} compactDisplay={this.props.compactDisplay} displayNameType={this.props.displayNameType} + useMilitaryTime={this.props.useMilitaryTime} /> <PostBody post={post} @@ -219,5 +224,6 @@ Post.propTypes = { center: React.PropTypes.bool, compactDisplay: React.PropTypes.bool, previewCollapsed: React.PropTypes.string, - commentCount: React.PropTypes.number + commentCount: React.PropTypes.number, + useMilitaryTime: React.PropTypes.bool.isRequired }; diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index cc6bab852..3c94f0bcb 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -69,6 +69,7 @@ export default class PostHeader extends React.Component { sameUser={this.props.sameUser} currentUser={this.props.currentUser} compactDisplay={this.props.compactDisplay} + useMilitaryTime={this.props.useMilitaryTime} /> </li> </ul> @@ -91,5 +92,6 @@ PostHeader.propTypes = { handleCommentClick: React.PropTypes.func.isRequired, sameUser: React.PropTypes.bool.isRequired, compactDisplay: React.PropTypes.bool, - displayNameType: React.PropTypes.string + displayNameType: React.PropTypes.string, + useMilitaryTime: React.PropTypes.bool.isRequired }; diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index cc8c0a842..2a5ea6395 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -3,7 +3,7 @@ import $ from 'jquery'; import * as Utils from 'utils/utils.jsx'; -import TimeSince from 'components/time_since.jsx'; +import PostTime from './post_time.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; @@ -217,10 +217,11 @@ export default class PostInfo extends React.Component { return ( <ul className='post__header--info'> <li className='col'> - <TimeSince + <PostTime eventTime={post.create_at} sameUser={this.props.sameUser} compactDisplay={this.props.compactDisplay} + useMilitaryTime={this.props.useMilitaryTime} /> </li> <li className='col col__reply'> @@ -253,5 +254,6 @@ PostInfo.propTypes = { handleCommentClick: React.PropTypes.func.isRequired, sameUser: React.PropTypes.bool.isRequired, currentUser: React.PropTypes.object.isRequired, - compactDisplay: React.PropTypes.bool + compactDisplay: React.PropTypes.bool, + useMilitaryTime: React.PropTypes.bool.isRequired }; diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index c23f785d9..288a2d5e0 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -264,6 +264,7 @@ export default class PostList extends React.Component { commentCount={commentCount} compactDisplay={this.props.compactDisplay} previewCollapsed={this.props.previewsCollapsed} + useMilitaryTime={this.props.useMilitaryTime} /> ); @@ -525,5 +526,6 @@ PostList.propTypes = { displayPostsInCenter: React.PropTypes.bool, compactDisplay: React.PropTypes.bool, previewsCollapsed: React.PropTypes.string, + useMilitaryTime: React.PropTypes.bool.isRequired, isFocusPost: React.PropTypes.bool }; diff --git a/webapp/components/post_view/components/post_time.jsx b/webapp/components/post_view/components/post_time.jsx new file mode 100644 index 000000000..369a429a9 --- /dev/null +++ b/webapp/components/post_view/components/post_time.jsx @@ -0,0 +1,52 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import Constants from 'utils/constants.jsx'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; + +import {FormattedTime} from 'react-intl'; + +export default class PostTime extends React.Component { + constructor(props) { + super(props); + + this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); + } + + componentDidMount() { + this.intervalId = setInterval(() => { + this.forceUpdate(); + }, Constants.TIME_SINCE_UPDATE_INTERVAL); + } + + componentWillUnmount() { + clearInterval(this.intervalId); + } + + render() { + return ( + <time className='post__time'> + <FormattedTime + value={this.props.eventTime} + hour='2-digit' + minute='2-digit' + hour12={!this.props.useMilitaryTime} + /> + </time> + ); + } +} + +PostTime.defaultProps = { + eventTime: 0, + sameUser: false +}; + +PostTime.propTypes = { + eventTime: React.PropTypes.number.isRequired, + sameUser: React.PropTypes.bool, + compactDisplay: React.PropTypes.bool, + useMilitaryTime: React.PropTypes.bool.isRequired +}; diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx index e5a14af36..6d724f659 100644 --- a/webapp/components/post_view/post_view_controller.jsx +++ b/webapp/components/post_view/post_view_controller.jsx @@ -52,7 +52,8 @@ export default class PostViewController extends React.Component { 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, compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT, - previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'), + useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false) }; } @@ -80,7 +81,8 @@ export default class PostViewController extends React.Component { 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, compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT, - previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix + previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix, + useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false) }); } @@ -142,6 +144,7 @@ export default class PostViewController extends React.Component { displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT, previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'), + useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false), scrollType: ScrollTypes.NEW_MESSAGE }); } @@ -197,6 +200,10 @@ export default class PostViewController extends React.Component { return true; } + if (nextState.useMilitaryTime !== this.state.useMilitaryTime) { + return true; + } + if (nextState.lastViewed !== this.state.lastViewed) { return true; } @@ -256,6 +263,7 @@ export default class PostViewController extends React.Component { displayPostsInCenter={this.state.displayPostsInCenter} compactDisplay={this.state.compactDisplay} previewsCollapsed={this.state.previewsCollapsed} + useMilitaryTime={this.state.useMilitaryTime} lastViewed={this.state.lastViewed} /> ); |