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

2 files changed, 93 insertions, 9 deletions

diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 9a0f658a2..d4c1daa6e 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/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;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 1e1dd4b08..892eea860 100644
--- a/webapp/sass/layout/_post.scss
+++ b/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 {