Merge pull request #3831 from tgxworld/fix_emoji_toolbar

UX: Emoji toolbar on mobile.

app/assets/javascripts/discourse/lib/autocomplete.js.es6

@@ -130,10 +130,13 @@ export default function(options) {
         if (options.transformComplete) {
           term = options.transformComplete(term);
         }
-        var text = me.val();
-        text = text.substring(0, completeStart) + (options.key || "") + term + ' ' + text.substring(completeEnd + 1, text.length);
-        me.val(text);
-        Discourse.Utilities.setCaretPosition(me[0], completeStart + 1 + term.length);
+
+        if (term) {
+          var text = me.val();
+          text = text.substring(0, completeStart) + (options.key || "") + term + ' ' + text.substring(completeEnd + 1, text.length);
+          me.val(text);
+          Discourse.Utilities.setCaretPosition(me[0], completeStart + 1 + term.length);
+        }
       }
     }
     closeAutocomplete();

app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6

@@ -236,6 +236,8 @@ var showSelector = function(options) {
     closeSelector();
   });
 
+  if (Discourse.Mobile.mobileView) PER_ROW = 9;
+
   var page = parseInt(localStorage.emojiPage) || 0;
   var offset = parseInt(localStorage.emojiOffset) || 0;
   render(page, offset, options);

app/assets/stylesheets/common/base/emoji.scss

@@ -9,10 +9,9 @@ body img.emoji {
 }
 
 .emoji-modal {
+  @include transform(translate(-50%, -50%));
   z-index: 10000;
   position: fixed;
-  margin-left: -195px;
-  margin-top: -100px;
   left: 50%;
   top: 50%;
   background-color: dark-light-choose(#dadada, blend-primary-secondary(5%));

app/assets/stylesheets/mobile.scss

@@ -20,6 +20,7 @@
 @import "mobile/directory";
 @import "mobile/menu-panel";
 @import "mobile/search";
+@import "mobile/emoji";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 

app/assets/stylesheets/mobile/emoji.scss

@@ -0,0 +1,3 @@
+.emoji-table-wrapper {
+  min-width: 320px;
+}