Merge pull request #1054 from stasvovk/PLT-637

PLT-638: added display tab under account settings. added 24h time option

web/react/components/post_list.jsx

@@ -4,6 +4,7 @@
 var PostStore = require('../stores/post_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var PreferenceStore = require('../stores/preference_store.jsx');
 var UserProfile = require('./user_profile.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var Post = require('./post.jsx');
@@ -105,6 +106,7 @@ export default class PostList extends React.Component {
         PostStore.clearUnseenDeletedPosts(this.props.channelId);
         PostStore.addChangeListener(this.onChange);
         UserStore.addStatusesChangeListener(this.onTimeChange);
+        PreferenceStore.addChangeListener(this.onTimeChange);
         SocketStore.addChangeListener(this.onSocketChange);
 
         const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
@@ -156,6 +158,7 @@ export default class PostList extends React.Component {
         PostStore.removeChangeListener(this.onChange);
         UserStore.removeStatusesChangeListener(this.onTimeChange);
         SocketStore.removeChangeListener(this.onSocketChange);
+        PreferenceStore.removeChangeListener(this.onTimeChange);
         $('body').off('click.userpopover');
         $(window).off('resize');
         var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));

web/react/components/rhs_thread.jsx

@@ -3,6 +3,7 @@
 
 var PostStore = require('../stores/post_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var PreferenceStore = require('../stores/preference_store.jsx');
 var utils = require('../utils/utils.jsx');
 var SearchBox = require('./search_bar.jsx');
 var CreateComment = require('./create_comment.jsx');
@@ -18,6 +19,7 @@ export default class RhsThread extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.onChangeAll = this.onChangeAll.bind(this);
+        this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
 
         this.state = this.getStateFromStores();
     }
@@ -43,6 +45,7 @@ export default class RhsThread extends React.Component {
     componentDidMount() {
         PostStore.addSelectedPostChangeListener(this.onChange);
         PostStore.addChangeListener(this.onChangeAll);
+        PreferenceStore.addChangeListener(this.forceUpdateInfo);
         this.resize();
         $(window).resize(function resize() {
             this.resize();
@@ -57,6 +60,16 @@ export default class RhsThread extends React.Component {
     componentWillUnmount() {
         PostStore.removeSelectedPostChangeListener(this.onChange);
         PostStore.removeChangeListener(this.onChangeAll);
+        PreferenceStore.removeChangeListener(this.forceUpdateInfo);
+    }
+    forceUpdateInfo() {
+        if (this.state.postList) {
+            for (var postId in this.state.postList.posts) {
+                if (this.refs[postId]) {
+                    this.refs[postId].forceUpdate();
+                }
+            }
+        }
     }
     onChange() {
         var newState = this.getStateFromStores();
@@ -174,6 +187,7 @@ export default class RhsThread extends React.Component {
                     />
                     <div className='post-right__scroll'>
                         <RootPost
+                            ref={rootPost.id}
                             post={rootPost}
                             commentCount={postsArray.length}
                         />

web/react/components/user_settings/user_settings.jsx

@@ -9,6 +9,7 @@ var GeneralTab = require('./user_settings_general.jsx');
 var AppearanceTab = require('./user_settings_appearance.jsx');
 var DeveloperTab = require('./user_settings_developer.jsx');
 var IntegrationsTab = require('./user_settings_integrations.jsx');
+var DisplayTab = require('./user_settings_display.jsx');
 
 export default class UserSettings extends React.Component {
     constructor(props) {
@@ -98,6 +99,17 @@ export default class UserSettings extends React.Component {
                     />
                 </div>
             );
+        } else if (this.props.activeTab === 'display') {
+            return (
+                <div>
+                    <DisplayTab
+                        user={this.state.user}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
+                    />
+                </div>
+            );
         }
 
         return <div/>;

web/react/components/user_settings/user_settings_display.jsx

@@ -0,0 +1,168 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import { savePreferences } from '../../utils/client.jsx';
+import SettingItemMin from '../setting_item_min.jsx';
+import SettingItemMax from '../setting_item_max.jsx';
+import Constants from '../../utils/constants.jsx';
+import PreferenceStore from '../../stores/preference_store.jsx';
+
+function getDisplayStateFromStores() {
+    const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'});
+
+    return {militaryTime: militaryTime.value};
+}
+
+export default class UserSettingsDisplay extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleClockRadio = this.handleClockRadio.bind(this);
+        this.updateSection = this.updateSection.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+
+        this.state = getDisplayStateFromStores();
+    }
+    handleSubmit() {
+        const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime);
+
+        savePreferences([preference],
+            () => {
+                PreferenceStore.emitChange();
+                this.updateSection('');
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+    handleClockRadio(militaryTime) {
+        this.setState({militaryTime: militaryTime});
+    }
+    updateSection(section) {
+        this.setState(getDisplayStateFromStores());
+        this.props.updateSection(section);
+    }
+    handleClose() {
+        this.updateSection('');
+    }
+    componentDidMount() {
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
+    }
+    componentWillUnmount() {
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
+    }
+    render() {
+        const serverError = this.state.serverError || null;
+        let clockSection;
+        if (this.props.activeSection === 'clock') {
+            let clockFormat = [false, false];
+            if (this.state.militaryTime === 'true') {
+                clockFormat[1] = true;
+            } else {
+                clockFormat[0] = true;
+            }
+
+            const handleUpdateClockSection = (e) => {
+                this.updateSection('');
+                e.preventDefault();
+            };
+
+            const inputs = [
+                <div key='userDisplayClockOptions'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={clockFormat[0]}
+                                onChange={this.handleClockRadio.bind(this, 'false')}
+                            >
+                                12-hour clock (example: 4:00 PM)
+                            </input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={clockFormat[1]}
+                                onChange={this.handleClockRadio.bind(this, 'true')}
+                            >
+                                24-hour clock (example: 16:00)
+                            </input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div><br/>{'Select how you prefer time displayed.'}</div>
+                </div>
+            ];
+
+
+            clockSection = (
+                <SettingItemMax
+                    title='Clock Display'
+                    inputs={inputs}
+                    submit={this.handleSubmit}
+                    server_error={serverError}
+                    updateSection={handleUpdateClockSection}
+                />
+            );
+        } else {
+            let describe = '';
+            if (this.state.militaryTime === 'true') {
+                describe = '24-hour clock (example: 16:00)';
+            } else {
+                describe = '12-hour clock (example: 4:00 PM)';
+            }
+
+            const handleUpdateClockSection = () => {
+                this.props.updateSection('clock');
+            };
+
+            clockSection = (
+                <SettingItemMin
+                    title='Clock Display'
+                    describe={describe}
+                    updateSection={handleUpdateClockSection}
+                />
+            );
+        }
+
+        return (
+            <div>
+                <div className='modal-header'>
+                    <button
+                        type='button'
+                        className='close'
+                        data-dismiss='modal'
+                        aria-label='Close'
+                        >
+                        <span aria-hidden='true'>{'×'}</span>
+                    </button>
+                    <h4
+                        className='modal-title'
+                        ref='title'
+                        >
+                        <i className='modal-back'></i>
+                        {'Display Settings'}
+                    </h4>
+                </div>
+                <div className='user-settings'>
+                    <h3 className='tab-header'>{'Display Settings'}</h3>
+                    <div className='divider-dark first'/>
+                    {clockSection}
+                    <div className='divider-dark'/>
+                </div>
+            </div>
+        );
+    }
+}
+
+UserSettingsDisplay.propTypes = {
+    user: React.PropTypes.object,
+    updateSection: React.PropTypes.func,
+    updateTab: React.PropTypes.func,
+    activeSection: React.PropTypes.string
+};

web/react/components/user_settings/user_settings_modal.jsx

@@ -41,6 +41,7 @@ export default class UserSettingsModal extends React.Component {
         if (global.window.config.EnableIncomingWebhooks === 'true') {
             tabs.push({name: 'integrations', uiName: 'Integrations', icon: 'glyphicon glyphicon-transfer'});
         }
+        tabs.push({name: 'display', uiName: 'Display', icon: 'glyphicon glyphicon-eye-open'});
 
         return (
             <div

web/react/utils/constants.jsx

@@ -289,7 +289,8 @@ module.exports = {
         }
     ],
     Preferences: {
-        CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show'
+        CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
+        CATEGORY_DISPLAY_SETTINGS: 'display_settings'
     },
     KeyCodes: {
         UP: 38,

web/react/utils/utils.jsx

@@ -4,6 +4,7 @@
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var PreferenceStore = require('../stores/preference_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
@@ -164,23 +165,29 @@ export function displayDate(ticks) {
 }
 
 export function displayTime(ticks) {
-    var d = new Date(ticks);
-    var hours = d.getHours();
-    var minutes = d.getMinutes();
+    const d = new Date(ticks);
+    let hours = d.getHours();
+    let minutes = d.getMinutes();
+    let ampm = '';
 
-    var ampm = 'AM';
-    if (hours >= 12) {
-        ampm = 'PM';
-    }
-
-    hours = hours % 12;
-    if (!hours) {
-        hours = '12';
-    }
     if (minutes <= 9) {
         minutes = '0' + minutes;
     }
-    return hours + ':' + minutes + ' ' + ampm;
+
+    const useMilitaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'}).value;
+    if (useMilitaryTime === 'false') {
+        ampm = ' AM';
+        if (hours >= 12) {
+            ampm = ' PM';
+        }
+
+        hours = hours % 12;
+        if (!hours) {
+            hours = '12';
+        }
+    }
+
+    return hours + ':' + minutes + ampm;
 }
 
 export function displayDateTime(ticks) {