Merge pull request #1554 from florianorben/emoji_style

Allow to switch between default and emoji-one emoji style

web/react/components/post_body.jsx

@@ -4,6 +4,7 @@
 import FileAttachmentList from './file_attachment_list.jsx';
 import UserStore from '../stores/user_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';
@@ -52,7 +53,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: Emoji.getImagePathForEmoticon()
+        });
     }
 
     componentWillMount() {

web/react/components/rhs_root_post.jsx

@@ -6,9 +6,9 @@ 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 Constants from '../utils/constants.jsx';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
@@ -21,7 +21,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: Emoji.getImagePathForEmoticon()
+        });
     }
     componentDidMount() {
         this.parseEmojis();

web/react/utils/emoticons.jsx

@@ -154,6 +154,9 @@ export function handleEmoticons(text, tokens) {
     return output;
 }
 
-function getImagePathForEmoticon(name) {
-    return `/static/images/emoji/${name}.png`;
-}
+export function getImagePathForEmoticon(name) {
+    if (name) {
+        return `/static/images/emoji/${name}.png`;
+    }
+    return `/static/images/emoji`;
+}

web/react/utils/utils.jsx

@@ -1238,4 +1238,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';
-}
+}

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

@@ -37,7 +37,8 @@
     label {
         font-weight: 600;
     }
-    .no-padding--left {
+
+	.no-padding--left {
         padding-left: 0;
     }
     .padding-top {