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

PLT-3202 Re-render timestamps when display settings switch between 12h and 24h (#3337)

Browse Source 
* Made post timestamp switch from 12h to 24h without refreshing

* Made RHS post timestamps switch from 12h to 24h without refreshing
This commit is contained in:
Harrison Healey
2016-06-15 08:13:17 -04:00
committed by Joram Wilander
parent 3f4d38f58a
commit ba77aefe02
15 changed files with 110 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/post_view/components/post.jsx
View File

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

4
webapp/components/post_view/components/post_header.jsx
View File

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

8
webapp/components/post_view/components/post_info.jsx
View File

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

2
webapp/components/post_view/components/post_list.jsx
View File

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

26
webapp/components/time_since.jsx → webapp/components/post_view/components/post_time.jsx
View File

@@ -1,42 +1,52 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Constants from 'utils/constants.jsx';
import * as Utils from 'utils/utils.jsx';
import React from 'react';
import Constants from 'utils/constants.jsx';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class TimeSince extends React.Component {
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'>
{Utils.displayTimeFormatted(this.props.eventTime)}
<FormattedTime
value={this.props.eventTime}
hour='2-digit'
minute='2-digit'
hour12={!this.props.useMilitaryTime}
/>
</time>
);
}
}
TimeSince.defaultProps = {
PostTime.defaultProps = {
eventTime: 0,
sameUser: false
};
TimeSince.propTypes = {
PostTime.propTypes = {
eventTime: React.PropTypes.number.isRequired,
sameUser: React.PropTypes.bool,
compactDisplay: React.PropTypes.bool
compactDisplay: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
};

12
webapp/components/post_view/post_view_controller.jsx
View File

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

10
webapp/components/rhs_comment.jsx
View File

@@ -38,6 +38,11 @@ export default class RhsComment extends React.Component {
if (nextProps.compactDisplay !== this.props.compactDisplay) {
return true;
}
if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
return true;
}
if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
return true;
}
@@ -231,7 +236,7 @@ export default class RhsComment extends React.Component {
day='numeric'
month='long'
year='numeric'
hour12={!Utils.isMilitaryTime()}
hour12={!this.props.useMilitaryTime}
hour='2-digit'
minute='2-digit'
/>
@@ -259,5 +264,6 @@ RhsComment.propTypes = {
post: React.PropTypes.object,
user: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object.isRequired,
compactDisplay: React.PropTypes.bool
compactDisplay: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
};

10
webapp/components/rhs_root_post.jsx
View File

@@ -35,6 +35,11 @@ export default class RhsRootPost extends React.Component {
if (nextProps.compactDisplay !== this.props.compactDisplay) {
return true;
}
if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
return true;
}
if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
return true;
}
@@ -255,7 +260,7 @@ export default class RhsRootPost extends React.Component {
day='numeric'
month='long'
year='numeric'
hour12={!Utils.isMilitaryTime()}
hour12={!this.props.useMilitaryTime}
hour='2-digit'
minute='2-digit'
/>
@@ -289,5 +294,6 @@ RhsRootPost.propTypes = {
user: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object.isRequired,
commentCount: React.PropTypes.number,
compactDisplay: React.PropTypes.bool
compactDisplay: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
};

9
webapp/components/rhs_thread.jsx
View File

@@ -112,6 +112,10 @@ export default class RhsThread extends React.Component {
return true;
}
if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
return true;
}
if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) {
return true;
}
@@ -243,6 +247,7 @@ export default class RhsThread extends React.Component {
user={profile}
currentUser={this.props.currentUser}
compactDisplay={this.state.compactDisplay}
useMilitaryTime={this.props.useMilitaryTime}
/>
<div className='post-right-comments-container'>
{postsArray.map((comPost) => {
@@ -260,6 +265,7 @@ export default class RhsThread extends React.Component {
user={p}
currentUser={this.props.currentUser}
compactDisplay={this.state.compactDisplay}
useMilitaryTime={this.props.useMilitaryTime}
/>
);
})}
@@ -286,5 +292,6 @@ RhsThread.defaultProps = {
RhsThread.propTypes = {
fromSearch: React.PropTypes.string,
isMentionSearch: React.PropTypes.bool,
currentUser: React.PropTypes.object.isRequired
currentUser: React.PropTypes.object.isRequired,
useMilitaryTime: React.PropTypes.bool.isRequired
};

4
webapp/components/search_results.jsx
View File

@@ -170,6 +170,7 @@ export default class SearchResults extends React.Component {
user={profile}
term={searchTerm}
isMentionSearch={this.props.isMentionSearch}
useMilitaryTime={this.props.useMilitaryTime}
/>
);
}, this);
@@ -193,5 +194,6 @@ export default class SearchResults extends React.Component {
}
SearchResults.propTypes = {
isMentionSearch: React.PropTypes.bool
isMentionSearch: React.PropTypes.bool,
useMilitaryTime: React.PropTypes.bool.isRequired
};

