Ticket 4665 - Emoji Picker (#5157)

*  #4665  Added EmojiPicker

Work primarily by @broernr-de and @harrison on pre-release.mattermost.com

* Final fixes to handle custom emojis from internal review and single merge error

* ESLint fixes

* CSS changes and other code to support emoji picker in reply window

* Fix for file upload and emoji picker icon positions on post and comment.

RHS emoji picker appearing see-through at this time.

* Fix for two ESLint issues.

* covered most of feedback:
RHS emoji picker looks correct color-wise
RHS emoji picker dynamically positions against height of thread size (post + reply messages)
escape closes emoji window
search box focused on open

ESLint fixes against other files
oversized emoji preview fixes

* Adding in 'outside click' eventing to dismiss the emoji window

* Changing some formatting to fix mismatch between my local eslant rules and jenkins.

* adding alternative import method due to downstream testing errors

* yet another attempt to retain functionality and pass tests - skipping import of browser store

* fix for feedback items 5 and 7:
* move search to float on top with stylistic changes
* whitespace in the header (+1 squashed commit)
Squashed commits:
[6a26d32] changes that address items
1, 2, 6, 8, and 9 of latest feedback

* Fix for attachment preview location on mobile

* Fix for latest rounds of feedback

* fixing eslint issue

* making emojipicker sprite based, fixing alignments

* Fix for emoji quality, fixing some behavior (hover background and cursor settings)
undoing config changes

* Preview feature for emojis

* Adjustments to config file, and changing layout/design of attachment and emoji icon.

* manual revert from master branch for config.json

* reverting paperclip and fixing alignments.  Additionally fixing inadvertent display of picker on mobile.

* CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working

* Made suggested changes by jwilander except for jQuery removal

* Adding hover for both icons

* removal of some usages of jQuery

* Fix for two layout issues on IE11/Edge

* UI improvements for emoji picker

* Fix for many minor display issues

* fix for additional appearance items

* fix to two minor UI items

* A little extra padding for IE11

* fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error

* fixes some display issues on firefox

* fix for uneven sides of emojis

* fix for eslint issues that I didn't introduce

* fix for missing bottom edge of RHS emojipicker.  also fixing text overlapping icons on text area (including RHS)

* Update "emoji selector" to "emoji picker"

* changes for code review
- removal of ..getDOMNode
- use sprite imagery for emoji preview
- remove lastBlurAt from state as it wasn't used

* fixes for:
- fake custom emoji preview in picker
- RHS scrollbar on preview

* fix for minor alignment of preview emoji

webapp/actions/post_actions.jsx

@@ -417,6 +417,13 @@ export function removePostFromStore(post) {
     PostStore.emitChange();
 }
 
+export function emitEmojiPosted(emoji) {
+    AppDispatcher.handleServerAction({
+        type: ActionTypes.EMOJI_POSTED,
+        alias: emoji
+    });
+}
+
 export function deletePost(channelId, post, success, error) {
     Client.deletePost(
         channelId,

webapp/components/autosize_textarea.jsx

@@ -62,6 +62,7 @@ export default class AutosizeTextarea extends React.Component {
         const {
             value,
             placeholder,
+            id,
             ...otherProps
         } = props;
 
@@ -77,12 +78,14 @@ export default class AutosizeTextarea extends React.Component {
             <div>
                 <textarea
                     ref='textarea'
+                    id={id + '-textarea'}
                     {...heightProps}
                     {...props}
                 />
                 <div style={{height: 0, overflow: 'hidden'}}>
                     <textarea
                         ref='reference'
+                        id={id + '-reference'}
                         style={{height: 'auto', width: '100%'}}
                         disabled={true}
                         value={value}

webapp/components/create_comment.jsx

@@ -15,6 +15,7 @@ import Textbox from './textbox.jsx';
 import MsgTyping from './msg_typing.jsx';
 import FileUpload from './file_upload.jsx';
 import FilePreview from './file_preview.jsx';
+import EmojiPicker from './emoji_picker/emoji_picker.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -28,8 +29,7 @@ import {browserHistory} from 'react-router/es6';
 const ActionTypes = Constants.ActionTypes;
 const KeyCodes = Constants.KeyCodes;
 
-import {REACTION_PATTERN} from './create_post.jsx';
+import {REACTION_PATTERN, EMOJI_PATTERN} from './create_post.jsx';
-
 import React from 'react';
 
 export default class CreateComment extends React.Component {
@@ -56,6 +56,10 @@ export default class CreateComment extends React.Component {
         this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
         this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
         this.handlePostError = this.handlePostError.bind(this);
+        this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
+        this.handleEmojiClick = this.handleEmojiClick.bind(this);
+        this.onKeyPress = this.onKeyPress.bind(this);
+        this.closeEmoji = this.closeEmoji.bind(this);
 
         PostStore.clearCommentDraftUploads();
         MessageHistoryStore.resetHistoryIndex('comment');
@@ -69,24 +73,85 @@ export default class CreateComment extends React.Component {
             submitting: false,
             ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
             showPostDeletedModal: false,
-            enableAddButton
+            enableAddButton,
+            showEmojiPicker: false,
+            emojiOffset: 0,
+            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
         };
 
         this.lastBlurAt = 0;
     }
 
+    closeEmoji(clickEvent) {
+        /*
+        if the user clicked something outside the component, except the RHS emojipicker icon
+        and the picker is open, then close it
+         */
+        if (clickEvent && clickEvent.srcElement &&
+            clickEvent.srcElement.className !== '' &&
+            clickEvent.srcElement.className.indexOf('emoji-rhs') === -1 &&
+            this.state.showEmojiPicker) {
+            this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+        }
+    }
+
+    handleEmojiPickerClick() {
+        const threadHeight = document.getElementById('thread--root') ? document.getElementById('thread--root').offsetHeight : 0;
+        const messagesHeight = document.querySelector('div.post-right-comments-container') ? document.querySelector('div.post-right-comments-container').offsetHeight : 0;
+
+        const totalHeight = threadHeight + messagesHeight;
+        let pickerOffset = 0;
+        if (totalHeight > 361) {
+            pickerOffset = -361;
+        } else {
+            pickerOffset = -1 * totalHeight;
+        }
+        this.setState({showEmojiPicker: !this.state.showEmojiPicker, emojiOffset: pickerOffset});
+    }
+
+    handleEmojiClick(emoji) {
+        const emojiAlias = emoji.name || emoji.aliases[0];
+
+        if (!emojiAlias) {
+            //Oops.. There went something wrong
+            return;
+        }
+
+        if (this.state.message === '') {
+            this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false});
+        } else {
+            //check whether there is already a blank at the end of the current message
+            const newMessage = (/\s+$/.test(this.state.message)) ?
+            this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
+
+            this.setState({message: newMessage, showEmojiPicker: false});
+        }
+
+        this.focusTextbox();
+    }
+
     componentDidMount() {
         PreferenceStore.addChangeListener(this.onPreferenceChange);
+        document.addEventListener('keydown', this.onKeyPress);
+
         this.focusTextbox();
     }
 
     componentWillUnmount() {
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
+        document.removeEventListener('keydown', this.onKeyPress);
+    }
+
+    onKeyPress(e) {
+        if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) {
+            this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+        }
     }
 
     onPreferenceChange() {
         this.setState({
-            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
+            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
+            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
         });
     }
 
@@ -205,6 +270,14 @@ export default class CreateComment extends React.Component {
 
         GlobalActions.emitUserCommentedEvent(post);
 
+        const emojiResult = post.message.match(EMOJI_PATTERN);
+        if (emojiResult) {
+            // parse message and emit emoji event
+            emojiResult.forEach((emoji) => {
+                PostActions.emitEmojiPosted(emoji);
+            });
+        }
+
         PostActions.queuePost(post, false, null,
             (err) => {
                 if (err.id === 'api.post.create_post.root_id.app_error') {
@@ -502,6 +575,18 @@ export default class CreateComment extends React.Component {
             addButtonClass += ' disabled';
         }
 
+        let emojiPicker = null;
+        if (this.state.showEmojiPicker) {
+            emojiPicker = (
+                <EmojiPicker
+                    onEmojiClick={this.handleEmojiClick}
+                    topOrBottom='bottom'
+                    emojiOffset={this.state.emojiOffset}
+                    outsideClick={this.closeEmoji}
+                />
+            );
+        }
+
         return (
             <form onSubmit={this.handleSubmit}>
                 <div className='post-create'>
@@ -518,6 +603,7 @@ export default class CreateComment extends React.Component {
                                 value={this.state.message}
                                 onBlur={this.handleBlur}
                                 createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')}
+                                emojiEnabled={this.state.emojiPickerEnabled}
                                 initialText=''
                                 channelId={this.props.channelId}
                                 id='reply_textbox'
@@ -532,7 +618,12 @@ export default class CreateComment extends React.Component {
                                 onUploadError={this.handleUploadError}
                                 postType='comment'
                                 channelId={this.props.channelId}
+                                onEmojiClick={this.handleEmojiPickerClick}
+                                emojiEnabled={this.state.emojiPickerEnabled}
+                                navBarName='rhs'
                             />
+
+                            {emojiPicker}
                         </div>
                     </div>
                     <MsgTyping

webapp/components/create_post.jsx

@@ -8,6 +8,7 @@ import FileUpload from './file_upload.jsx';
 import FilePreview from './file_preview.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
 import TutorialTip from './tutorial/tutorial_tip.jsx';
+import EmojiPicker from './emoji_picker/emoji_picker.jsx';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -36,6 +37,7 @@ const KeyCodes = Constants.KeyCodes;
 import React from 'react';
 
 export const REACTION_PATTERN = /^(\+|-):([^:\s]+):\s*$/;
+export const EMOJI_PATTERN = /:[A-Za-z-_0-9]*:/g;
 
 export default class CreatePost extends React.Component {
     constructor(props) {
@@ -61,7 +63,10 @@ export default class CreatePost extends React.Component {
         this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
         this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
         this.showShortcuts = this.showShortcuts.bind(this);
+        this.handleEmojiClick = this.handleEmojiClick.bind(this);
+        this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this);
         this.handlePostError = this.handlePostError.bind(this);
+        this.closeEmoji = this.closeEmoji.bind(this);
 
         PostStore.clearDraftUploads();
 
@@ -77,7 +82,9 @@ export default class CreatePost extends React.Component {
             fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
             showTutorialTip: false,
             showPostDeletedModal: false,
-            enableSendButton: false
+            enableSendButton: false,
+            showEmojiPicker: false,
+            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
         };
 
         this.lastBlurAt = 0;
@@ -87,6 +94,18 @@ export default class CreatePost extends React.Component {
         this.setState({postError});
     }
 
+    closeEmoji(clickEvent) {
+        /*
+         if the user clicked something outside the component, except the main emojipicker icon
+         and the picker is open, then close it
+         */
+        if (clickEvent && clickEvent.srcElement &&
+            clickEvent.srcElement.className.indexOf('emoji-main') === -1 &&
+            this.state.showEmojiPicker) {
+            this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+        }
+    }
+
     handleSubmit(e) {
         e.preventDefault();
 
@@ -185,6 +204,14 @@ export default class CreatePost extends React.Component {
 
         GlobalActions.emitUserPostedEvent(post);
 
+        // parse message and emit emoji event
+        const emojiResult = post.message.match(EMOJI_PATTERN);
+        if (emojiResult) {
+            emojiResult.forEach((emoji) => {
+                PostActions.emitEmojiPosted(emoji);
+            });
+        }
+
         PostActions.queuePost(post, false, null,
             (err) => {
                 if (err.id === 'api.post.create_post.root_id.app_error') {
@@ -379,6 +406,10 @@ export default class CreatePost extends React.Component {
     }
 
     showShortcuts(e) {
+        if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) {
+            this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+        }
+
         if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.FORWARD_SLASH) {
             e.preventDefault();
             const args = {};
@@ -411,7 +442,8 @@ export default class CreatePost extends React.Component {
         this.setState({
             showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER,
             ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN
+            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
+            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
         });
     }
 
@@ -484,6 +516,31 @@ export default class CreatePost extends React.Component {
         });
     }
 
+    handleEmojiClick(emoji) {
+        const emojiAlias = emoji.name || emoji.aliases[0];
+
+        if (!emojiAlias) {
+            //Oops.. There went something wrong
+            return;
+        }
+
+        if (this.state.message === '') {
+            this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false});
+        } else {
+            //check whether there is already a blank at the end of the current message
+            const newMessage = (/\s+$/.test(this.state.message)) ?
+                this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': ';
+
+            this.setState({message: newMessage, showEmojiPicker: false});
+        }
+
+        this.focusTextbox();
+    }
+
+    handleEmojiPickerClick() {
+        this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+    }
+
     createTutorialTip() {
         const screens = [];
 
@@ -556,6 +613,17 @@ export default class CreatePost extends React.Component {
         if (!this.state.enableSendButton) {
             sendButtonClass += ' disabled';
         }
+        let emojiPicker = null;
+        if (this.state.showEmojiPicker) {
+            emojiPicker = (
+                <EmojiPicker
+                    onEmojiClick={this.handleEmojiClick}
+                    topOrBottom='top'
+                    outsideClick={this.closeEmoji}
+
+                />
+            );
+        }
 
         return (
             <form
@@ -575,12 +643,12 @@ export default class CreatePost extends React.Component {
                                 handlePostError={this.handlePostError}
                                 value={this.state.message}
                                 onBlur={this.handleBlur}
+                                emojiEnabled={this.state.emojiPickerEnabled}
                                 createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')}
                                 channelId={this.state.channelId}
                                 id='post_textbox'
                                 ref='textbox'
                             />
-                        </div>
                             <FileUpload
                                 ref='fileUpload'
                                 getFileCount={this.getFileCount}
@@ -590,7 +658,13 @@ export default class CreatePost extends React.Component {
                                 onUploadError={this.handleUploadError}
                                 postType='post'
                                 channelId=''
+                                onEmojiClick={this.handleEmojiPickerClick}
+                                emojiEnabled={this.state.emojiPickerEnabled}
+                                navBarName='main'
                             />
+
+                            {emojiPicker}
+                        </div>
                         <a
                             className={sendButtonClass}
                             onClick={this.handleSubmit}

webapp/components/emoji_picker/components/emoji_picker_category.jsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+export default class EmojiPickerCategory extends React.Component {
+    static propTypes = {
+        category: React.PropTypes.string.isRequired,
+        icon: React.PropTypes.node.isRequired,
+        onCategoryClick: React.PropTypes.func.isRequired,
+        selected: React.PropTypes.bool.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.props.onCategoryClick(this.props.category);
+    }
+
+    render() {
+        let className = 'emoji-picker__category';
+        if (this.props.selected) {
+            className += ' emoji-picker__category--selected';
+        }
+
+        return (
+            <a
+                className={className}
+                href='#'
+                onClick={this.handleClick}
+            >
+                {this.props.icon}
+            </a>
+        );
+    }
+}

webapp/components/emoji_picker/components/emoji_picker_item.jsx

@@ -0,0 +1,70 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import EmojiStore from 'stores/emoji_store.jsx';
+
+export default class EmojiPickerItem extends React.Component {
+    static propTypes = {
+        emoji: React.PropTypes.object.isRequired,
+        onItemOver: React.PropTypes.func.isRequired,
+        onItemOut: React.PropTypes.func.isRequired,
+        onItemClick: React.PropTypes.func.isRequired,
+        onItemUnmount: React.PropTypes.func.isRequired,
+        category: React.PropTypes.string.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleMouseOver = this.handleMouseOver.bind(this);
+        this.handleMouseOut = this.handleMouseOut.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    componentWillUnmount() {
+        this.props.onItemUnmount(this.props.emoji);
+    }
+
+    handleMouseOver() {
+        this.props.onItemOver(this.props.emoji);
+    }
+
+    handleMouseOut() {
+        this.props.onItemOut(this.props.emoji);
+    }
+
+    handleClick() {
+        this.props.onItemClick(this.props.emoji);
+    }
+
+    render() {
+        let item = null;
+
+        if (this.props.category === 'recent' || this.props.category === 'custom') {
+            item =
+                (<span>
+                    <img
+                        className='emoji-picker__item emoticon'
+                        onMouseOver={this.handleMouseOver}
+                        onMouseOut={this.handleMouseOut}
+                        onClick={this.handleClick}
+                        src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
+                    />
+                </span>);
+        } else {
+            item =
+                (<div >
+                    <img
+                        src='/static/emoji/img_trans.gif'
+                        className={'  emojisprite emoji-' + this.props.emoji.filename + ' '}
+                        onMouseOver={this.handleMouseOver}
+                        onMouseOut={this.handleMouseOut}
+                        onClick={this.handleClick}
+                    />
+                </div>);
+        }
+        return item;
+    }
+}

webapp/components/emoji_picker/components/emoji_picker_preview.jsx

@@ -0,0 +1,66 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import EmojiStore from 'stores/emoji_store.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+export default class EmojiPickerPreview extends React.Component {
+    static propTypes = {
+        emoji: React.PropTypes.object
+    }
+
+    render() {
+        const emoji = this.props.emoji;
+
+        if (emoji) {
+            let name;
+            let aliases;
+            let previewImage;
+
+            if (emoji.aliases) {
+                // This is a system emoji which only has a list of aliases
+                name = emoji.aliases[0];
+                aliases = emoji.aliases;
+                previewImage = (<span className='sprite-preview'><img
+                    src='/static/emoji/img_trans.gif'
+                    className={'  emojisprite-preview emoji-' + emoji.filename + ' '}
+                    align='absmiddle'
+                                                                 /></span>);
+            } else {
+                // This is a custom emoji that matches the model on the server
+                name = emoji.name;
+                aliases = [emoji.name];
+                previewImage = (<img
+                    className='emoji-picker__preview-image'
+                    src={EmojiStore.getEmojiImageUrl(emoji)}
+                                />);
+            }
+
+            return (
+                <div className='emoji-picker__preview'>
+                    <div className='emoji-picker__preview-image-box'>
+                        {previewImage}
+                    </div>
+                    <div className='emoji-picker__preview-image-box'>
+                        <span className='emoji-picker__preview-name'>{name}</span>
+                        <span
+                            className='emoji-picker__preview-aliases'
+                        >{ ':' + aliases[0] + ':'}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className='emoji-picker__preview emoji-picker__preview-placeholder'>
+                <FormattedMessage
+                    id='emoji_picker.emojiPicker'
+                    defaultMessage='Emoji Picker'
+                />
+            </div>
+        );
+    }
+}

webapp/components/emoji_picker/emoji_picker.jsx

@@ -0,0 +1,417 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import $ from 'jquery';
+import * as Emoji from 'utils/emoji.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ReactDOM from 'react-dom';
+import * as Utils from 'utils/utils.jsx';
+import ReactOutsideEvent from 'react-outside-event';
+import {FormattedMessage} from 'react-intl';
+
+import EmojiPickerCategory from './components/emoji_picker_category.jsx';
+import EmojiPickerItem from './components/emoji_picker_item.jsx';
+import EmojiPickerPreview from './components/emoji_picker_preview.jsx';
+
+// This should include all the categories available in Emoji.CategoryNames
+const CATEGORIES = [
+    'recent',
+    'people',
+    'nature',
+    'food',
+    'activity',
+    'travel',
+    'objects',
+    'symbols',
+    'flags',
+    'custom'
+];
+
+class EmojiPicker extends React.Component {
+    static propTypes = {
+        customEmojis: React.PropTypes.object,
+        onEmojiClick: React.PropTypes.func.isRequired,
+        topOrBottom: React.PropTypes.string.isRequired,
+        emojiOffset: React.PropTypes.number,
+        outsideClick: React.PropTypes.func
+    }
+
+    constructor(props) {
+        super(props);
+
+        // All props are primitives or treated as immutable
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+
+        this.handleCategoryClick = this.handleCategoryClick.bind(this);
+        this.handleFilterChange = this.handleFilterChange.bind(this);
+        this.handleItemOver = this.handleItemOver.bind(this);
+        this.handleItemOut = this.handleItemOut.bind(this);
+        this.handleItemClick = this.handleItemClick.bind(this);
+        this.handleScroll = this.handleScroll.bind(this);
+        this.handleItemUnmount = this.handleItemUnmount.bind(this);
+        this.renderCategory = this.renderCategory.bind(this);
+        this.onOutsideEvent = this.onOutsideEvent.bind(this);
+
+        this.state = {
+            category: 'recent',
+            filter: '',
+            selected: null
+        };
+    }
+
+    componentDidMount() {
+        this.searchInput.focus();
+    }
+
+    onOutsideEvent = (event) => {
+        // Handle the event.
+        this.props.outsideClick(event);
+    }
+
+    handleCategoryClick(category) {
+        const items = this.refs.items;
+
+        if (category === CATEGORIES[0]) {
+            // First category includes the search box so just scroll to the top
+            items.scrollTop = 0;
+        } else {
+            const cat = this.refs[category];
+            items.scrollTop = cat.offsetTop;
+        }
+    }
+
+    handleFilterChange(e) {
+        this.setState({filter: e.target.value});
+    }
+
+    handleItemOver(emoji) {
+        clearTimeout(this.timeouthandler);
+        this.setState({selected: emoji});
+    }
+
+    handleItemOut() {
+        this.timeouthandler = setTimeout(() => this.setState({selected: null}), 500);
+    }
+
+    handleItemUnmount(emoji) {
+        //Prevent emoji preview from showing emoji which is not present anymore (due to filter)
+        if (this.state.selected === emoji) {
+            this.setState({selected: null});
+        }
+    }
+
+    handleItemClick(emoji) {
+        this.props.onEmojiClick(emoji);
+    }
+
+    handleScroll() {
+        const items = $(ReactDOM.findDOMNode(this.refs.items));
+
+        const contentTop = items.scrollTop();
+        const contentTopPadding = parseInt(items.css('padding-top'), 10);
+        const scrollPct = (contentTop / (items[0].scrollHeight - items[0].clientHeight)) * 100.0;
+
+        if (scrollPct > 99.0) {
+            this.setState({category: 'custom'});
+            return;
+        }
+
+        for (const category of CATEGORIES) {
+            const header = $(ReactDOM.findDOMNode(this.refs[category]));
+            const headerBottomMargin = parseInt(header.css('margin-bottom'), 10) + parseInt(header.css('padding-bottom'), 10);
+            const headerBottom = header[0].offsetTop + header.height() + headerBottomMargin;
+
+            // If category is the first one visible, highlight it in the bar at the top
+            if (headerBottom - contentTopPadding >= contentTop) {
+                if (this.state.category !== category) {
+                    this.setState({category: String(category)});
+                }
+
+                break;
+            }
+        }
+    }
+    renderCategory(category, filter) {
+        const items = [];
+        let indices = [];
+        let recentEmojis = [];
+
+        if (category === 'recent') {
+            recentEmojis = EmojiStore.getRecentEmojis();
+            indices = [...Array(recentEmojis.length).keys()];
+
+            // reverse indices so most recently added is first
+            indices.reverse();
+        } else {
+            indices = Emoji.EmojiIndicesByCategory.get(category) || [];
+        }
+
+        for (const index of indices) {
+            let emoji = {};
+            if (category === 'recent') {
+                emoji = recentEmojis[index];
+            } else {
+                emoji = Emoji.Emojis[index];
+            }
+            if (filter) {
+                let matches = false;
+
+                for (const alias of emoji.aliases || [...emoji.name]) {
+                    if (alias.indexOf(filter) !== -1) {
+                        matches = true;
+                        break;
+                    }
+                }
+
+                if (!matches) {
+                    continue;
+                }
+            }
+
+            items.push(
+                <EmojiPickerItem
+                    key={'system_' + (category === 'recent' ? 'recent_' : '') + (emoji.name || emoji.aliases[0])}
+                    emoji={emoji}
+                    category={category}
+                    onItemOver={this.handleItemOver}
+                    onItemOut={this.handleItemOut}
+                    onItemClick={this.handleItemClick}
+                    onItemUnmount={this.handleItemUnmount}
+                />
+            );
+        }
+
+        if (category === 'custom') {
+            const customEmojis = EmojiStore.getCustomEmojiMap().values();
+
+            for (const emoji of customEmojis) {
+                if (filter && emoji.name.indexOf(filter) === -1) {
+                    continue;
+                }
+
+                items.push(
+                    <EmojiPickerItem
+                        key={'custom_' + emoji.name}
+                        emoji={emoji}
+                        category={category}
+                        onItemOver={this.handleItemOver}
+                        onItemOut={this.handleItemOut}
+                        onItemClick={this.handleItemClick}
+                        onItemUnmount={this.handleItemUnmount}
+
+                    />
+                );
+            }
+        }
+
+        // Only render the header if there's any visible items
+        let header = null;
+        if (items.length > 0) {
+            header = (
+                <div
+                    className='emoji-picker__category-header'
+                >
+                    <FormattedMessage id={'emoji_picker.' + category}/>
+                </div>
+            );
+        }
+
+        return (
+            <div
+                key={'category_' + category}
+                id={'emojipickercat-' + category}
+                ref={category}
+            >
+                {header}
+                <div className='emoji-picker-items__container'>
+                    {items}
+                </div>
+            </div>
+        );
+    }
+
+    renderPreview(selected) {
+        if (selected) {
+            let name;
+            let aliases;
+            let previewImage;
+            if (selected.name) {
+                // This is a custom emoji that matches the model on the server
+                name = selected.name;
+                aliases = [selected.name];
+                previewImage = (<img
+                    className='emoji-picker__preview-image'
+                    align='absmiddle'
+                    src={EmojiStore.getEmojiImageUrl(selected)}
+                                />);
+            } else {
+                // This is a system emoji which only has a list of aliases
+                name = selected.aliases[0];
+                aliases = selected.aliases;
+                previewImage = (<span ><img
+                    src='/static/emoji/img_trans.gif'
+                    className={'  emojisprite-preview emoji-' + selected.filename + ' '}
+                    align='absmiddle'
+                                       /></span>);
+            }
+
+            return (
+                <div className='emoji-picker__preview'>
+                    {previewImage}
+                    <span className='emoji-picker__preview-name'>{name}</span>
+                    <span className='emoji-picker__preview-aliases'>{aliases.map((alias) => ':' + alias + ':').join(' ')}</span>
+                </div>
+            );
+        }
+
+        return (
+            <span className='emoji-picker__preview-placeholder'>
+                <FormattedMessage
+                    id='emoji_picker.emojiPicker'
+                    defaultMessage='Emoji Picker'
+                />
+            </span>
+        );
+    }
+
+    render() {
+        const items = [];
+
+        for (const category of CATEGORIES) {
+            if (category === 'custom') {
+                items.push(this.renderCategory('custom', this.state.filter, this.props.customEmojis));
+            } else {
+                items.push(this.renderCategory(category, this.state.filter));
+            }
+        }
+        const cssclass = this.props.topOrBottom === 'top' ? 'emoji-picker' : 'emoji-picker-bottom';
+        const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {};
+        return (
+            <div
+                style={pickerStyle}
+                className={cssclass}
+            >
+                <div className='emoji-picker__categories'>
+                    <EmojiPickerCategory
+                        category='recent'
+                        icon={<i
+                            className='fa fa-clock-o'
+                            title={Utils.localizeMessage('emoji_picker.recent', 'Recently Used')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'recent'}
+                    />
+                    <EmojiPickerCategory
+                        category='people'
+                        icon={<i
+                            className='fa fa-smile-o'
+                            title={Utils.localizeMessage('emoji_picker.people', 'People')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'people'}
+                    />
+                    <EmojiPickerCategory
+                        category='nature'
+                        icon={<i
+                            className='fa fa-leaf'
+                            title={Utils.localizeMessage('emoji_picker.nature', 'Nature')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'nature'}
+                    />
+                    <EmojiPickerCategory
+                        category='food'
+                        icon={<i
+                            className='fa fa-cutlery'
+                            title={Utils.localizeMessage('emoji_picker.food', 'Food')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'food'}
+                    />
+                    <EmojiPickerCategory
+                        category='activity'
+                        icon={<i
+                            className='fa fa-futbol-o'
+                            title={Utils.localizeMessage('emoji_picker.activity', 'Activity')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'activity'}
+                    />
+                    <EmojiPickerCategory
+                        category='travel'
+                        icon={<i
+                            className='fa fa-plane'
+                            title={Utils.localizeMessage('emoji_picker.travel', 'Travel')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'travel'}
+                    />
+                    <EmojiPickerCategory
+                        category='objects'
+                        icon={<i
+                            className='fa fa-lightbulb-o'
+                            title={Utils.localizeMessage('emoji_picker.objects', 'Objects')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'objects'}
+                    />
+                    <EmojiPickerCategory
+                        category='symbols'
+                        icon={<i
+                            className='fa fa-heart-o'
+                            title={Utils.localizeMessage('emoji_picker.symbols', 'Symbols')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'symbols'}
+                    />
+                    <EmojiPickerCategory
+                        category='flags'
+                        icon={<i
+                            className='fa fa-flag-o'
+                            title={Utils.localizeMessage('emoji_picker.flags', 'Flags')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'flags'}
+                    />
+                    <EmojiPickerCategory
+                        category='custom'
+                        icon={<i
+                            className='fa fa-at'
+                            title={Utils.localizeMessage('emoji_picker.custom', 'Custom')}
+                              />}
+                        onCategoryClick={this.handleCategoryClick}
+                        selected={this.state.category === 'custom'}
+                    />
+                </div>
+                <div className='emoji-picker__search-container'>
+                    <span className='fa fa-search emoji-picker__search-icon'/>
+                    <input
+                        ref={(input) => {
+                            this.searchInput = input;
+                        }}
+                        className='emoji-picker__search'
+                        type='text'
+                        onChange={this.handleFilterChange}
+                        placeholder={Utils.localizeMessage('emoji_picker.search', 'search')}
+                    />
+                </div>
+                <div
+                    ref='items'
+                    id='emojipickeritems'
+                    className='emoji-picker__items'
+                    onScroll={this.handleScroll}
+                >
+                    {items}
+                </div>
+                <EmojiPickerPreview emoji={this.state.selected}/>
+            </div>
+        );
+    }
+}
+
+// disabling eslint check for outslide click handler
+// eslint-disable-next-line new-cap
+export default ReactOutsideEvent(EmojiPicker, ['click']);

webapp/components/emoji_picker/emoji_picker_container.jsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import EmojiStore from 'stores/emoji_store.jsx';
+
+import EmojiPicker from './emoji_picker.jsx';
+
+export default class EmojiPickerContainer extends React.Component {
+    static propTypes = {
+        onEmojiClick: React.PropTypes.func.isRequred
+    }
+
+    constructor(props) {
+        super(props);
+        this.handleEmojiChange = this.handleEmojiChange.bind(this);
+
+        this.state = {
+            customEmojis: EmojiStore.getCustomEmojiMap().values() ? EmojiStore.getCustomEmojiMap().values() : []
+        };
+    }
+
+    componentDidMount() {
+        EmojiStore.addChangeListener(this.handleEmojiChange);
+    }
+
+    componentWillUnount() {
+        EmojiStore.removeChangeListener(this.handleEmojiChange);
+    }
+
+    handleEmojiChange() {
+        this.setState({
+            customEmojis: EmojiStore.getCustomEmojiMap().values()
+        });
+    }
+
+    render() {
+        return (
+            <EmojiPicker
+                customEmojis={EmojiStore.getCustomEmojiMap().values()}
+                onEmojiClick={this.props.onEmojiClick}
+            />
+        );
+    }
+}

webapp/components/file_upload.jsx

@@ -49,6 +49,7 @@ class FileUpload extends React.Component {
         this.pasteUpload = this.pasteUpload.bind(this);
         this.keyUpload = this.keyUpload.bind(this);
         this.handleMaxUploadReached = this.handleMaxUploadReached.bind(this);
+        this.emojiClick = this.emojiClick.bind(this);
 
         this.state = {
             requests: {}
@@ -210,7 +211,9 @@ class FileUpload extends React.Component {
         // jquery-dragster doesn't provide a function to unregister itself so do it manually
         target.off('dragenter dragleave dragover drop dragster:enter dragster:leave dragster:over dragster:drop');
     }
-
+    emojiClick() {
+        this.props.onEmojiClick();
+    }
     pasteUpload(e) {
         var inputDiv = ReactDOM.findDOMNode(this.refs.input);
         const {formatMessage} = this.props.intl;
@@ -347,24 +350,33 @@ class FileUpload extends React.Component {
         const channelId = this.props.channelId || ChannelStore.getCurrentId();
 
         const uploadsRemaining = Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId);
+        const emojiSpan = (<span
+            className={'fa fa-smile-o icon--emoji-picker emoji-' + this.props.navBarName}
+            onClick={this.emojiClick}
+                           />);
+        const filestyle = {visibility: 'hidden'};
 
         return (
             <span
                 ref='input'
                 className={'btn btn-file' + (uploadsRemaining <= 0 ? ' btn-file__disabled' : '')}
             >
+                <div className='icon--attachment'>
                     <span
-                    className='icon'
                         dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
+                        onClick={() => this.refs.fileInput.click()}
                     />
                     <input
                         ref='fileInput'
                         type='file'
+                        style={filestyle}
                         onChange={this.handleChange}
                         onClick={uploadsRemaining > 0 ? this.props.onClick : this.handleMaxUploadReached}
                         multiple={multiple}
                         accept={accept}
                     />
+                </div>
+                {this.props.emojiEnabled ? emojiSpan : ''}
             </span>
         );
     }
@@ -380,7 +392,10 @@ FileUpload.propTypes = {
     onFileUploadChange: React.PropTypes.func,
     onTextDrop: React.PropTypes.func,
     channelId: React.PropTypes.string,
-    postType: React.PropTypes.string
+    postType: React.PropTypes.string,
+    onEmojiClick: React.PropTypes.func,
+    navBarName: React.PropTypes.string,
+    emojiEnabled: React.PropTypes.bool
 };
 
 export default injectIntl(FileUpload, {withRef: true});

webapp/components/rhs_root_post.jsx

@@ -517,7 +517,10 @@ export default class RhsRootPost extends React.Component {
         };
 
         return (
-            <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
+            <div
+                id='thread--root'
+                className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}
+            >
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post__content'>
                     {profilePicContainer}

webapp/components/textbox.jsx

@@ -32,7 +32,8 @@ export default class Textbox extends React.Component {
         onBlur: React.PropTypes.func,
         supportsCommands: React.PropTypes.bool.isRequired,
         handlePostError: React.PropTypes.func,
-        suggestionListStyle: React.PropTypes.string
+        suggestionListStyle: React.PropTypes.string,
+        emojiEnabled: React.PropTypes.bool
     };
 
     static defaultProps = {
@@ -249,7 +250,7 @@ export default class Textbox extends React.Component {
                 <SuggestionBox
                     id={this.props.id}
                     ref='message'
-                    className={`form-control custom-textarea ${this.state.connection}`}
+                    className={`form-control custom-textarea${this.props.emojiEnabled ? '-emoji' : ''} ${this.state.connection}`}
                     type='textarea'
                     spellCheck='true'
                     placeholder={this.props.createMessage}

webapp/components/user_settings/user_settings_advanced.jsx

@@ -351,6 +351,13 @@ export default class AdvancedSettingsDisplay extends React.Component {
                     defaultMessage='Enable the ability to make and receive one-on-one WebRTC calls'
                 />
             );
+        case 'EMOJI_PICKER_PREVIEW':
+            return (
+                <FormattedMessage
+                    id='user.settings.advance.emojipicker'
+                    defaultMessage='Enable the emoji picker'
+                />
+            );
         default:
             return null;
         }

webapp/i18n/en.json

@@ -1287,6 +1287,18 @@
   "emoji_list.name": "Name",
   "emoji_list.search": "Search Custom Emoji",
   "emoji_list.somebody": "Somebody on another team",
+  "emoji_picker.activity": "Activity",
+  "emoji_picker.custom": "Custom",
+  "emoji_picker.emojiPicker": "Emoji Picker",
+  "emoji_picker.flags": "Flags",
+  "emoji_picker.food": "Food",
+  "emoji_picker.nature": "Nature",
+  "emoji_picker.objects": "Objects",
+  "emoji_picker.people": "People",
+  "emoji_picker.recent": "Recently Used",
+  "emoji_picker.search": "Search",
+  "emoji_picker.symbols": "Symbols",
+  "emoji_picker.travel": "Travel",
   "error.not_found.link_message": "Back to Mattermost",
   "error.not_found.message": "The page you were trying to reach does not exist",
   "error.not_found.title": "Page not found",
@@ -1989,6 +2001,7 @@
   "user.settings.advance.slashCmd_autocmp": "Enable external application to offer slash command autocomplete",
   "user.settings.advance.title": "Advanced Settings",
   "user.settings.advance.webrtc_preview": "Enable the ability to make and receive one-on-one WebRTC calls",
+  "user.settings.advance.emojipicker": "Enable emoji picker in message input box",
   "user.settings.custom_theme.awayIndicator": "Away Indicator",
   "user.settings.custom_theme.buttonBg": "Button BG",
   "user.settings.custom_theme.buttonColor": "Button Text",

webapp/package.json

@@ -75,6 +75,7 @@
     "react-dom": "15.4.2",
     "sass-loader": "6.0.3",
     "style-loader": "0.13.2",
+    "react-outside-event": "1.2.4",
     "url-loader": "0.5.8",
     "webpack": "2.2.1",
     "webpack-node-externals": "1.5.4"

webapp/sass/components/_emoticons.scss

@@ -1,15 +1,15 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 .emoticon {
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     display: inline-block;
-    height: 20px;
+    height: 21px;
     min-height: 1em;
     min-width: 1em;
     vertical-align: middle;
-    width: 20px;
+    width: 21px;
 }
 
 .emoticon-suggestion {
@@ -36,3 +36,205 @@
     text-align: center;
     vertical-align: middle;
 }
+
+.emoji-picker__popover {
+    padding: 0px;
+
+    .popover-content {
+        padding: 0px;
+    }
+}
+
+
+
+.emoji-picker-bottom {
+    display: flex;
+    flex-direction: column;
+    @include user-select(none);
+    position: absolute;
+    z-index: 40;
+    right: 0%;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker__search {
+    border-width: 1px 0px 1px 0px;
+    border-style: solid;
+    padding: 2px 0 2px 25px;
+    width: 100%;
+    height: 25px;
+    font-size: 12px;
+
+    &:focus{
+        outline: none;
+    }
+}
+
+.emoji-picker {
+    display: flex;
+    flex-direction: column;
+    @include user-select(none);
+    position: absolute;
+    top: -361px;
+    right: 0px;
+    width: 278px;
+    border: 1px solid;
+    border-radius: 3px;
+
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker__categories {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .emoji-picker__category {
+        color: #333333;
+        display: inline-block;
+        font-size: 16px;
+        margin: 3px 6px;
+        text-align: center;
+        width: 15px;
+
+        &--selected,
+        &:hover {
+            color: #666666;
+        }
+    }
+}
+
+.emoji-picker__items {
+    max-height: 262px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0px 8px 8px 8px;
+    position: relative;
+
+
+
+    .emoji-picker__category-header {
+        font-size: 12px;
+        font-weight: bold;
+        margin-bottom: 6px;
+        margin-top: 3px;
+        padding-top: 3px;
+        // padding-bottom: 10px;
+    }
+
+    .emoji-picker__preview_sprite {
+        isplay: inline-block;
+        height: 45px;
+        margin: 3px;
+        vertical-align: top;
+
+        padding: 3px;
+    }
+
+    .emoji-picker-items__container {
+        > div {
+            display: inline-block;
+            height: 21px;
+            margin: 3px;
+            vertical-align: top;
+            width: 21px;
+            padding: 3px;
+        }
+        > span {
+            display: inline-block;
+            height: 21px;
+            margin: 3px;
+            vertical-align: top;
+            width: 21px;
+            padding: 0px;
+            border: 0px;
+        }
+    }
+
+    .emoji-picker__item {
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 18px;
+        margin: 3px;
+    }
+}
+.emojisprite-wrapper {
+    cursor: pointer;
+}
+
+.emoji-picker__preview {
+    border-top: 1px solid;
+    display: table-cell;
+    vertical-align: middle;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height:45px;
+    width: 278px;
+    padding: 3px 10px;
+
+    &.emoji-picker__preview-placeholder {
+        padding: 12px;
+    }
+
+    .emoji-picker__preview-image-box {
+        display: table-cell;
+        vertical-align: middle;
+        height: 36px;
+        width: 42px;
+
+        .sprite-preview {
+            height: 36px;
+            width: 36px;
+            vertical-align: middle;
+            padding: 0px;
+            border: 0px;
+            display: inline-block;
+        }
+    }
+
+    .emoji-picker__preview-image {
+        max-height: 36px;
+        max-width: 42px;
+        padding: 0 10px 0 0;
+
+    }
+
+    .emoji-picker__preview-name {
+
+        font-size: 13px;
+        font-weight: bold;
+    }
+
+    .emoji-picker__preview-aliases {
+        display: block;
+        font-size: 12px;
+
+        font-weight: bold;
+    }
+}

webapp/sass/components/_module.scss

@@ -3,6 +3,7 @@
 @import 'buttons';
 @import 'dropdown';
 @import 'emoticons';
+@import 'emojisprite';
 @import 'error-bar';
 @import 'files';
 @import 'inputs';

webapp/sass/layout/_post-right.scss

@@ -62,10 +62,6 @@
     .post-create__container {
         width: 100%;
 
-        .textarea-wrapper {
-            min-height: 100px;
-        }
-
         .btn {
             margin-bottom: 10px;
             
@@ -154,6 +150,7 @@
     overflow: auto;
     position: relative;
     padding-top: 10px;
+    min-height: 429px;
     
     .file-preview__container {
         margin-top: 5px;

webapp/sass/layout/_post.scss

@@ -23,7 +23,7 @@
 }
 
 .textarea-wrapper {
-    min-height: 36px;
+    min-height: 37px;
     position: relative;
 
     .textbox-preview-area {
@@ -371,7 +371,15 @@
         padding: .5em 15px 0;
         width: 100%;
     }
+    #reply_textbox.custom-textarea-emoji{
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 60px;
+        padding-top: 6px;
+        resize: none;
 
+
+    }
     .center {
         max-width: 1028px;
     }
@@ -386,6 +394,25 @@
                 -ms-overflow-style: auto;
                 overflow: auto;
                 padding-right: 43px;
+                resize: none;
+            }
+
+            #post_textbox-reference.custom-textarea-emoji {
+                padding-right: 43px;
+                resize: none;
+            }
+
+
+            #reply_textbox.custom-textarea-emoji {
+                padding-right: 60px;
+                resize: none;
+
+            }
+
+            #post_textbox.custom-textarea-emoji {
+                padding-right: 60px;
+                resize: none;
+
             }
         }
     }
@@ -425,8 +452,28 @@
             max-height: 162px !important;
             padding-right: 35px;
             padding-top: 8px;
+            resize: none;
+
         }
 
+        #post_textbox-reference.custom-textarea-emoji {
+            bottom: 0;
+            max-height: 162px !important;
+            padding-right: 35px;
+            padding-top: 8px;
+            resize: none;
+
+        }
+
+
+        #post_textbox.custom-textarea-emoji {
+            bottom: 0;
+            max-height: 162px !important;
+            padding-right: 60px;
+            padding-top: 8px;
+            resize: none;
+
+        }
         .textarea-div {
             line-height: 1.5;
             max-height: 163px !important;
@@ -436,13 +483,12 @@
         }
 
         .btn-file {
-            @include opacity(.5);
             @include single-transition(all, .15s);
             font-size: 16px;
-            padding: 7px 9px 6px;
+            padding: 8px 9px 4px;
             position: absolute;
             right: 0;
-            top: 1px;
+            top: 0;
             z-index: 5;
 
             svg {
@@ -452,7 +498,6 @@
 
             &:hover,
             &:active {
-                @include opacity(.9);
                 box-shadow: none;
             }
 
@@ -464,6 +509,48 @@
                     @include opacity(.1);
                 }
             }
+
+            .icon--attachment {
+                @include opacity(.5);
+                display: inline-block;
+                position: relative;
+                vertical-align: top;
+
+                input {
+                    cursor: pointer;
+                    direction: ltr;
+                    filter: alpha(opacity=0);
+                    font-size: 23px;
+                    height: 100%;
+                    margin: 0;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 100%;
+                }
+
+                &:hover {
+                    @include opacity(.9);
+                }
+            }
+        }
+
+
+        .icon--emoji-picker {
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            cursor: pointer;
+            font-size: 19px;
+            margin-left: 7px;
+            position: relative;
+            vertical-align: top;
+
+            &:hover,
+            &:active {
+                @include opacity(.9);
+                box-shadow: none;
+            }
         }
 
         textarea {

webapp/sass/responsive/_mobile.scss

@@ -31,6 +31,15 @@
         }
     }
 
+    .post-create__container{
+        .post-create-body {
+            .icon__postcontent_picker {
+                display:none;
+                top: -7px;
+            }
+        }
+    }
+
     .suggestion-list__content {
         max-height: 145px;
     }
@@ -1098,6 +1107,13 @@
                 padding: .5em 1em;
             }
 
+            .emoji-rhs {
+                position: relative;
+                display: none;
+                top: 1px;
+                right: -1px;
+            }
+
             .msg-typing:empty {
                 display: none;
             }

webapp/sass/responsive/_tablet.scss

@@ -19,14 +19,23 @@
             width: 300px;
         }
     }
-
+    .post-right__scroll{
+        .post-create__container{
+            .post-create-body {
+                .icon__emoji_picker {
+                    display:none;
+                    top: -7px;
+                }
+            }
+        }
+    }
     .post-create__container {
         form {
             padding: .5em 0 0;
         }
 
         .post-create-footer {
-            padding: 0 45px;
+            padding: 0 45px 0 8px;
 
             .post-error {
                 position: relative;
@@ -46,6 +55,7 @@
                 display: table-cell;
                 padding-left: 45px;
 
+
                 .sidebar--right & {
                     padding-left: 0;
                 }
@@ -54,14 +64,29 @@
             .app__content & {
                 .btn-file {
                     bottom: -2px;
-                    left: 0;
+                    left: 10px;
                     line-height: 36px;
                     padding: 0;
                     top: auto;
-                    width: 45px;
+                    width: 25px;
                 }
             }
 
+            .app__content & {
+                .icon {
+                    position: relative;
+                    top: 3px;
+
+                }
+            }
+
+            .icon__emoji_picker {
+                position: relative;
+                display: none;
+                top: 1px;
+                right: -1px;
+            }
+
                     .send-button {
                 display: table-cell;
             }

webapp/stores/emoji_store.jsx

@@ -5,12 +5,13 @@ import Client from '../client/web_client.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import Constants from 'utils/constants.jsx';
 import EventEmitter from 'events';
-
 import * as Emoji from 'utils/emoji.jsx';
 
 const ActionTypes = Constants.ActionTypes;
 
 const CHANGE_EVENT = 'changed';
+const RECENT_EMOJI_KEY = 'recentEmojis';
+const MAXIMUM_RECENT_EMOJI = 27;
 
 // Wrap the contents of the store so that we don't need to construct an ES6 map where most of the content
 // (the system emojis) will never change. It provides the get/has functions of a map and an iterator so
@@ -139,6 +140,48 @@ class EmojiStore extends EventEmitter {
         return this.map.get(name);
     }
 
+    addRecentEmoji(rawAlias) {
+        const recentEmojis = this.getRecentEmojis();
+
+        const alias = rawAlias.split(':').join('');
+
+        let emoji = this.getCustomEmojiMap().get(alias);
+
+        if (!emoji) {
+            const emojiIndex = Emoji.EmojiIndicesByAlias.get(alias);
+            emoji = Emoji.Emojis[emojiIndex];
+        }
+
+        if (!emoji) {
+            // something is wrong, so we return
+            return;
+        }
+
+        // odd workaround to the lack of array.findLastIndex - reverse looping & splice
+        for (let i = recentEmojis.length - 1; i >= 0; i--) {
+            if ((emoji.name && recentEmojis[i].name === emoji.name) ||
+                (emoji.filename && recentEmojis[i].filename === emoji.filename)) {
+                recentEmojis.splice(i, 1);
+                break;
+            }
+        }
+        recentEmojis.push(emoji);
+
+        // cut off the _top_ if it's over length (since new are added to end)
+        if (recentEmojis.length > MAXIMUM_RECENT_EMOJI) {
+            recentEmojis.splice(0, recentEmojis.length - MAXIMUM_RECENT_EMOJI);
+        }
+        localStorage.setItem(RECENT_EMOJI_KEY, JSON.stringify(recentEmojis));
+    }
+
+    getRecentEmojis() {
+        const result = JSON.parse(localStorage.getItem(RECENT_EMOJI_KEY));
+        if (!result) {
+            return [];
+        }
+        return result;
+    }
+
     hasUnicode(codepoint) {
         return Emoji.EmojiIndicesByUnicode.has(codepoint);
     }
@@ -174,6 +217,10 @@ class EmojiStore extends EventEmitter {
             this.removeCustomEmoji(action.id);
             this.emitChange();
             break;
+        case ActionTypes.EMOJI_POSTED:
+            this.addRecentEmoji(action.alias);
+            this.emitChange();
+            break;
         }
     }
 }

webapp/utils/constants.jsx

@@ -176,7 +176,9 @@ export const ActionTypes = keyMirror({
     SUGGESTION_SELECT_NEXT: null,
     SUGGESTION_SELECT_PREVIOUS: null,
 
-    BROWSER_CHANGE_FOCUS: null
+    BROWSER_CHANGE_FOCUS: null,
+
+    EMOJI_POSTED: null
 });
 
 export const WebrtcActionTypes = keyMirror({
@@ -856,6 +858,10 @@ export const Constants = {
         WEBRTC_PREVIEW: {
             label: 'webrtc_preview',
             description: 'Enable WebRTC one on one calls'
+        },
+        EMOJI_PICKER_PREVIEW: {
+            label: 'emojipicker',
+            description: 'Enable emoji picker'
         }
     },
     OVERLAY_TIME_DELAY_SMALL: 100,

webapp/utils/utils.jsx

@@ -575,6 +575,8 @@ export function applyTheme(theme) {
         changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
         changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
         changeCss('.app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
+        changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
     }
 
     if (theme.centerChannelColor) {
@@ -651,6 +653,22 @@ export function applyTheme(theme) {
         changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
         changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
+        changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
+        changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor);
+        changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker__items', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.05));
+        changeCss('.app__body .emoji-picker__categories', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.emoji-picker__category .fa:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
+
+        changeCss('.app__body .emoji-picker__preview', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3));
+        changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor);
+        changeCss('.app__body .emoji-picker__item:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
+        changeCss('.app__body .emojisprite:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
+        changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
     }
 
     if (theme.newMessageSeparator) {