Emoji picker (#1608)

* Add emoji button and popup panel

This integrates a simple third party emoji panel with a few css overrides to
correct some relative paths and colors.

The trickiest thing about this is ensuring we don't break the layout, which is
acheived through precise control over the panel's height, and prodigious calls
to updateMessageFieldSize.

// FREEBIE

* Don't close emoji panel on click, do close on send

To better facilitate multiple emoji entry.

// FREEBIE

* Make panel emojis bigger and higher resolution

// FREEBIE

* Move paperclip button to the right of the microphone

This makes our bottom-bar button arrangement more comfortable and consistent
with Android.

// FREEBIE

* Move emoji picker padding to inner container

* Insert emojis at cursor position

Don't just append to the end like a n00b! Also handle selected text correctly.
https://stackoverflow.com/questions/11076975

// FREEBIE

* A few visual tweaks to reduce visual complexity of emoji panel

- No gray buffer on the right side of the emoji panel
- No gray buffer between message compose text box and emoji window
- The scroll bar for the emojis is the same as our normal scrollbars

background.html

@@ -197,22 +197,26 @@ <h3>{{ welcomeToSignal }}</h3>
       </div>
 
       <div class='bottom-bar' id='footer'>
-          <form class='send clearfix'>
+          <div class='emoji-panel-container'></div>
+          <div class='compose'>
+            <form class='send clearfix'>
               <div class='attachment-previews'></div>
               <div class='flex'>
-                <div class='choose-file'>
-                    <button class='paperclip thumbnail'></button>
-                    <input type='file' class='file-input'>
-                </div>
+                <button class='emoji'></button>
                 <textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto'></textarea>
                 <div class='capture-audio'>
                     <button class='microphone'></button>
                 </div>
                 <div class='android-length-warning'>
                     {{ android-length-warning }}
                 </div>
+                <div class='choose-file'>
+                    <button class='paperclip thumbnail'></button>
+                    <input type='file' class='file-input'>
+                </div>
               </div>
-          </form>
+            </form>
+          </div>
       </div>
     </div>
   </script>

js/views/conversation_view.js

@@ -173,6 +173,8 @@
 
             this.$('.send-message').focus(this.focusBottomBar.bind(this));
             this.$('.send-message').blur(this.unfocusBottomBar.bind(this));
+
+            this.$emojiPanelContainer = this.$('.emoji-panel-container');
         },
 
         events: {
@@ -192,6 +194,7 @@
             'click .microphone': 'captureAudio',
             'click .disappearing-messages': 'enableDisappearingMessages',
             'click .scroll-down-button-view': 'scrollToBottom',
+            'click button.emoji': 'toggleEmojiPanel',
             'focus .send-message': 'focusBottomBar',
             'change .file-input': 'toggleMicrophone',
             'blur .send-message': 'unfocusBottomBar',
@@ -947,8 +950,46 @@
             }.bind(this));
         },
 
+        toggleEmojiPanel: function(e) {
+            e.preventDefault();
+            if (!this.emojiPanel) {
+              this.openEmojiPanel();
+            } else {
+              this.closeEmojiPanel();
+            }
+        },
+        openEmojiPanel: function(e) {
+            this.$emojiPanelContainer.outerHeight(200);
+            this.emojiPanel = new EmojiPanel(this.$emojiPanelContainer[0], {
+              onClick: this.insertEmoji.bind(this)
+            });
+            this.updateMessageFieldSize({});
+        },
+        closeEmojiPanel: function() {
+            this.$emojiPanelContainer.empty().outerHeight(0);
+            this.emojiPanel = null;
+            this.updateMessageFieldSize({});
+        },
+        insertEmoji: function(e) {
+            var colons = ':' + emoji.data[e.unified.toLowerCase()][3][0] + ':';
+
+            var textarea = this.$messageField[0];
+            if (textarea.selectionStart || textarea.selectionStart == '0') {
+                var startPos = textarea.selectionStart;
+                var endPos = textarea.selectionEnd;
+                textarea.value = textarea.value.substring(0, startPos)
+                    + colons
+                    + textarea.value.substring(endPos, textarea.value.length);
+                textarea.selectionStart = startPos + colons.length;
+                textarea.selectionEnd = startPos + colons.length;
+            } else {
+                textarea.value += colons;
+            }
+            this.focusMessageField();
+        },
         sendMessage: function(e) {
             this.removeLastSeenIndicator();
+            this.closeEmojiPanel();
 
             var toast;
             if (extension.expired()) {
@@ -1043,6 +1084,7 @@
             $bottomBar.outerHeight(
                     this.$messageField.outerHeight() +
                     $attachmentPreviews.outerHeight() +
+                    this.$emojiPanelContainer.outerHeight() +
                     parseInt($bottomBar.css('min-height')));
 
             this.view.scrollToBottomIfNeeded();

package.json

@@ -153,6 +153,7 @@
     "electron-updater": "^2.9.3",
     "emoji-datasource-apple": "^3.0.0",
     "emoji-js": "^3.2.2",
+    "emoji-panel": "^0.5.2",
     "lodash": "^4.17.4",
     "mkdirp": "^0.5.1",
     "node-fetch": "^1.7.3",

preload.js

@@ -53,4 +53,5 @@
   window.nodeFetch = require('node-fetch');
   window.httpsAgent = require('https').Agent;
   window.nodeBuffer = Buffer;
+  window.EmojiPanel = require('emoji-panel');
 })();

stylesheets/_conversation.scss

@@ -661,9 +661,13 @@ span.status {
 .bottom-bar {
   box-sizing: content-box;
   $button-width: 36px;
-  padding: 5px 5px 5px 0;
+  padding: 5px 0px 5px 0;
   background: $grey_l;
 
+  .compose {
+    padding-right: 5px;
+  }
+
   form.active {
     outline: solid 1px $blue;
   }
@@ -716,6 +720,7 @@ span.status {
     display: block;
     max-height: 100px;
     padding: 10px;
+    margin: 0 5px;
     border: 0;
     outline: 0;
     z-index: 5;

stylesheets/_emoji.scss

@@ -79,3 +79,47 @@ img.emoji.jumbo {
 	width: 1em;
 	height: 1em;
 }
+
+button.emoji {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  opacity: 0.5;
+  border: none;
+  background: transparent;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    width: $button-height;
+    height: $button-height;
+    @include color-svg('../images/smile.svg', $grey);
+  }
+
+  &:focus, &:hover {
+    opacity: 1.0;
+  }
+}
+
+// Import emoji panel css and override paths
+@import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css';
+@font-face {
+  font-family: 'apple-category';
+  src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+.emoji-panel-container {
+  height: 0px;
+  .ep-e {
+    background-image: url('../node_modules/emoji-datasource/sheet_apple_64.png');
+    background-size: 1312px;
+  }
+  .ep-slide {
+    background-color: $blue;
+  }
+  .ep ::-webkit-scrollbar {
+    // matches what is set in _global.scss; needs !important to override emoji panel CSS
+    width: 10px !important;
+  }
+}

stylesheets/_global.scss

@@ -180,13 +180,12 @@ button.hamburger {
   position: relative;
   .choose-file {
     cursor: pointer;
-    padding-left: 10px;
   }
 
   .paperclip {
     width: 36px;
-    height: 100%;
-    padding: 5px 0 0;
+    height: 36px;
+    padding: 0;
     opacity: 0.5;
     border: none;
     background: transparent;