5
webapp/components/search_results_item.jsx
View File

@@ -113,7 +113,7 @@ export default class SearchResultsItem extends React.Component {
<time className='search-item-time'>
<FormattedDate
value={post.create_at}
hour12={!Utils.isMilitaryTime()}
hour12={!this.props.useMilitaryTime}
hour='2-digit'
minute='2-digit'
/>
@@ -186,5 +186,6 @@ SearchResultsItem.propTypes = {
user: React.PropTypes.object,
channel: React.PropTypes.object,
isMentionSearch: React.PropTypes.bool,
term: React.PropTypes.string
term: React.PropTypes.string,
useMilitaryTime: React.PropTypes.bool.isRequired
};

33
webapp/components/sidebar_right.jsx
View File

@@ -8,6 +8,8 @@ import RhsThread from './rhs_thread.jsx';
import SearchStore from 'stores/search_store.jsx';
import PostStore from 'stores/post_store.jsx';
import UserStore from 'stores/user_store.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
import Constants from 'utils/constants.jsx';
import * as Utils from 'utils/utils.jsx';
import React from 'react';
@@ -18,6 +20,7 @@ export default class SidebarRight extends React.Component {
this.plScrolledToBottom = true;
this.onPreferenceChange = this.onPreferenceChange.bind(this);
this.onSelectedChange = this.onSelectedChange.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
this.onUserChange = this.onUserChange.bind(this);
@@ -30,25 +33,32 @@ export default class SidebarRight extends React.Component {
isMentionSearch: SearchStore.getIsMentionSearch(),
postRightVisible: !!PostStore.getSelectedPost(),
fromSearch: false,
currentUser: UserStore.getCurrentUser()
currentUser: UserStore.getCurrentUser(),
useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false)
};
}
componentDidMount() {
SearchStore.addSearchChangeListener(this.onSearchChange);
PostStore.addSelectedPostChangeListener(this.onSelectedChange);
SearchStore.addShowSearchListener(this.onShowSearch);
UserStore.addChangeListener(this.onUserChange);
PreferenceStore.addChangeListener(this.onPreferenceChange);
this.doStrangeThings();
}
componentWillUnmount() {
SearchStore.removeSearchChangeListener(this.onSearchChange);
PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
SearchStore.removeShowSearchListener(this.onShowSearch);
UserStore.removeChangeListener(this.onUserChange);
PreferenceStore.removeChangeListener(this.onPreferenceChange);
}
shouldComponentUpdate(nextProps, nextState) {
return !Utils.areObjectsEqual(nextState, this.state);
}
componentWillUpdate(nextProps, nextState) {
const isOpen = this.state.searchVisible || this.state.postRightVisible;
const willOpen = nextState.searchVisible || nextState.postRightVisible;
@@ -57,6 +67,7 @@ export default class SidebarRight extends React.Component {
PostStore.jumpPostsViewSidebarOpen();
}
}
doStrangeThings() {
// We should have a better way to do this stuff
// Hence the function name.
@@ -81,26 +92,37 @@ export default class SidebarRight extends React.Component {
}, 500);*/
return null;
}
componentDidUpdate() {
this.doStrangeThings();
}
onPreferenceChange() {
this.setState({
useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false)
});
}
onSelectedChange(fromSearch) {
this.setState({
postRightVisible: !!PostStore.getSelectedPost(),
fromSearch
});
}
onSearchChange() {
this.setState({
searchVisible: SearchStore.getSearchResults() !== null,
isMentionSearch: SearchStore.getIsMentionSearch()
});
}
onUserChange() {
this.setState({
currentUser: UserStore.getCurrentUser()
});
}
onShowSearch() {
if (!this.state.searchVisible) {
this.setState({
@@ -108,17 +130,24 @@ export default class SidebarRight extends React.Component {
});
}
}
render() {
let content = null;
if (this.state.searchVisible) {
content = <SearchResults isMentionSearch={this.state.isMentionSearch}/>;
content = (
<SearchResults
isMentionSearch={this.state.isMentionSearch}
useMilitaryTime={this.state.useMilitaryTime}
/>
);
} else if (this.state.postRightVisible) {
content = (
<RhsThread
fromSearch={this.state.fromSearch}
isMentionSearch={this.state.isMentionSearch}
currentUser={this.state.currentUser}
useMilitaryTime={this.state.useMilitaryTime}
/>
);
}

3
webapp/components/user_settings/user_settings_security.jsx
View File

@@ -8,6 +8,7 @@ import AccessHistoryModal from '../access_history_modal.jsx';
import ActivityLogModal from '../activity_log_modal.jsx';
import ToggleModalButton from '../toggle_modal_button.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import Client from 'utils/web_client.jsx';
@@ -471,7 +472,7 @@ class SecurityTab extends React.Component {
if (this.props.user.auth_service === '') {
const d = new Date(this.props.user.last_password_update);
const hours12 = !Utils.isMilitaryTime();
const hours12 = !PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false);
describe = (
<FormattedMessage

3
webapp/utils/constants.jsx
View File

@@ -551,7 +551,8 @@ export default {
MESSAGE_DISPLAY_COMPACT: 'compact',
MESSAGE_DISPLAY_DEFAULT: 'clean',
COLLAPSE_DISPLAY: 'collapse_previews',
COLLAPSE_DISPLAY_DEFAULT: 'false'
COLLAPSE_DISPLAY_DEFAULT: 'false',
USE_MILITARY_TIME: 'use_military_time'
},
TutorialSteps: {
INTRO_SCREENS: 0,

52
webapp/utils/utils.jsx
View File

@@ -13,9 +13,7 @@ var ActionTypes = Constants.ActionTypes;
import * as AsyncClient from './async_client.jsx';
import Client from './web_client.jsx';
import React from 'react';
import {browserHistory} from 'react-router';
import {FormattedTime} from 'react-intl';
import icon50 from 'images/icon50x50.png';
import bing from 'images/bing.mp3';
@@ -225,56 +223,6 @@ export function displayTime(ticks, utc) {
return hours + ':' + minutes + ampm + timezone;
}
export function displayTimeFormatted(ticks) {
const useMilitaryTime = PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
return (
<FormattedTime
value={ticks}
hour='2-digit'
minute='2-digit'
hour12={!useMilitaryTime}
/>
);
}
export function isMilitaryTime() {
return PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
}
export function displayDateTime(ticks) {
var seconds = Math.floor((Date.now() - ticks) / 1000);
var interval = Math.floor(seconds / 3600);
if (interval > 24) {
return this.displayTime(ticks);
}
if (interval > 1) {
return interval + ' hours ago';
}
if (interval === 1) {
return interval + ' hour ago';
}
interval = Math.floor(seconds / 60);
if (interval >= 2) {
return interval + ' minutes ago';
}
if (interval >= 1) {
return '1 minute ago';
}
return 'just now';
}
export function displayCommentDateTime(ticks) {
return displayDate(ticks) + ' ' + displayTime(ticks);
}
// returns Unix timestamp in milliseconds
export function getTimestamp() {
return Date.now();