Remove the visible_toolbar_buttons.emoticons config option

in favor of `visible_toolbar_buttons.emoji`.

CHANGES.md

@@ -2,7 +2,12 @@
 
 ## 3.2.0 (Unreleased)
 
+### New features
 - Add support for Emojis (either native, or via <a href="https://www.emojione.com/">Emojione</a>).
+  Therefore the `visible_toolbar_buttons.emoticons` configuration option is now changed
+  to `visible_toolbar_buttons.emoji`. [jcbrand]
+
+### Code changes
 - Removed jQuery from `converse-core`, `converse-vcard` and `converse-roomslist`. [jcbrand]
 - Remove `jquery.easing` from the full build. Was only being used by the
   [conversejs.org](https://conversejs.org) website, which has been updated to not rely on it. [jcbrand]

docs/source/configuration.rst

@@ -1162,7 +1162,7 @@ visible_toolbar_buttons
     {
         call: false,
         clear: true,
-        emoticons: true,
+        emoji: true,
         toggle_occupants: true
     }
 
@@ -1181,9 +1181,9 @@ Allows you to show or hide buttons on the chat boxes' toolbars.
         });
 * *clear*:
     Provides a button for clearing messages from a chat box.
-* *emoticons*:
+* *emoji*:
-    Enables rendering of emoticons and provides a toolbar button for choosing them.
+    Enables rendering of emoji and provides a toolbar button for choosing them.
-* toggle_occupants:
+* *toggle_occupants*:
     Shows a button for toggling (i.e. showing/hiding) the list of occupants in a chat room.
 
 .. _`websocket-url`:

sass/_core.scss

@@ -52,9 +52,6 @@
         -webkit-touch-callout: none;
         @include user-select(none);
     }
-    .emoticon {
-        font-size: $font-size;
-    }
 
     @keyframes fadein {
         0% { opacity: 0 }

src/converse-chatview.js

@@ -93,7 +93,6 @@
                 time_format: 'HH:mm',
                 visible_toolbar_buttons: {
                     'emoji': true,
-                    'emoticons': true,
                     'call': false,
                     'clear': true
                 },
@@ -422,8 +421,8 @@
                             'extra_classes': this.getExtraMessageClasses(attrs)
                         })
                     ));
-                    if (_converse.visible_toolbar_buttons.emoticons) {
+                    if (_converse.visible_toolbar_buttons.emoji) {
-                        text = utils.addEmoticons(_converse, emojione, text);
+                        text = utils.addEmoji(_converse, emojione, text);
                     }
                     $msg.find('.chat-msg-content').first().text(text).addHyperlinks();
                     return $msg;
@@ -780,7 +779,6 @@
                         'label_start_call': __('Start a call'),
                         'show_call_button': _converse.visible_toolbar_buttons.call,
                         'show_clear_button': _converse.visible_toolbar_buttons.clear,
-                        'show_emoticons': _converse.visible_toolbar_buttons.emoticons,
                         'use_emoji': _converse.visible_toolbar_buttons.emoji,
                     });
                 },

src/templates/chatroom_toolbar.html

@@ -1,25 +1,6 @@
-{[ if (show_emoticons)  { ]}
+{[ if (use_emoji)  { ]}
     <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
-    {[ if (use_emoji)  { ]}
         <ul class="emoji-picker"></ul>
-    {[ } ]}
-    {[ if (!use_emoji)  { ]}
-        <ul class="toolbar-picker-panel">
-            <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
-            <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
-            <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
-            <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
-            <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
-            <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
-            <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
-            <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
-            <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
-            <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
-            <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
-            <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
-            <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
-        </ul>
-    {[ } ]}
     </li>
 {[ } ]}
 {[ if (show_call_button)  { ]}

src/templates/toolbar.html

@@ -1,26 +1,7 @@
-{[ if (show_emoticons)  { ]}
+{[ if (use_emoji)  { ]}
     <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
-    {[ if (use_emoji)  { ]}
         <ul class="emoji-picker"></ul>
-    {[ } ]}
-    {[ if (!use_emoji)  { ]}
-        <ul class="toolbar-picker-panel">
-            <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
-            <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
-            <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
-            <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
-            <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
-            <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
-            <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
-            <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
-            <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
-            <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
-            <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
-            <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
-            <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
-        </ul>
     </li>
-    {[ } ]}
 {[ } ]}
 {[ if (show_call_button)  { ]}
 <li class="toggle-call"><a class="icon-phone" title="{{{label_start_call}}}"></a></li>

src/utils.js

@@ -565,7 +565,7 @@
         frag = tmp = null;
     };
 
-    utils.addEmoticons = function (_converse, emojione, text) {
+    utils.addEmoji = function (_converse, emojione, text) {
         return emojione.shortnameToUnicode(text);
     }