converse-emoji-views: Show categories in chosen skintone

sass/_emoji.scss

@@ -36,13 +36,16 @@
                             margin: 0;
                             padding: 0 0.5em;
                             white-space: nowrap;
-                            font-size: var(--font-size);
+                            font-size: var(--font-size-small);
                             color: var(--heading-color);
                         }
+                        li {
+                            padding: 0 0.25em;
+                        }
                         padding: 0.5em 0;
                         background-color: var(--chat-head-color);
                         width: auto;
-                        font-size: var(--font-size-large);
+                        font-size: var(--font-size);
                     }
                 }
                 .emoji-picker {

spec/messages.js

@@ -954,7 +954,6 @@
                     'id': _converse.connection.getUniqueId()
                 }).c('body').t('😇 Hello world! 😇 😇').up()
                 .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            debugger;
             await new Promise((resolve, reject) => view.once('messageInserted', resolve));
            message = chat_content.querySelector('.message:last-child .chat-msg__text');
             expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);

src/converse-emoji-views.js

@@ -150,13 +150,21 @@ converse.plugins.add('converse-emoji-views', {
                             'shouldBeHidden': emojiShouldBeHidden,
                             'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
                             'toned_emojis': _converse.emojis.toned,
-                            'transform': u.getEmojiRenderer()
+                            'transform': u.getEmojiRenderer(),
+                            'transformCategory': shortname => u.getEmojiRenderer()(this.getTonedShortname(shortname))
                         }
                     )
                 );
                 return html;
             },
 
+            getTonedShortname (shortname) {
+                if (_converse.emojis.toned.includes(shortname) && this.model.get('current_skintone')) {
+                    return `${shortname.slice(0, shortname.length-1)}_${this.model.get('current_skintone')}:`
+                }
+                return shortname;
+            },
+
             chooseSkinTone (ev) {
                 ev.preventDefault();
                 ev.stopPropagation();

src/templates/emojis.html

@@ -3,7 +3,7 @@
         <ul>
             {[ Object.keys(o.emoji_categories).forEach(function (category) { ]}
                 <li data-category="{{{category}}}" class="emoji-category {[ if (o.current_category === category) { ]} picked {[ } ]}">
-                    <a class="pick-category" href="#emoji-picker-{{{category}}}" data-category="{{{category}}}"> {{ o.transform(o.emoji_categories[category]) }} </a>
+                    <a class="pick-category" href="#emoji-picker-{{{category}}}" data-category="{{{category}}}"> {{ o.transformCategory(o.emoji_categories[category]) }} </a>
                 </li>
             {[ }); ]}
         </ul>
@@ -22,7 +22,7 @@
         {[ }); ]}
     </div>
     <div class="emoji-skintone-picker">
-        <label>Skin tone:</label>
+        <label>Skin tone</label>
         <ul>
             {[ o.skintones.forEach(function (skintone) { ]}
                 <li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (o.current_skintone === skintone) { ]} picked {[ } ]}">