emoji: Add a skin-tone picker to the emoji toolbar

css/converse.css

@@ -1263,7 +1263,7 @@
     transform: rotate(359deg); } }
   #converse-embedded-chat .emojione,
   #conversejs .emojione {
-    height: 24px; }
+    height: 20px; }
   #converse-embedded-chat .spinner,
   #conversejs .spinner {
     -webkit-animation: spin 2s infinite, linear;
@@ -1752,6 +1752,10 @@
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
+            height: 100px;
+            overflow: scroll; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
             box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1759,10 +1763,9 @@
             #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
             #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
               background-color: #DCF9F6; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
-            height: 100px;
-            overflow: scroll; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone {
+              float: right; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
@@ -1844,12 +1847,13 @@
       border-top-right-radius: 0; } }
 #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
 #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
-  display: table;
-  table-layout: fixed;
   width: 100%; }
   #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category,
   #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category {
-    display: table-cell; }
+    float: left; }
+#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
+#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
+  padding: 2px; }
 
 #conversejs #controlbox {
   margin-right: 1em; }

css/inverse.css

@@ -1798,6 +1798,10 @@ body {
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
+            height: 250px;
+            overflow: scroll; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
             box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1805,10 +1809,9 @@ body {
             #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
             #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
               background-color: #DCF9F6; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
-            height: 250px;
-            overflow: scroll; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-skintone {
+              float: right; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;

sass/_chatbox.scss

@@ -321,16 +321,19 @@
                             color: $link-color;
                         }
                         ul {
+                            &.emoji-picker {
+                                height: $emoji-picker-height;
+                                overflow: scroll;
+                            }
                             &.emoji-category-picker {
                                 box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
                                 overflow-x: scroll;
                                 .picked {
                                     background-color: $highlight-color;
                                 }
-                            }
-                            &.emoji-picker {
-                                height: $emoji-picker-height;
-                                overflow: scroll;
+                                .emoji-skintone {
+                                    float: right;
+                                }
                             }
                             li {
                                 margin-left: 0;

sass/converse/_chatbox.scss

@@ -19,16 +19,20 @@
                     .toolbar-menu {
                         ul {
                             &.emoji-category-picker {
-                                display: table;
-                                table-layout: fixed;
                                 width: 100%;
                                 .emoji-category {
-                                    display: table-cell;
+                                    float: left;
                                 }
                             }
                         }
                     }
-
+                    &.toggle-smiley {
+                        ul {
+                            li {
+                                padding: 2px;
+                            }
+                        }
+                    }
                 }
             }
         }

sass/converse/_variables.scss

@@ -53,7 +53,7 @@ $send-button-margin: 3px !default;
 
 $message-them-color: $red !default;
 
-$emoji_height : 24px !default;
+$emoji_height : 20px !default;
 
 $roster-height: 194px !default;
 $roster-item-height: 60px !default;

src/converse-chatview.js

@@ -115,14 +115,16 @@
 
             _converse.EmojiPicker = Backbone.Model.extend({ 
                 defaults: {
-                    'current_category': 'people'
+                    'current_category': 'people',
+                    'current_skintone': ''
                 }
             });
 
             _converse.EmojiPickerView = Backbone.View.extend({
                 className: 'emoji-picker-container toolbar-menu collapsed',
                 events: {
-                    'click .emoji-category-picker li a': 'chooseCategory',
+                    'click .emoji-category-picker li a.pick-category': 'chooseCategory',
+                    'click .emoji-category-picker li a.pick-skintone': 'chooseSkinTone',
                 },
 
                 initialize: function () {
@@ -134,18 +136,26 @@
                     var emojis_html = tpl_emojis(
                         _.extend(
                             this.model.toJSON(), {
+                                'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
                                 'emojis_by_category': emojis_by_category,
-                                'emojione': emojione
+                                'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
                             }
                         ));
                     this.el.innerHTML = emojis_html;
                     return this;
                 },
 
+                chooseSkinTone: function (ev) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    const skintone = ev.target.parentElement.getAttribute("data-skintone").trim();
+                    this.model.set({'current_skintone': skintone});
+                },
+
                 chooseCategory: function (ev) {
                     ev.preventDefault();
                     ev.stopPropagation();
-                    var category = ev.target.parentElement.getAttribute("data-category").trim();
+                    const category = ev.target.parentElement.getAttribute("data-category").trim();
                     this.model.set({'current_category': category});
                 }
             });

src/templates/emojis.html

@@ -1,8 +1,10 @@
 {[ _.forEach(emojis_by_category, function (obj, category) { ]}
     <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
         {[ _.forEach(emojis_by_category[category], function (emoji) { ]}
-            <li class="emoji insert-emoji" data-emoji="{{{emoji._shortname}}}">
-                <a href="#" data-emoji="{{{emoji._shortname}}}"> {{ emojione.shortnameToUnicode(emoji._shortname) }}  </a>
+        <li class="emoji insert-emoji 
+                {[ if (emoji._shortname.indexOf('_tone') !== -1 && (!current_skintone || emoji._shortname.indexOf(current_skintone) === -1)) { ]} hidden {[ }; ]}"
+            data-emoji="{{{emoji._shortname}}}">
+                <a href="#" data-emoji="{{{emoji._shortname}}}"> {{ transform(emoji._shortname) }}  </a>
         </li>
         {[ }); ]}
     </ul>
@@ -10,7 +12,13 @@
 <ul class="emoji-category-picker">
     {[ _.forEach(emojis_by_category, function (obj, category) { ]}
         <li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
-            <a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
+            <a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
+        </li>
+    {[ }); ]}
+
+    {[ _.forEach(skintones, function (skintone) { ]}
+        <li data-category="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}">
+            <a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a>
         </li>
     {[ }); ]}
 </ul>