Allow to switch between default and emoji-one emoji style

web/react/components/post_body.jsx

@@ -3,6 +3,7 @@
 
 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 Constants from '../utils/constants.jsx';
 import * as TextFormatting from '../utils/text_formatting.jsx';
@@ -19,6 +20,7 @@ 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);
@@ -52,7 +54,11 @@ export default class PostBody extends React.Component {
     }
 
     parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+        twemoji.parse(ReactDOM.findDOMNode(this), {
+            className: 'emoji twemoji',
+            base: '',
+            folder: Utils.getImagePathForEmoticon()
+        });
     }
 
     componentWillMount() {
@@ -65,6 +71,7 @@ export default class PostBody extends React.Component {
         this.parseEmojis();
 
         UserStore.addChangeListener(this.handleUserChange);
+        PreferenceStore.addChangeListener(this.handlePreferenceChange);
     }
 
     componentDidUpdate() {
@@ -73,6 +80,7 @@ export default class PostBody extends React.Component {
 
     componentWillUnmount() {
         UserStore.removeChangeListener(this.handleUserChange);
+        PreferenceStore.removeChangeListener(this.handlePreferenceChange);
     }
 
     handleUserChange() {
@@ -83,6 +91,13 @@ 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

@@ -8,7 +8,6 @@ import * as TextFormatting from '../utils/text_formatting.jsx';
 import * as utils from '../utils/utils.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
 import twemoji from 'twemoji';
-import Constants from '../utils/constants.jsx';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
@@ -21,7 +20,11 @@ export default class RhsRootPost extends React.Component {
         this.state = {};
     }
     parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+        twemoji.parse(ReactDOM.findDOMNode(this), {
+            className: 'emoji twemoji',
+            base: '',
+            folder: utils.getImagePathForEmoticon()
+        });
     }
     componentDidMount() {
         this.parseEmojis();

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>
         );

web/react/stores/preference_store.jsx

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

web/react/utils/emoticons.jsx

@@ -1,6 +1,8 @@
 // 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, // ;)
@@ -133,7 +135,7 @@ export function handleEmoticons(text, tokens) {
             const alias = `MM_EMOTICON${index}`;
 
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
+                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${Utils.getImagePathForEmoticon(name)}" title="${matchText}" />`,
                 originalText: fullMatch
             });
 
@@ -154,6 +156,3 @@ export function handleEmoticons(text, tokens) {
     return output;
 }
 
-function getImagePathForEmoticon(name) {
-    return `/static/images/emoji/${name}.png`;
-}

web/react/utils/utils.jsx

@@ -1227,3 +1227,12 @@ 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,8 +36,17 @@
     }
     label {
         font-weight: 600;
+	    .emoji {
+		    margin-left: 5px;
+		    margin-right: 5px;
+	    }
     }
-    .no-padding--left {
+
+	.emojiAffiliation {
+		font-weight: normal;
+	}
+
+	.no-padding--left {
         padding-left: 0;
     }
     .padding-top {

web/static/images/emoji/default/0023-20e3.png

@@ -0,0 +1 @@
+hash.png

web/static/images/emoji/default/0030-20e3.png

@@ -0,0 +1 @@
+zero.png

web/static/images/emoji/default/0031-20e3.png

@@ -0,0 +1 @@
+one.png

web/static/images/emoji/default/0032-20e3.png

@@ -0,0 +1 @@
+two.png

web/static/images/emoji/default/0033-20e3.png

@@ -0,0 +1 @@
+three.png

web/static/images/emoji/default/0034-20e3.png

@@ -0,0 +1 @@
+four.png

web/static/images/emoji/default/0035-20e3.png

@@ -0,0 +1 @@
+five.png

web/static/images/emoji/default/0036-20e3.png

@@ -0,0 +1 @@
+six.png

web/static/images/emoji/default/0037-20e3.png

@@ -0,0 +1 @@
+seven.png

web/static/images/emoji/default/0038-20e3.png

@@ -0,0 +1 @@
+eight.png

web/static/images/emoji/default/0039-20e3.png

@@ -0,0 +1 @@
+nine.png

web/static/images/emoji/default/00a9.png

@@ -0,0 +1 @@
+copyright.png

web/static/images/emoji/default/00ae.png

@@ -0,0 +1 @@
+registered.png

web/static/images/emoji/default/1f004.png

@@ -0,0 +1 @@
+mahjong.png

web/static/images/emoji/default/1f0cf.png

@@ -0,0 +1 @@
+black_joker.png

web/static/images/emoji/default/1f170.png

@@ -0,0 +1 @@
+a.png

web/static/images/emoji/default/1f171.png

@@ -0,0 +1 @@
+b.png

web/static/images/emoji/default/1f17e.png

@@ -0,0 +1 @@
+o2.png

web/static/images/emoji/default/1f17f.png

@@ -0,0 +1 @@
+parking.png

web/static/images/emoji/default/1f18e.png

@@ -0,0 +1 @@
+ab.png

web/static/images/emoji/default/1f191.png

@@ -0,0 +1 @@
+cl.png

web/static/images/emoji/default/1f192.png

@@ -0,0 +1 @@
+cool.png

web/static/images/emoji/default/1f193.png

@@ -0,0 +1 @@
+free.png

web/static/images/emoji/default/1f194.png

@@ -0,0 +1 @@
+id.png

web/static/images/emoji/default/1f195.png

@@ -0,0 +1 @@
+new.png

web/static/images/emoji/default/1f196.png

@@ -0,0 +1 @@
+ng.png

web/static/images/emoji/default/1f197.png

@@ -0,0 +1 @@
+ok.png

web/static/images/emoji/default/1f198.png

@@ -0,0 +1 @@
+sos.png

web/static/images/emoji/default/1f199.png

@@ -0,0 +1 @@
+up.png

web/static/images/emoji/default/1f19a.png

@@ -0,0 +1 @@
+vs.png

web/static/images/emoji/default/1f1e8-1f1f3.png

@@ -0,0 +1 @@
+cn.png

web/static/images/emoji/default/1f1e9-1f1ea.png

@@ -0,0 +1 @@
+de.png

web/static/images/emoji/default/1f1ea-1f1f8.png

@@ -0,0 +1 @@
+es.png

web/static/images/emoji/default/1f1eb-1f1f7.png

@@ -0,0 +1 @@
+fr.png

web/static/images/emoji/default/1f1ec-1f1e7.png

@@ -0,0 +1 @@
+gb.png

web/static/images/emoji/default/1f1ee-1f1f9.png

@@ -0,0 +1 @@
+it.png

web/static/images/emoji/default/1f1ef-1f1f5.png

@@ -0,0 +1 @@
+jp.png

web/static/images/emoji/default/1f1f0-1f1f7.png

@@ -0,0 +1 @@
+kr.png

web/static/images/emoji/default/1f1f7-1f1fa.png

@@ -0,0 +1 @@
+ru.png

web/static/images/emoji/default/1f1fa-1f1f8.png

@@ -0,0 +1 @@
+us.png

web/static/images/emoji/default/1f201.png

@@ -0,0 +1 @@
+koko.png

web/static/images/emoji/default/1f202.png

@@ -0,0 +1 @@
+sa.png

web/static/images/emoji/default/1f21a.png

@@ -0,0 +1 @@
+u7121.png

web/static/images/emoji/default/1f22f.png

@@ -0,0 +1 @@
+u6307.png

web/static/images/emoji/default/1f232.png

@@ -0,0 +1 @@
+u7981.png

web/static/images/emoji/default/1f233.png

@@ -0,0 +1 @@
+u7a7a.png

web/static/images/emoji/default/1f234.png

@@ -0,0 +1 @@
+u5408.png

web/static/images/emoji/default/1f235.png

@@ -0,0 +1 @@
+u6e80.png

web/static/images/emoji/default/1f236.png

@@ -0,0 +1 @@
+u6709.png

web/static/images/emoji/default/1f237.png

@@ -0,0 +1 @@
+u6708.png

web/static/images/emoji/default/1f238.png

@@ -0,0 +1 @@
+u7533.png

web/static/images/emoji/default/1f239.png

@@ -0,0 +1 @@
+u5272.png

web/static/images/emoji/default/1f23a.png

@@ -0,0 +1 @@
+u55b6.png

web/static/images/emoji/default/1f250.png

@@ -0,0 +1 @@
+ideograph_advantage.png

web/static/images/emoji/default/1f251.png

@@ -0,0 +1 @@
+accept.png

web/static/images/emoji/default/1f300.png

@@ -0,0 +1 @@
+cyclone.png

web/static/images/emoji/default/1f301.png

@@ -0,0 +1 @@
+foggy.png

web/static/images/emoji/default/1f302.png

@@ -0,0 +1 @@
+closed_umbrella.png

web/static/images/emoji/default/1f304.png

@@ -0,0 +1 @@
+sunrise_over_mountains.png

web/static/images/emoji/default/1f305.png

@@ -0,0 +1 @@
+sunrise.png

web/static/images/emoji/default/1f306.png

@@ -0,0 +1 @@
+city_sunset.png

web/static/images/emoji/default/1f307.png

@@ -0,0 +1 @@
+city_sunrise.png

web/static/images/emoji/default/1f308.png

@@ -0,0 +1 @@
+rainbow.png

web/static/images/emoji/default/1f309.png

@@ -0,0 +1 @@
+bridge_at_night.png

web/static/images/emoji/default/1f30a.png

@@ -0,0 +1 @@
+ocean.png

web/static/images/emoji/default/1f30b.png

@@ -0,0 +1 @@
+volcano.png

web/static/images/emoji/default/1f30c.png

@@ -0,0 +1 @@
+milky_way.png

web/static/images/emoji/default/1f30d.png

@@ -0,0 +1 @@
+earth_africa.png

web/static/images/emoji/default/1f30e.png

@@ -0,0 +1 @@
+earth_americas.png

web/static/images/emoji/default/1f30f.png

@@ -0,0 +1 @@
+earth_asia.png

web/static/images/emoji/default/1f310.png

@@ -0,0 +1 @@
+globe_with_meridians.png

web/static/images/emoji/default/1f311.png

@@ -0,0 +1 @@
+new_moon.png

web/static/images/emoji/default/1f312.png

@@ -0,0 +1 @@
+waxing_crescent_moon.png

web/static/images/emoji/default/1f313.png

@@ -0,0 +1 @@
+first_quarter_moon.png

web/static/images/emoji/default/1f314.png

@@ -0,0 +1 @@
+waxing_gibbous_moon.png

web/static/images/emoji/default/1f315.png

@@ -0,0 +1 @@
+full_moon.png

web/static/images/emoji/default/1f316.png

@@ -0,0 +1 @@
+waning_gibbous_moon.png

web/static/images/emoji/default/1f317.png

@@ -0,0 +1 @@
+last_quarter_moon.png

web/static/images/emoji/default/1f318.png

@@ -0,0 +1 @@
+waning_crescent_moon.png

web/static/images/emoji/default/1f319.png

@@ -0,0 +1 @@
+crescent_moon.png

web/static/images/emoji/default/1f31a.png

@@ -0,0 +1 @@
+new_moon_with_face.png

web/static/images/emoji/default/1f31b.png

@@ -0,0 +1 @@
+first_quarter_moon_with_face.png

web/static/images/emoji/default/1f31c.png

@@ -0,0 +1 @@
+last_quarter_moon_with_face.png

web/static/images/emoji/default/1f31d.png

@@ -0,0 +1 @@
+full_moon_with_face.png

web/static/images/emoji/default/1f31e.png

@@ -0,0 +1 @@
+sun_with_face.png

web/static/images/emoji/default/1f31f.png

@@ -0,0 +1 @@
+star2.png

web/static/images/emoji/default/1f320.png

@@ -0,0 +1 @@
+stars.png

web/static/images/emoji/default/1f330.png

@@ -0,0 +1 @@
+chestnut.png

web/static/images/emoji/default/1f331.png

@@ -0,0 +1 @@
+seedling.png