emoji: various css and html changes to improve ui/ux in converse and inverse

css/converse.css

@@ -1755,23 +1755,40 @@
           #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; }
+            overflow: scroll;
+            padding: 0.5em; }
           #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);
-            overflow-x: scroll; }
-            #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 {
+            /* offset-x | offset-y | blur-radius | spread-radius | color */
+            box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker {
+            overflow: hidden;
+            left: 0; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker .picked,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker .picked {
               background-color: #DCF9F6; }
-            #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.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
+              height: 30px;
+              padding: 5px;
+              z-index: 98; }
+              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a,
+              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a,
+              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a {
+                font-size: 20px; }
           #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;
             cursor: pointer;
             list-style: none;
             position: relative; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
+              padding: 0.3em; }
             #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
             #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
@@ -1784,16 +1801,6 @@
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul {
-            left: 0; }
-            #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: 5px;
-              z-index: 98; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a {
-                font-size: 20px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
@@ -1845,12 +1852,18 @@
     #conversejs .chat-head {
       border-top-left-radius: 0;
       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 {
+#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker,
+#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
+#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker {
   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 {
+  #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .emoji-category, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker .emoji-category,
+  #conversejs .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-skintone-picker .emoji-category {
     float: left; }
+  #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
+  #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
+  #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
+    padding: 2px; }
 #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; }

css/inverse.css

@@ -1800,24 +1800,41 @@ body {
             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; }
+            height: 150px;
+            overflow: scroll;
+            padding: 0.5em; }
           #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);
-            overflow-x: scroll; }
-            #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 {
+            /* offset-x | offset-y | blur-radius | spread-radius | color */
+            box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker {
+            overflow: hidden;
+            left: 0; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker .picked,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker .picked {
               background-color: #DCF9F6; }
-            #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.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
+              height: 34px;
+              padding: 5px;
+              z-index: 98; }
+              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a,
+              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a,
+              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a {
+                font-size: 26px; }
           #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;
             cursor: pointer;
             list-style: none;
             position: relative; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
+              padding: 0.3em; }
             #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
             #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
@@ -1830,16 +1847,6 @@ body {
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul {
-            left: 0; }
-            #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: 5px;
-              z-index: 98; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a {
-                font-size: 26px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }

sass/_chatbox.scss

@@ -324,18 +324,34 @@
                             &.emoji-picker {
                                 height: $emoji-picker-height;
                                 overflow: scroll;
+                                padding: 0.5em;
                             }
                             &.emoji-category-picker {
-                                box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-                                overflow-x: scroll;
+                                /* offset-x | offset-y | blur-radius | spread-radius | color */
+                                box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
+                            }
+                            &.emoji-category-picker,
+                            &.emoji-skintone-picker {
+                                overflow: hidden;
+                                left: 0;
                                 .picked {
                                     background-color: $highlight-color;
                                 }
-                                .emoji-skintone {
-                                    float: right;
+                                li {
+                                    height: $emoji_height + 2*5px;
+                                    padding: 5px;
+                                    z-index: 98;
+                                    &.emoji {
+                                        a {
+                                            font-size: $font-size-huge;
+                                        }
+                                    }
                                 }
                             }
                             li {
+                                &.insert-emoji {
+                                    padding: 0.3em;
+                                }
                                 margin-left: 0;
                                 cursor: pointer;
                                 list-style: none;
@@ -358,18 +374,6 @@
                     }
                     &.toggle-smiley {
                         padding-left: 5px;
-                        ul {
-                            left: 0;
-                            li {
-                                padding: 5px;
-                                z-index: 98;
-                                &.emoji {
-                                    a {
-                                        font-size: $font-size-huge;
-                                    }
-                                }
-                            }
-                        }
                     }
                     &.toggle-otr {
                         ul {

sass/converse/_chatbox.scss

@@ -18,11 +18,15 @@
                 li {
                     .toolbar-menu {
                         ul {
-                            &.emoji-category-picker {
+                            &.emoji-category-picker,
+                            &.emoji-skintone-picker {
                                 width: 100%;
                                 .emoji-category {
                                     float: left;
                                 }
+                                li {
+                                    padding: 2px;
+                                }
                             }
                         }
                     }

sass/inverse/_variables.scss

@@ -103,7 +103,7 @@ $legend-font-size: 18px !default;
 $toolbar-height: 29px !default;
 $toolbar-color: $greenish-white !default;
 
-$emoji-picker-height: 250px !default;
+$emoji-picker-height: 150px !default;
 
 $line-height-small:  20px !default;
 $line-height:  22px !default;

src/converse-chatview.js

@@ -131,7 +131,7 @@
                 className: 'emoji-picker-container toolbar-menu collapsed',
                 events: {
                     'click .emoji-category-picker li.emoji-category': 'chooseCategory',
-                    'click .emoji-category-picker li.emoji-skintone': 'chooseSkinTone'
+                    'click .emoji-skintone-picker li.emoji-skintone': 'chooseSkinTone'
                 },
 
                 initialize () {
@@ -140,7 +140,7 @@
                     this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
                 },
 
-                render  () {
+                render () {
                     var emojis_html = tpl_emojis(
                         _.extend(
                             this.model.toJSON(), {
@@ -152,7 +152,6 @@
                             }
                         ));
                     this.el.innerHTML = emojis_html;
-
                     this.el.querySelectorAll('.emoji-picker').forEach((el) => {
                         el.addEventListener(
                             'scroll', this.setScrollPosition.bind(this)
@@ -778,6 +777,7 @@
                     if (!_.isUndefined(ev)) {
                         ev.stopPropagation();
                         if (ev.target.classList.contains('emoji-category-picker') ||
+                            ev.target.classList.contains('emoji-skintone-picker') ||
                                 ev.target.classList.contains('emoji-category')) {
                             return;
                         }

src/templates/emojis.html

@@ -14,7 +14,9 @@
             <a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
         </li>
     {[ }); ]}
+</ul>
 
+<ul class="emoji-skintone-picker">
     {[ _.forEach(skintones, function (skintone) { ]}
         <li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}">
             <a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a>