Add reaction picker (#5904)

2017-04-01 17:00:30 -04:00
--- a/webapp/actions/post_actions.jsx
+++ b/webapp/actions/post_actions.jsx
@@ -300,6 +300,7 @@ export function addReaction(channelId, postId, emojiName) {
        user_id: UserStore.getCurrentId(),
        emoji_name: emojiName
    };
+    emitEmojiPosted(emojiName);

    AsyncClient.saveReaction(channelId, reaction);
 }
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -580,7 +580,7 @@ export default class CreateComment extends React.Component {
            emojiPicker = (
                <EmojiPicker
                    onEmojiClick={this.handleEmojiClick}
-                    topOrBottom='bottom'
+                    pickerLocation='bottom'
                    emojiOffset={this.state.emojiOffset}
                    outsideClick={this.closeEmoji}
                />
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -618,7 +618,7 @@ export default class CreatePost extends React.Component {
            emojiPicker = (
                <EmojiPicker
                    onEmojiClick={this.handleEmojiClick}
-                    topOrBottom='top'
+                    pickerLocation='top'
                    outsideClick={this.closeEmoji}

                />
--- a/webapp/components/emoji_picker/emoji_picker.jsx
+++ b/webapp/components/emoji_picker/emoji_picker.jsx
@@ -34,7 +34,7 @@ class EmojiPicker extends React.Component {
    static propTypes = {
        customEmojis: React.PropTypes.object,
        onEmojiClick: React.PropTypes.func.isRequired,
-        topOrBottom: React.PropTypes.string.isRequired,
+        pickerLocation: React.PropTypes.string.isRequired,
        emojiOffset: React.PropTypes.number,
        outsideClick: React.PropTypes.func
    }
@@ -68,7 +68,9 @@ class EmojiPicker extends React.Component {

    onOutsideEvent = (event) => {
        // Handle the event.
-        this.props.outsideClick(event);
+        if (this.props.outsideClick) {
+            this.props.outsideClick(event);
+        }
    }

    handleCategoryClick(category) {
@@ -287,7 +289,17 @@ class EmojiPicker extends React.Component {
                items.push(this.renderCategory(category, this.state.filter));
            }
        }
-        const cssclass = this.props.topOrBottom === 'top' ? 'emoji-picker' : 'emoji-picker-bottom';
+        let cssclass = 'emoji-picker ';
+        if (this.props.pickerLocation === 'top') {
+            cssclass += 'emoji-picker-top';
+        } else if (this.props.pickerLocation === 'bottom') {
+            cssclass += 'emoji-picker-bottom';
+        } else if (this.props.pickerLocation === 'react') {
+            cssclass = 'emoji-picker-react';
+        } else if (this.props.pickerLocation === 'react-rhs-comment') {
+            cssclass = 'emoji-picker-react-rhs-comment';
+        }
+
        const pickerStyle = this.props.emojiOffset ? {top: this.props.emojiOffset} : {};
        return (
            <div
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.

 import $ from 'jquery';
+import ReactDOM from 'react-dom';

 import PostTime from './post_time.jsx';

@@ -12,7 +13,8 @@ import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';
+import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';

 import React from 'react';
 import {FormattedMessage} from 'react-intl';
@@ -28,10 +30,17 @@ export default class PostInfo extends React.Component {
        this.unflagPost = this.unflagPost.bind(this);
        this.pinPost = this.pinPost.bind(this);
        this.unpinPost = this.unpinPost.bind(this);
+        this.reactEmojiClick = this.reactEmojiClick.bind(this);
+        this.emojiPickerClick = this.emojiPickerClick.bind(this);

        this.canEdit = false;
        this.canDelete = false;
        this.editDisableAction = new DelayedAction(this.handleEditDisable);
+
+        this.state = {
+            showEmojiPicker: false,
+            reactionPickerOffset: 21
+        };
    }

    handleDropdownOpened() {
@@ -271,6 +280,10 @@ export default class PostInfo extends React.Component {
        GlobalActions.showGetPostLinkModal(this.props.post);
    }

+    emojiPickerClick() {
+        this.setState({showEmojiPicker: !this.state.showEmojiPicker});
+    }
+
    removePost() {
        GlobalActions.emitRemovePost(this.props.post);
    }
@@ -308,6 +321,14 @@ export default class PostInfo extends React.Component {
        PostActions.unflagPost(this.props.post.id);
    }

+    reactEmojiClick(emoji) {
+        const pickerOffset = 21;
+
+        const emojiName = emoji.name || emoji.aliases[0];
+        PostActions.addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
+        this.setState({showEmojiPicker: false, reactionPickerOffset: pickerOffset});
+    }
+
    render() {
        var post = this.props.post;
        var comments = '';
@@ -335,11 +356,47 @@ export default class PostInfo extends React.Component {
                        className='comment-icon'
                        dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
                    />
-                    {commentCountText}
+                    <span className='comment-count'>
+                        {commentCountText}
+                    </span>
                </a>
            );
        }

+        let react;
+        if (post.state !== Constants.POST_FAILED &&
+            post.state !== Constants.POST_LOADING &&
+            !Utils.isPostEphemeral(post) &&
+            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            react = (
+                <span>
+                    <Overlay
+                        show={this.state.showEmojiPicker}
+                        placement='top'
+                        rootClose={true}
+                        container={this}
+                        onHide={() => this.setState({showEmojiPicker: false})}
+                        target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])}
+
+                    >
+                        <EmojiPicker
+                            onEmojiClick={this.reactEmojiClick}
+                            pickerLocation='top'
+
+                        />
+                    </Overlay>
+                    <a
+                        href='#'
+                        className='reacticon__container'
+                        onClick={this.emojiPickerClick}
+                        ref={'reactIcon_' + post.id}
+                    ><i className='fa fa-smile-o'/>
+                    </a>
+                </span>
+
+            );
+        }
+
        let options;
        if (Utils.isPostEphemeral(post)) {
            options = (
@@ -358,6 +415,7 @@ export default class PostInfo extends React.Component {
                        >
                            {dropdown}
                        </div>
+                        {react}
                        {comments}
                    </li>
                );
@@ -445,6 +503,7 @@ export default class PostInfo extends React.Component {
                        postId={post.id}
                    />
                    {pinnedBadge}
+                    {this.state.showEmojiPicker}
                    {flagTrigger}
                </li>
                {options}
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -10,7 +10,7 @@ import ReactionListContainer from 'components/post_view/components/reaction_list
 import RhsDropdown from 'components/rhs_dropdown.jsx';

 import * as GlobalActions from 'actions/global_actions.jsx';
-import {flagPost, unflagPost, pinPost, unpinPost} from 'actions/post_actions.jsx';
+import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx';

 import TeamStore from 'stores/team_store.jsx';

@@ -19,10 +19,13 @@ import * as PostUtils from 'utils/post_utils.jsx';

 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';

 import {FormattedMessage} from 'react-intl';

+import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
+import ReactDOM from 'react-dom';
+
 import loadingGif from 'images/load.gif';

 import React from 'react';
@@ -38,6 +41,8 @@ export default class RhsComment extends React.Component {
        this.unflagPost = this.unflagPost.bind(this);
        this.pinPost = this.pinPost.bind(this);
        this.unpinPost = this.unpinPost.bind(this);
+        this.reactEmojiClick = this.reactEmojiClick.bind(this);
+        this.emojiPickerClick = this.emojiPickerClick.bind(this);

        this.canEdit = false;
        this.canDelete = false;
@@ -46,7 +51,9 @@ export default class RhsComment extends React.Component {
        this.state = {
            currentTeamDisplayName: TeamStore.getCurrent().name,
            width: '',
-            height: ''
+            height: '',
+            showReactEmojiPicker: false,
+            reactPickerOffset: 15
        };
    }

@@ -88,7 +95,7 @@ export default class RhsComment extends React.Component {
        );
    }

-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.status !== this.props.status) {
            return true;
        }
@@ -117,6 +124,10 @@ export default class RhsComment extends React.Component {
            return true;
        }

+        if (this.state.showReactEmojiPicker !== nextState.showReactEmojiPicker) {
+            return true;
+        }
+
        return false;
    }

@@ -327,11 +338,39 @@ export default class RhsComment extends React.Component {
            );
    }

+    emojiPickerClick() {
+        // set default offset
+        let reactOffset = 15;
+        const reactSelectorHeight = 360;
+        const reactionIconY = ReactDOM.findDOMNode(this).getBoundingClientRect().top;
+        const rhsMinHeight = 700;
+
+        const spaceAvail = rhsMinHeight - reactionIconY;
+        if (spaceAvail < reactSelectorHeight) {
+            reactOffset = (spaceAvail - reactSelectorHeight);
+        }
+        this.setState({showReactEmojiPicker: !this.state.showReactEmojiPicker, reactPickerOffset: reactOffset});
+    }
+
+    reactEmojiClick(emoji) {
+        this.setState({showReactEmojiPicker: false});
+        const emojiName = emoji.name || emoji.aliases[0];
+        addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
+    }
+
    render() {
        const post = this.props.post;
        const flagIcon = Constants.FLAG_ICON_SVG;
        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
        const isSystemMessage = PostUtils.isSystemMessage(post);
+        let canReact = false;
+
+        if (post.state !== Constants.POST_FAILED &&
+            post.state !== Constants.POST_LOADING &&
+            !Utils.isPostEphemeral(post) &&
+            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            canReact = true;
+        }

        var currentUserCss = '';
        if (this.props.currentUser.id === post.user_id) {
@@ -536,6 +575,42 @@ export default class RhsComment extends React.Component {
            );
        }

+        let react;
+        let reactOverlay;
+
+        if (canReact) {
+            react = (
+                <span>
+                    <a
+                        href='#'
+                        className='reacticon__container reaction'
+                        onClick={this.emojiPickerClick}
+                        ref={'rhs_reacticon_' + post.id}
+                    ><i className='fa fa-smile-o'/>
+                    </a>
+                </span>
+
+            );
+            reactOverlay = (
+                <Overlay
+                    id={'rhs_react_overlay_' + post.id}
+                    show={this.state.showReactEmojiPicker}
+                    placement='top'
+                    rootClose={true}
+                    container={this.refs['post_body_' + post.id]}
+                    onHide={() => this.setState({showReactEmojiPicker: false})}
+                    target={() => ReactDOM.findDOMNode(this.refs['rhs_reacticon_' + post.id])}
+
+                >
+                    <EmojiPicker
+                        onEmojiClick={this.reactEmojiClick}
+                        pickerLocation='react-rhs-comment'
+                        emojiOffset={this.state.reactPickerOffset}
+                    />
+                </Overlay>
+            );
+        }
+
        let options;
        if (Utils.isPostEphemeral(post)) {
            options = (
@@ -546,7 +621,9 @@ export default class RhsComment extends React.Component {
        } else if (!PostUtils.isSystemMessage(post)) {
            options = (
                <li className='col col__reply'>
+                    {reactOverlay}
                    {this.createDropdown()}
+                    {react}
                </li>
            );
        }
@@ -570,7 +647,10 @@ export default class RhsComment extends React.Component {
        };

        return (
-            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}>
+            <div
+                ref={'post_body_' + post.id}
+                className={'post post--thread ' + currentUserCss + ' ' + compactClass + ' ' + systemMessageClass}
+            >
                <div className='post__content'>
                    {profilePicContainer}
                    <div>
@@ -586,7 +666,7 @@ export default class RhsComment extends React.Component {
                            </li>
                            {options}
                        </ul>
-                        <div className='post__body'>
+                        <div className='post__body' >
                            <div className={postClass}>
                                {loading}
                                <PostMessageContainer post={post}/>
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -14,14 +14,17 @@ import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';

 import * as GlobalActions from 'actions/global_actions.jsx';
-import {flagPost, unflagPost, pinPost, unpinPost} from 'actions/post_actions.jsx';
+import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx';

 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';

+import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx';
+import ReactDOM from 'react-dom';
+
 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';

 import {FormattedMessage} from 'react-intl';

@@ -37,6 +40,8 @@ export default class RhsRootPost extends React.Component {
        this.unflagPost = this.unflagPost.bind(this);
        this.pinPost = this.pinPost.bind(this);
        this.unpinPost = this.unpinPost.bind(this);
+        this.reactEmojiClick = this.reactEmojiClick.bind(this);
+        this.emojiPickerClick = this.emojiPickerClick.bind(this);

        this.canEdit = false;
        this.canDelete = false;
@@ -45,7 +50,9 @@ export default class RhsRootPost extends React.Component {
        this.state = {
            currentTeamDisplayName: TeamStore.getCurrent().name,
            width: '',
-            height: ''
+            height: '',
+            showRHSEmojiPicker: false,
+            testStateObj: true
        };
    }

@@ -70,7 +77,7 @@ export default class RhsRootPost extends React.Component {
        this.canEdit = false;
    }

-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.status !== this.props.status) {
            return true;
        }
@@ -107,6 +114,10 @@ export default class RhsRootPost extends React.Component {
            return true;
        }

+        if (this.state.showRHSEmojiPicker !== nextState.showRHSEmojiPicker) {
+            return true;
+        }
+
        return false;
    }

@@ -155,13 +166,30 @@ export default class RhsRootPost extends React.Component {
        unpinPost(this.props.post.channel_id, this.props.post.id);
    }

+    emojiPickerClick() {
+        this.setState({showRHSEmojiPicker: !this.state.showRHSEmojiPicker});
+    }
+
+    reactEmojiClick(emoji) {
+        const emojiName = emoji.name || emoji.aliases[0];
+        addReaction(this.props.post.channel_id, this.props.post.id, emojiName);
+        this.setState({showRHSEmojiPicker: false});
+    }
+
    render() {
        const post = this.props.post;
        const user = this.props.user;
        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
        var timestamp = user ? user.last_picture_update : 0;
        var channel = ChannelStore.get(post.channel_id);
+        let canReact = false;
        const flagIcon = Constants.FLAG_ICON_SVG;
+        if (post.state !== Constants.POST_FAILED &&
+            post.state !== Constants.POST_LOADING &&
+            !Utils.isPostEphemeral(post) &&
+            Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            canReact = true;
+        }

        this.canDelete = PostUtils.canDeletePost(post);
        this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
@@ -195,6 +223,41 @@ export default class RhsRootPost extends React.Component {
            }
        }

+        let react;
+        let reactOverlay;
+
+        if (canReact) {
+            react = (
+                <span>
+                    <a
+                        href='#'
+                        className='reacticon__container reaction'
+                        onClick={this.emojiPickerClick}
+                        ref='rhs_root_reacticon'
+                    ><i className='fa fa-smile-o'/>
+                    </a>
+                </span>
+
+            );
+            reactOverlay = (
+                <Overlay
+                    id='rhs_react_overlay'
+                    show={this.state.showRHSEmojiPicker}
+                    placement='bottom'
+                    rootClose={true}
+                    container={this}
+                    onHide={() => this.setState({showRHSEmojiPicker: false})}
+                    target={() => ReactDOM.findDOMNode(this.refs.rhs_root_reacticon)}
+
+                >
+                    <EmojiPicker
+                        onEmojiClick={this.reactEmojiClick}
+                        pickerLocation='react'
+                    />
+                </Overlay>
+            );
+        }
+
        var dropdownContents = [];

        if (Utils.isMobile()) {
@@ -547,7 +610,9 @@ export default class RhsRootPost extends React.Component {
                                </OverlayTrigger>
                            </li>
                            <li className='col col__reply'>
+                                {reactOverlay}
                                {rootOptions}
+                                {react}
                            </li>
                        </ul>
                        <div className='post__body'>
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -424,7 +424,10 @@ export default class RhsThread extends React.Component {
                    renderView={renderView}
                    onScroll={this.handleScroll}
                >
-                    <div className='post-right__scroll'>
+                    <div
+                        ref='post-right__scroll'
+                        className='post-right__scroll'
+                    >
                        <DateSeparator
                            date={rootPostDay.toDateString()}
                        />
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,5 +1,16 @@
@charset "UTF-8";

+.reacticon {
+    display: inline-block;
+    fill: inherit;
+    opacity: .7;
+    position: relative;
+    top: 2px;
+    vertical-align: middle;
+    visibility: hidden;
+
+}
+
 .emoticon {
    background-position: 50% 50%;
    background-repeat: no-repeat;
@@ -45,6 +56,51 @@
    }
 }

+.emoji-picker-react-rhs-comment {
+    position: absolute;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+    top: 21px;
+    right:59px;
+    z-index: 100;
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker-react {
+    position: absolute;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+    top: 42px;
+    right:59px;
+    z-index: 100;
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}


 .emoji-picker-bottom {
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -64,14 +64,15 @@

        .btn {
            margin-bottom: 10px;
-            
+
            &.disabled {
                background: grey !important;
                border-color: transparent !important;
            }
        }

-        .custom-textarea {
+        .custom-textarea,
+        .custom-textarea-emoji {
            min-height: 100px;
        }

@@ -150,8 +151,8 @@
    overflow: auto;
    position: relative;
    padding-top: 10px;
-    min-height: 429px;
-    
+    min-height: 700px;
+
    .file-preview__container {
        margin-top: 5px;
    }
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -360,233 +360,271 @@

 .post-create__container {
    label {
-       font-weight: normal;
-    }
-    .custom-textarea {
-        overflow: hidden;
-    }
+     font-weight: normal;
+ }
+ .custom-textarea {
+    overflow: hidden;
+}

-    form {
-        margin: 0 auto;
-        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;
+form {
+    margin: 0 auto;
+    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;
-    }

-    .post-create {
-        &.scroll {
-            .btn-file {
-                right: 10px;
-            }
+}
+.center {
+    max-width: 1028px;
+}

-            .custom-textarea {
-                -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;
-
-            }
-        }
-    }
-
-    .post-create-body {
-        padding: 0 0 2px;
-        position: relative;
-
-        .post-body__cell {
-            position: relative;
-            vertical-align: top;
-        }
-
-        .send-button {
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            display: none;
-            font-size: 18px;
-            height: 37px;
-            line-height: 37px;
-            padding-right: 4px;
-            text-align: center;
-            vertical-align: bottom;
-            width: 45px;
-
-            &:active {
-                @include opacity(.75);
-            }
-
-            &.disabled {
-                color: grey;
-            }
+.post-create {
+    &.scroll {
+        .btn-file {
+            right: 10px;
        }

        .custom-textarea {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 35px;
-            padding-top: 8px;
+            -ms-overflow-style: auto;
+            overflow: auto;
+            padding-right: 43px;
            resize: none;
-
        }

        #post_textbox-reference.custom-textarea-emoji {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 35px;
-            padding-top: 8px;
+            padding-right: 43px;
            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;
-            overflow: auto;
-            padding-right: 30px;
-            padding-top: 8px;
+    }
+}
+
+.post-create-body {
+    padding: 0 0 2px;
+    position: relative;
+
+    .post-body__cell {
+        position: relative;
+        vertical-align: top;
+    }
+
+    .send-button {
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        display: none;
+        font-size: 18px;
+        height: 37px;
+        line-height: 37px;
+        padding-right: 4px;
+        text-align: center;
+        vertical-align: bottom;
+        width: 45px;
+
+        &:active {
+            @include opacity(.75);
        }

-        .btn-file {
-            @include single-transition(all, .15s);
-            font-size: 16px;
-            padding: 8px 9px 4px;
-            position: absolute;
-            right: 0;
-            top: 0;
-            z-index: 5;
+        &.disabled {
+            color: grey;
+        }
+    }

-            svg {
-                height: 18px;
-                width: 18px;
-            }
+    .custom-textarea {
+        bottom: 0;
+        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;
+        overflow: auto;
+        padding-right: 30px;
+        padding-top: 8px;
+    }
+
+    .btn-file {
+        @include single-transition(all, .15s);
+        font-size: 16px;
+        padding: 8px 9px 4px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 5;
+
+        svg {
+            height: 18px;
+            width: 18px;
+        }
+
+        &:hover,
+        &:active {
+            box-shadow: none;
+        }
+
+        &.btn-file__disabled {
+            @include opacity(.1);

            &:hover,
            &:active {
-                box-shadow: none;
-            }
-
-            &.btn-file__disabled {
                @include opacity(.1);
-
-                &:hover,
-                &:active {
-                    @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 {
+        .icon--attachment {
            @include opacity(.5);
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            font-size: 19px;
-            margin-left: 7px;
+            display: inline-block;
            position: relative;
            vertical-align: top;

-            &:hover,
-            &:active {
+            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);
-                box-shadow: none;
            }
        }
+    }

-        textarea {
+
+    .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;
+        }
+
+        .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;
        }
    }

-    .post-create-footer {
-        @include clearfix;
-        font-size: 13px;
-        padding: 3px 0 0;
-        position: relative;
-
-        .post-error {
-            @include opacity(.55);
-            display: inline-block;
-            font-size: .85em;
-            font-weight: normal;
-            margin-bottom: 0;
-            position: absolute;
-            top: 4px;
-        }
+    textarea {
+        box-shadow: none;
    }
+}

-    .msg-typing {
-        @include opacity(.7);
-        display: block;
-        font-size: .95em;
-        height: 20px;
-        margin-bottom: 5px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+.post-create-footer {
+    @include clearfix;
+    font-size: 13px;
+    padding: 3px 0 0;
+    position: relative;
+
+    .post-error {
+        @include opacity(.55);
+        display: inline-block;
+        font-size: .85em;
+        font-weight: normal;
+        margin-bottom: 0;
+        position: absolute;
+        top: 4px;
    }
 }

+.msg-typing {
+    @include opacity(.7);
+    display: block;
+    font-size: .95em;
+    height: 20px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+}
+
 .post-list__table {
    display: table;
    height: 100%;
@@ -619,16 +657,14 @@
            .col__reply {
                min-width: 0;
            }
-
-            .dropdown {
-                margin-right: 0;
-            }
        }
    }

    &:hover {
        .dropdown,
        .comment-icon__container,
+        .reacticon,
+        .reacticon__container,
        .flag-icon__container,
        .post__reply,
        .post__remove {
@@ -1100,8 +1136,8 @@

    .dropdown {
        display: inline-block;
-        margin-right: 5px;
        top: -1px;
+        vertical-align: middle;
        visibility: hidden;

        .dropdown-menu {
@@ -1122,6 +1158,8 @@
    }

    .post__dropdown {
+        vertical-align: middle;
+
        &:after {
            content: '[...]';
            position: relative;
@@ -1249,6 +1287,10 @@

        .post-reaction-list {
            min-height: 30px;
+
+            &:empty {
+                display: none;
+            }
        }

        .post-reaction {
@@ -1381,6 +1423,8 @@
    .comment-icon__container {
        display: inline-block;
        fill: $primary-color;
+        position: relative;
+        top: 1px;
        visibility: hidden;

        &:focus {
@@ -1396,12 +1440,17 @@
            width: 17px;
        }

+        .comment-count {
+            margin-left: 2px;
+        }
+
        .comment-icon {
            display: inline-block;
            fill: inherit;
-            margin-right: 3px;
+            margin: 0 1px 0 5px;
            position: relative;
-            top: 2px;
+            top: 1px;
+            vertical-align: top;
        }

        path {
@@ -1409,6 +1458,15 @@
        }
    }

+    .reacticon__container {
+        display: inline-block;
+        fill: $primary-color;
+        font-size: 16px;
+        margin-left: 5px;
+        vertical-align: top;
+        visibility: hidden;
+    }
+
    .flag-icon__container {
        display: inline-block;
        font-size: 12px;
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -236,6 +236,10 @@
            }
        }

+        .reacticon__container {
+            display: none;
+        }
+
        .post__dropdown {
            display: inline-block;
            height: 28px;
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -584,6 +584,9 @@ export function applyTheme(theme) {
        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-react, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .emoji-picker-react-rhs-comment, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
+
        changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
    }

@@ -662,6 +665,7 @@ export function applyTheme(theme) {
        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-react', '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));
@@ -687,6 +691,7 @@ export function applyTheme(theme) {
    if (theme.linkColor) {
        changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor);
        changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
+        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor);
        changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1));
        changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));