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/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';