Emoji picker

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;