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
8 years ago · fb931b4733
parent d1f7f5ee8c
commit fb931b4733
10 changed files with 4173 additions and 15 deletions
--- a/background.html
+++ b/background.html
@ -197,13 +197,12 @@
      </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>
@ -211,8 +210,13 @@
                <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>
--- a/images/smile.svg
+++ b/images/smile.svg
@ -0,0 +1,4 @@
+<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
+</svg>
--- a/js/views/conversation_view.js
+++ b/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();
--- a/package.json
+++ b/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",
--- a/preload.js
+++ b/preload.js
@ -53,4 +53,5 @@
  window.nodeFetch = require('node-fetch');
  window.httpsAgent = require('https').Agent;
  window.nodeBuffer = Buffer;
+  window.EmojiPanel = require('emoji-panel');
 })();
--- a/stylesheets/_conversation.scss
+++ b/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;
--- a/stylesheets/_emoji.scss
+++ b/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;
+  }
+}
--- a/stylesheets/_global.scss
+++ b/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;
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
--- a/yarn.lock
+++ b/yarn.lock
@ -1167,6 +1167,10 @@ emoji-datasource-apple@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/emoji-datasource-apple/-/emoji-datasource-apple-3.0.0.tgz#1e5eb0443d0a9e20ec3ed01e77114ce601b19cec"

+emoji-datasource@2.4.x:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-2.4.4.tgz#b97ac1896bc208ecf1833564a20687a5215d0389"
+
 emoji-datasource@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-3.0.0.tgz#3c46c5aa4c39bb7a0c8e6877ae02cc94dbc1b12f"
@ -1177,6 +1181,12 @@ emoji-js@^3.2.2:
  dependencies:
    emoji-datasource "3.0.0"

+emoji-panel@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-panel/-/emoji-panel-0.5.2.tgz#866e935bd1220d4c7037ec904e381656dd7d0364"
+  dependencies:
+    emoji-datasource "2.4.x"
+
 encoding@^0.1.11:
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"