1 files changed, 83 insertions, 2 deletions

diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index 43c8d33d1..c83b74e62 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -6,14 +6,17 @@ 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';
+import * as Utils from '../../utils/utils.jsx';
 
 function getDisplayStateFromStores() {
     const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'});
     const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'username'});
+    const emojiStyle = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'emoji_style', {value: 'default'});
 
     return {
         militaryTime: militaryTime.value,
-        nameFormat: nameFormat.value
+        nameFormat: nameFormat.value,
+        emojiStyle: emojiStyle.value
     };
 }
 
@@ -31,8 +34,9 @@ export default class UserSettingsDisplay extends React.Component {
     handleSubmit() {
         const timePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime);
         const namePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', this.state.nameFormat);
+        const emojiStyle = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'emoji_style', this.state.emojiStyle);
 
-        savePreferences([timePreference, namePreference],
+        savePreferences([timePreference, namePreference, emojiStyle],
             () => {
                 PreferenceStore.emitChange();
                 this.updateSection('');
@@ -48,6 +52,9 @@ export default class UserSettingsDisplay extends React.Component {
     handleNameRadio(nameFormat) {
         this.setState({nameFormat});
     }
+    handleEmojiRadio(emojiStyle) {
+        this.setState({emojiStyle});
+    }
     updateSection(section) {
         this.setState(getDisplayStateFromStores());
         this.props.updateSection(section);
@@ -56,6 +63,7 @@ export default class UserSettingsDisplay extends React.Component {
         const serverError = this.state.serverError || null;
         let clockSection;
         let nameFormatSection;
+        let emojiSection;
         if (this.props.activeSection === 'clock') {
             const clockFormat = [false, false];
             if (this.state.militaryTime === 'true') {
@@ -209,6 +217,77 @@ export default class UserSettingsDisplay extends React.Component {
             );
         }
 
+        if (this.props.activeSection === 'emoji') {
+            const inputs = [
+                <div key='userDisplayClockOptions'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={this.state.emojiStyle === 'default'}
+                                onChange={this.handleEmojiRadio.bind(this, 'default')}
+                            />
+                            {'Default Style'}
+                            <img
+                                className='emoji'
+                                src={Utils.getImagePathForEmoticon('smile', 'default')}
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={this.state.emojiStyle === 'emojione'}
+                                onChange={this.handleEmojiRadio.bind(this, 'emojione')}
+                            />
+                            {'Emoji One Style'}
+                            <img
+                                className='emoji'
+                                src={Utils.getImagePathForEmoticon('smile', 'emojione')}
+                            />
+                            <span className='emojiAffiliation'>
+                                {'Emoji provided free by '}
+                                <a
+                                    href='http://emojione.com/'
+                                    target='blank'
+                                >
+                                    {'Emoji One'}
+                                </a>
+                            </span>
+                        </label>
+                        <br/>
+                    </div>
+                    <div><br/>{'Select how you prefer time displayed.'}</div>
+                </div>
+            ];
+
+            emojiSection = (
+                <SettingItemMax
+                    title='Emoji Style'
+                    inputs={inputs}
+                    submit={this.handleSubmit}
+                    server_error={serverError}
+                    updateSection={(e) => {
+                        this.updateSection('');
+                        e.preventDefault();
+                    }}
+                />
+            );
+        } else {
+            const describe = this.state.emojiStyle === 'default' ? 'Default Style' : 'Emoji One Style';
+            emojiSection = (
+                <SettingItemMin
+                    title='Emoji Style'
+                    describe={describe}
+                    updateSection={() => {
+                        this.props.updateSection('emoji');
+                    }}
+                />
+            );
+        }
+
         return (
             <div>
                 <div className='modal-header'>
@@ -239,6 +318,8 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
+                    {emojiSection}
+                    <div className='divider-dark'/>
                 </div>
             </div>
         );