switch to only use emoji one smileys; remove setting to switch

web/react/components/post_body.jsx

@@ -3,8 +3,8 @@
 
 import FileAttachmentList from './file_attachment_list.jsx';
 import UserStore from '../stores/user_store.jsx';
-import PreferenceStore from '../stores/preference_store.jsx';
 import * as Utils from '../utils/utils.jsx';
+import * as Emoji from '../utils/emoticons.jsx';
 import Constants from '../utils/constants.jsx';
 import * as TextFormatting from '../utils/text_formatting.jsx';
 import twemoji from 'twemoji';
@@ -20,7 +20,6 @@ export default class PostBody extends React.Component {
         this.isImgLoading = false;
 
         this.handleUserChange = this.handleUserChange.bind(this);
-        this.handlePreferenceChange = this.handlePreferenceChange.bind(this);
         this.parseEmojis = this.parseEmojis.bind(this);
         this.createEmbed = this.createEmbed.bind(this);
         this.createImageEmbed = this.createImageEmbed.bind(this);
@@ -57,7 +56,7 @@ export default class PostBody extends React.Component {
         twemoji.parse(ReactDOM.findDOMNode(this), {
             className: 'emoji twemoji',
             base: '',
-            folder: Utils.getImagePathForEmoticon()
+            folder: Emoji.getImagePathForEmoticon()
         });
     }
 
@@ -71,7 +70,6 @@ export default class PostBody extends React.Component {
         this.parseEmojis();
 
         UserStore.addChangeListener(this.handleUserChange);
-        PreferenceStore.addChangeListener(this.handlePreferenceChange);
     }
 
     componentDidUpdate() {
@@ -80,7 +78,6 @@ export default class PostBody extends React.Component {
 
     componentWillUnmount() {
         UserStore.removeChangeListener(this.handleUserChange);
-        PreferenceStore.removeChangeListener(this.handlePreferenceChange);
     }
 
     handleUserChange() {
@@ -91,13 +88,6 @@ export default class PostBody extends React.Component {
         }
     }
 
-    handlePreferenceChange() {
-        $('.twemoji').each((idx, elem) => {
-            elem.src = Utils.getImagePathForEmoticon(twemoji.convert.toCodePoint(elem.alt));
-        });
-        this.forceUpdate();
-    }
-
     componentWillReceiveProps(nextProps) {
         const linkData = Utils.extractLinks(nextProps.post.message);
         if (this.props.post.filenames.length === 0 && this.state.links && this.state.links.length > 0) {

web/react/components/rhs_root_post.jsx

@@ -6,6 +6,7 @@ import UserProfile from './user_profile.jsx';
 import UserStore from '../stores/user_store.jsx';
 import * as TextFormatting from '../utils/text_formatting.jsx';
 import * as utils from '../utils/utils.jsx';
+import * as Emoji from '../utils/emoticons.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
 import twemoji from 'twemoji';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
@@ -23,7 +24,7 @@ export default class RhsRootPost extends React.Component {
         twemoji.parse(ReactDOM.findDOMNode(this), {
             className: 'emoji twemoji',
             base: '',
-            folder: utils.getImagePathForEmoticon()
+            folder: Emoji.getImagePathForEmoticon()
         });
     }
     componentDidMount() {

web/react/components/user_settings/user_settings_display.jsx

@@ -6,17 +6,14 @@ 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,
-        emojiStyle: emojiStyle.value
+        nameFormat: nameFormat.value
     };
 }
 
@@ -34,9 +31,8 @@ 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, emojiStyle],
+        savePreferences([timePreference, namePreference],
             () => {
                 PreferenceStore.emitChange();
                 this.updateSection('');
@@ -52,9 +48,6 @@ 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);
@@ -63,7 +56,6 @@ 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') {
@@ -217,77 +209,6 @@ 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'>
@@ -318,8 +239,6 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
-                    {emojiSection}
-                    <div className='divider-dark'/>
                 </div>
             </div>
         );

web/react/stores/preference_store.jsx

@@ -122,6 +122,5 @@ class PreferenceStoreClass extends EventEmitter {
 }
 
 const PreferenceStore = new PreferenceStoreClass();
-PreferenceStore.setMaxListeners(0);
 export default PreferenceStore;
 window.PreferenceStore = PreferenceStore;

web/react/utils/emoticons.jsx

@@ -1,8 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as Utils from './utils.jsx';
-
 const emoticonPatterns = {
     smile: /(^|\s)(:-?\))(?=$|\s)/g, // :)
     wink: /(^|\s)(;-?\))(?=$|\s)/g, // ;)
@@ -135,7 +133,7 @@ export function handleEmoticons(text, tokens) {
             const alias = `MM_EMOTICON${index}`;
 
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${Utils.getImagePathForEmoticon(name)}" title="${matchText}" />`,
+                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
                 originalText: fullMatch
             });
 
@@ -156,3 +154,9 @@ export function handleEmoticons(text, tokens) {
     return output;
 }
 
+export function getImagePathForEmoticon(name) {
+    if (name) {
+        return `/static/images/emoji/${name}.png`;
+    }
+    return `/static/images/emoji`;
+}

web/react/utils/utils.jsx

@@ -1226,13 +1226,4 @@ export function getPostTerm(post) {
 
 export function isFeatureEnabled(feature) {
     return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true';
-}
-
-export function getImagePathForEmoticon(name, style) {
-    const emojiStyle = style || PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'emoji_style', {value: 'default'}).value;
-
-    if (name) {
-        return `/static/images/emoji/${emojiStyle}/${name}.png`;
-    }
-    return `/static/images/emoji/${emojiStyle}`;
 }

web/sass-files/sass/partials/_settings.scss

@@ -36,16 +36,8 @@
     }
     label {
         font-weight: 600;
-	    .emoji {
-		    margin-left: 5px;
-		    margin-right: 5px;
-	    }
     }
 
-	.emojiAffiliation {
-		font-weight: normal;
-	}
-
 	.no-padding--left {
         padding-left: 0;
     }